flutter_marquee

flutter 插件

flutter 跑马灯
可以指定跑马灯的方向
可以传入数组，可以是自定义的widget
可以控制跑马灯的时间间隔
控制点击事件等等

效果图

QQ20181206-234225.gif

git

https://github.com/LiuC520/flutter_marquee

引入:

dependencies: flutter: sdk: flutter flutter_marquee: git: https://github.com/LiuC520/flutter_marquee.git 

属性

Attribute 属性	Description 描述
children	自定义的widget组件数组
texts	也可以传入 字符串数组
seletedTextColor	当前显示text的颜色，只有texts有值才生效
textColor	其他text的颜色，只有texts有值才生效
duration	跑马灯的切换时长 默认是4秒
itemDuration	单个item的动画出现或者退出时长 默认是500毫秒
autoStart	是否自动开始动画
animationDirection	动画显示的切换方式，默认是从上往下切换: AnimationDirection.l2r、AnimationDirection.r2l、AnimationDirection.t2b、AnimationDirection.b2t
animateDistance	移动的距离: 如果没有设置就是默认获取组件宽高，横向动画就是组建的宽度，纵向的就是组件的高度
singleLine	是否是单行显示: 默认是false
onChange	点击事件回调: 回调的参数是跑马灯的widget的下标

Example

1、首先在pubspec.yaml中添加依赖

dependencies: flutter: sdk: flutter flutter_marquee: git: https://github.com/flutter_marquee/flutter_marquee.git

import 'package:flutter_marquee/flutter_marquee.dart'; Column( children: <Widget>[ Column( children: <Widget>[ Text("从下到上,时间间隔6秒，传入的是字符串数组"), Container( margin: EdgeInsets.all(4), height: 60, width: 200, decoration: BoxDecoration( border: Border.all(width: 2, color: Colors.red), borderRadius: BorderRadius.all(Radius.circular(8))), child: FlutterMarquee( texts: ["刘成", "刘成1111", "刘成2222", "刘成3333"].toList(), onChange: (i) { print(i); }, duration: 4), ) ], ), Column( children: <Widget>[ Text("从上到下,时间间隔8秒,传入的是自定义的text widget"), Container( margin: EdgeInsets.all(4), height: 60, width: 200, decoration: BoxDecoration( border: Border.all(width: 2, color: Colors.red), borderRadius: BorderRadius.all(Radius.circular(8))), child: FlutterMarquee( children: <Widget>[ Text( "刘成", style: TextStyle(color: Colors.red), ), Text("刘成1111", style: TextStyle(color: Colors.green)), Text("刘成2222", style: TextStyle(color: Colors.blue)), Text("刘成3333", style: TextStyle(color: Colors.yellow)), ], onChange: (i) { print(i); }, animationDirection: AnimationDirection.t2b, duration: 8), ) ], ), Column( children: <Widget>[ Text("从左到右,时间间隔2秒,自定义的view"), Container( margin: EdgeInsets.all(4), height: 60, width: 200, decoration: BoxDecoration( border: Border.all(width: 2, color: Colors.red), borderRadius: BorderRadius.all(Radius.circular(8))), child: FlutterMarquee( children: <Widget>[ Center( child: Row( children: <Widget>[ Icon(Icons.menu), Text( "刘成", style: TextStyle(color: Colors.green), ), ], ), ), Center( child: Row( children: <Widget>[ Icon(Icons.add), Text( "刘成1111", style: TextStyle(color: Colors.red), ), ], ), ), Center( child: Row( children: <Widget>[ Icon(Icons.satellite), Text( "刘成2222", style: TextStyle(color: Colors.blue), ), ], ), ), Center( child: Row( children: <Widget>[ Icon(Icons.format_align_justify), Text("刘成3333", style: TextStyle(color: Colors.yellow)), ], ), ), ], onChange: (i) { print(i); }, animationDirection: AnimationDirection.l2r, duration: 2), ) ], ), Column( children: <Widget>[ Text("从右到左,时间间隔6秒"), Container( margin: EdgeInsets.all(4), height: 60, width: 200, decoration: BoxDecoration( border: Border.all(width: 2, color: Colors.red), borderRadius: BorderRadius.all(Radius.circular(8))), child: FlutterMarquee( texts: ["刘成", "刘成1111", "刘成2222", "刘成3333"].toList(), onChange: (i) { print(i); }, animationDirection: AnimationDirection.r2l, duration: 6), ) ], ),

本页内容由塔灯网络科技有限公司通过网络收集编辑所得，所有资料仅供用户学习参考，本站不拥有所有权，如您认为本网页中由涉嫌抄袭的内容，请及时与我们联系，并提供相关证据，工作人员会在5工作日内联系您，一经查实，本站立刻删除侵权内容。本文链接:http://dengtar.com/17572.html