android原生得自带跑马灯，可真是幸福啊！Flutter就没那么友好了，必须自己去写，写写也好（安慰自己），了解下怎么实现的；原理其实很简单，代码量也很少。只不过是让ListView不停的animateTo就行了；本跑马灯不但可以水平方向滚动，也可以垂直方向滚动，好了，看下效果图
老规矩，先看下我写好的控件是怎么使用的！
第一步：添加以下代码到你的pubspec.yaml文件
dependencies:
marquee_flutter: ^0.1.2
第二步：导包，添加以下代码到你要使用的文件下
import ‘package:marquee_flutter/marquee_flutter.dart’;
第三步：写你的业务代码（下面是我写的示例代码）
class MarqueeWidgetDemo extends StatelessWidget{
@override
Widget build(BuildContext context) {
return new Scaffold(
appBar: new AppBar(
title: new Text(“跑马灯”),
),
body:new MarqueeWidget(
text: “ListView即滚动列表控件，能将子控件组成可滚动的列表。当你需要排列的子控件超出容器大小”,
textStyle: new TextStyle(fontSize: 16.0),
scrollAxis: Axis.vertical,
)
);
}
}
OK，到这里跑马灯已经可以运行了，不过还是要说下控件中每个参数的作用，以便小伙伴更好的发挥
text 跑马灯要显示的文字
textStyke 文字的样式
scrollAxis 显示的方向，即横向显示或竖向显示
width 宽度
height 高度
ratioOfBlankToScreen 跑马灯前 后文字间空白部分相对屏幕的宽度
是不是用起来很简单，代码实现也很简单的；首先，我们既然要animateTo，肯定是要Controller来动画，还有我们要在第一帧完成后启动timer来保证它不停的animateTo，还有控件尺寸的初始化我们统一在initState里面来做
@override
void initState() {
super.initState();
scroController=new ScrollController();
_containerWidth=new Text(widget.text,style: widget.textStyle).style.fontSize;
_widgetWidth=widget.width!=null&&widget.width>_containerWidth?widget.width:_containerWidth;
_widgetHeight=widget.height==null?null: widget.height;
WidgetsBinding.instance.addPostFrameCallback((callback){
startTimer();
});
}
初始化完成了，看下build方法，我上面说过，我用的ListView设计的，listView是怎么做到不停的循环的呢？我给ListView设计了3个child，这3个child都是差不多的（中间的child给前后加了间距）；当我滚完第二个child的时候，我就又回到（jumpTo）第一个child的开始位置继续滚动，这样的 视觉欺骗 成就了循环往复，就有了跑马灯的效果
@override
Widget build(BuildContext context) {
return new Container(
width: _widgetWidth,
height: _widgetHeight,
child: new Center(
child: new ListView(
scrollDirection: widget.scrollAxis,
controller: scroController,
physics: new NeverScrollableScrollPhysics(),
children: <Widget>[
getBothEndsChild(),
getCenterChild(),
getBothEndsChild(),
],
),
),
);
}
Widget getBothEndsChild(){
if(widget.scrollAxis ==Axis.vertical){
String newString=widget.text.split(“”).join(“\n”);
return new Text(newString,style: widget.textStyle,textAlign: TextAlign.center,);
}
return new Text(widget.text,style: widget.textStyle,);
}
Widget getCenterChild(){
if(widget.scrollAxis ==Axis.horizontal){
return new Container(width: screenWidth*widget.ratioOfBlankToScreen);
}else{
return new Container(height: screenHeight*widget.ratioOfBlankToScreen);
}
}
下面是child循环往复的代码
void startTimer(){
timer=Timer.periodic(new Duration(milliseconds: _timerRest), (timer){
double maxScrollExtent=scroController.position.maxScrollExtent;
double pixels=scroController.position.pixels;
if(pixels+_moveDistance>=maxScrollExtent){
position=(maxScrollExtent-screenWidth/4+screenWidth)/2-screenWidth+pixels-maxScrollExtent;
scroController.jumpTo(position);
}
position+=_moveDistance;
scroController.animateTo(position,duration: new Duration(milliseconds: _animationDuration),curve: Curves.linear);
});
}
代码是不是又点猥琐，不过只要实现功能就行了，我测试了，性能还蛮好的，大家可以放心使用哈，
最后一点重要事，在页面销毁的时候要注销Timer，要注销Timer，要注销Timer
@override
void dispose() {
super.dispose();
timer.cancel();
}
如果在使用的过程中有什么问题，请留言，随时为你解答，
最后附上源码地址：https://github.com/OpenFlutter/PullToRefresh；
————————————————
版权声明：本文为CSDN博主「baoolong」的原创文章，遵循CC 4.0 BY-SA版权协议，转载请附上原文出处链接及本声明。
原文链接：https://blog.csdn.net/baoolong/article/details/86466683