flutter 跑马灯+渐变透明度背景

之前也是记录了很多小组件的实现，这次把所有代码都给放到这里吧
这是效果：
数据（后台数据，不过我这是没的，不要在意这些小细节，忽略吧）

 Http().post(url,pathParams: params,data: params,success: (json){studyModel = FindStudyModel.fromJson(json);}, errorCallback: (error) {print('error: $error');});

数据模型（因为后台没数据，为了实现效果，自己添加的，不要在意这些小细节，忽略吧）


/// 学习 model
class FindStudyModel {///课程 IdString? courseId;///课程名称String? courseName;///我的学习默认封面图String? coverImage;///微课 IdString? microCourseId;///微课名称String? microCourseName;///课程类型 String? microCourseType;///我的学习 - 用户身份类型枚举值 int? myStudyUserType;///学生提问数据列表List<FindStudyQuestionModel>? userQuestions;FindStudyModel({this.courseId,this.courseName,this.coverImage,this.microCourseId,this.microCourseName,this.microCourseType,this.myStudyUserType,this.userQuestions,});FindStudyModel.fromJson(dynamic json) {courseId = json["courseId"] ?? '';courseName = json["courseName"] ?? '';coverImage = json["coverImage"] ?? '';microCourseId = json["microCourseId"] ?? '';microCourseName = json["microCourseName"] ?? '';microCourseType = json["microCourseType"] ?? '';myStudyUserType = json["myStudyUserType"] ?? 0;
///没数据，没办法，为了实现效果，只有自己造数据了，不要在意这些小细节，忽略吧userQuestions = [];for (int index = 0; index < 10; index ++) {Map map = {///网上拿的图片'userAvatar': 'https://imgm.gmw.cn/attachement/jpg/site215/20210812/8692573091945953206.jpg','content': '语言攻击$index',};if (index%2 == 0) {map['content'] = '知名中文 IT 技术交流平台，创建于 1999 年，包含原创博客、精品问答、职业培训、技术论坛、资源下载等产品服务$index';}FindStudyQuestionModel model = FindStudyQuestionModel.fromJson(map);userQuestions!.add(model);} }
}
///发现页 我的学习 学生提问 model
class FindStudyQuestionModel {///用户头像String? userAvatar;///学生提问的内容String? content;FindStudyQuestionModel({this.userAvatar,this.content,});FindStudyQuestionModel.fromJson(dynamic json) {userAvatar = json["userAvatar"];content = json["content"];}
}

下面就是具体实现内容了

class FindStudy extends StatefulWidget {FindStudyModel model = FindStudyModel();FindStudy(BuildContext context, this.model);@overrideState<StatefulWidget> createState() {return FindStudyState();}
}


class FindStudyState extends State<FindStudy> {late int _count = (widget.model.userQuestions ?? []).length; //总数量late String name = '融合式教学，学管师督学'; //contentlate List<FindStudyQuestionModel> questionList = [];late ScrollController _controller;late int _showNumber = 4; //展示的行数late Timer _timer;late double _offset = 0.0;late double _stepOffset = 28; // 偏移量 也是listView中的组件高度late Duration _duration = Duration(seconds: 3);late int _currentIndex;@overridevoid didUpdateWidget(covariant FindStudy oldWidget) {print('____:$name $_count');_count = (widget.model.userQuestions ?? []).length; //更新, 数据刷新不确定会不会出现问题switch (widget.model.myStudyUserType ?? 0) {case 1:name = widget.model.microCourseName!;questionList.addAll(widget.model.userQuestions!);break;case 2:name = widget.model.courseName!;questionList.addAll(widget.model.userQuestions!);break;default:name = '融合式教学，学管师督学';questionList.clear();break;}print('____:$name $_count');super.didUpdateWidget(oldWidget);starTimer();}void initState() {super.initState();starTimer();}///跑马灯的滚动处理void starTimer() {_currentIndex = 0;_controller = ScrollController(initialScrollOffset: _offset);if (_count > _showNumber) {_timer = Timer.periodic(_duration, (timer) {_currentIndex += 1;double newOffset = _controller.offset + _stepOffset;if (newOffset != _offset) {_offset = newOffset;}_controller.animateTo(newOffset,duration: Duration(milliseconds: 300),curve: Curves.linear);if (_currentIndex >= _count) {Future.delayed(Duration(milliseconds: 300), () {_currentIndex = 0;_controller.jumpTo(0);});}});}}@overridevoid dispose() {_timer.cancel();_controller.dispose();super.dispose();}}

下面的内容也是在 FindStudyState，不过为了看方便

Widget build(BuildContext context) {double cardWidth = (MediaQuery.of(context).size.width - 44)/2;return Container(margin: EdgeInsets.only(left: 16),width: cardWidth,height: cardWidth * 1.2,decoration: BoxDecoration(image: DecorationImage(fit: BoxFit.fill,image: AssetImage(CommonImages.find_main_study_bg),),),child: Column(crossAxisAlignment: CrossAxisAlignment.start,children: [Container(margin: EdgeInsets.only(left: 13, top: 17, right: 13),child: Text('我的学习',style: TextStyle(color: Colors.white,fontSize: 15,fontWeight: FontWeight.bold,),),),Container(margin: EdgeInsets.only(left: 13, top: 10, right: 13),child: Expanded(child: Text(name,style: TextStyle(color: Colors.white,fontSize: 12,fontWeight: FontWeight.w400,),maxLines: 2,overflow: TextOverflow.ellipsis,),),),ShaderMask(//此处是背景透明度渐变的处理shaderCallback: (Rect bounds) {return LinearGradient(begin: Alignment.topCenter,end: Alignment.bottomCenter,colors: [Color.fromRGBO(0, 0, 0, 0.1),Color.fromRGBO(0, 0, 0, 0.9),],).createShader(Rect.fromLTRB(0, 0, bounds.width, bounds.height));},blendMode: BlendMode.dstIn,child: Container(margin: EdgeInsets.only(left: 8, top: 8, right: 3 ),constraints: BoxConstraints(maxHeight: 28 * 4,///高度这样实现也是很无奈，各位有好方法请给推荐一下),///跑马灯的listViewchild: ListView.builder(itemCount: _count > _showNumber ? _count + _showNumber : _count,controller: _controller,physics: NeverScrollableScrollPhysics(),itemBuilder: (context, index) {return itemWidget(context, index);}),),),],),);}

这是listView里面的组件

Widget itemWidget(BuildContext context, int index) {double cardWidth = (MediaQuery.of(context).size.width - 44)/2 - 11;FindStudyQuestionModel sonModel = widget.model.userQuestions![index >= _count ? index - _count: index];return Row(mainAxisSize: MainAxisSize.min,children: [Container(height: 20,constraints: BoxConstraints(maxWidth: cardWidth,),margin: EdgeInsets.only(top: 8),decoration: BoxDecoration(color: Color(0x66ffffff),border: Border.all(width: 0.5, color: Color(0x66FF0808)),borderRadius: BorderRadius.all(Radius.circular(10)),),child: Row(mainAxisSize: MainAxisSize.min,children: [Card(margin: EdgeInsets.only(left: 2, top: 2, bottom: 2, right: 6),shape: RoundedRectangleBorder(borderRadius: BorderRadiusDirectional.circular(8),),clipBehavior: Clip.antiAlias,child: Image.network(sonModel.userAvatar ?? '',fit: BoxFit.fill,width: 16,height: 16,)),Container( margin: EdgeInsets.only(right: 4),constraints: BoxConstraints(maxWidth: cardWidth - 30,), child: Text(sonModel.content ?? '',style: TextStyle(color: Color(0xFF560303),fontSize: 8,fontWeight: FontWeight.w400,),maxLines: 1,overflow: TextOverflow.ellipsis,), ),],),),],);}

本人flutter 初学者，各位大神有更好的方法，或者我写的错误地方，请给予指出。上面代码也是摘抄自项目中，可能有很多亢杂代码，敬请谅解吧，主要是自己记录给自己看的

此文章仅做学习记录使用，如有不足之处请各位大神指出，谢谢

flutter 跑马灯+渐变透明度背景相关推荐

视频安全之授权播放和防录屏跑马灯
阿酷TONY 2021-2-26 整理视频安全之授权播放和防录屏跑马灯先上效果图(视频播放时,显示学员名称和学员手机号): 屏幕录像是最难防范的一种视频盗版方式,保利威播放器提供的防录屏跑马灯功 ...
转：Flutter Decoration背景设定（边框、圆角、阴影、形状、渐变、背景图像等）...
1 继续关系: BoxDecoration:实现边框.圆角.阴影.形状.渐变.背景图像 ShapeDecoration:实现四个边分别指定颜色和宽度.底部线.矩形边色.圆形边色.体育场(竖向椭圆). ...
Flutter之Decoration（边框、圆角、阴影、形状、渐变、背景图像等）
1 继续关系: BoxDecoration:实现边框.圆角.阴影.形状.渐变.背景图像 ShapeDecoration:实现四个边分别指定颜色和宽度.底部线.矩形边色.圆形边色.体育场(竖向椭圆). ...
Flutter Decoration背景设定（边框、圆角、阴影、形状、渐变、背景图像等）
1 继续关系: BoxDecoration:实现边框.圆角.阴影.形状.渐变.背景图像 ShapeDecoration:实现四个边分别指定颜色和宽度.底部线.矩形边色.圆形边色.体育场(竖向椭圆). ...
前端原生 CSS 跑马灯效果，无限轮播（横竖版本，带渐变遮罩，简单实用）
一.横版跑马灯 <!DOCTYPE html> <html lang="en"> <head><meta charset="UT ...
html 图片行内剧中,HTML入门(转义字符、行内样式和块级元素、定位、锚点、跑马灯标签、图片标签、表格标签的讲解)...
一.转义字符由特殊字符包裹的文本会当做标签去解析对应不换行空格对应全角空格 em是字体排印学的计量单位,相当于当前指定的点数.其占据的宽度正好是1个中文宽度,而且基本上不受字体影响. < ...
手机屏大字滚动_LED跑马灯屏-LED跑马灯屏App下载-
LED跑马灯屏软件是一款模拟LED显示屏应用软件,LED跑马灯软件可轻易实现发光LED跑马灯,使用这款LED跑马灯软件可以随你喜欢自行定义滚动的文字和文字样式. LED跑马灯软件是演唱会电子灯牌.机场 ...
android 自定义view: 跑马灯-光圈
本系列自定义View全部采用kt **系统: **mac android studio: 4.1.3 **kotlin version:**1.5.0 gradle: gradle-6.5-bin.z ...
只需一个DOM，纯CSS实现线性跑马灯特效
只需一个DOM,纯CSS实现跑马灯线性特效引言跑马灯效果图&Demo 跑马灯代码样式分析解释引言之前看到一个效果,一条小细线,围绕着边框一直绕圈,不过它的实现方式使用了JavaScr ...

flutter 跑马灯+渐变透明度背景

flutter 跑马灯+渐变透明度背景相关推荐

最新文章

热门文章