Flutter跑马灯Marquee

android原生得自带跑马灯，可真是幸福啊！Flutter就没那么友好了，必须自己去写，写写也好（安慰自己），了解下怎么实现的；原理其实很简单，代码量也很少。只不过是让ListView不停的animateTo就行了；本跑马灯不但可以水平方向滚动，也可以垂直方向滚动，好了，看下效果图

老规矩，先看下我写好的控件是怎么使用的！

第一步：添加以下代码到你的pubspec.yaml文件

dependencies:marquee_flutter: ^0.1.2

第二步：导包，添加以下代码到你要使用的文件下

import 'package:marquee_flutter/marquee_flutter.dart';

第三步：写你的业务代码（下面是我写的示例代码）

class MarqueeWidgetDemo extends StatelessWidget{@overrideWidget 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里面来做

@overridevoid 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的开始位置继续滚动，这样的视觉欺骗成就了循环往复，就有了跑马灯的效果

@overrideWidget 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

@overridevoid dispose() {super.dispose();timer.cancel();}

如果在使用的过程中有什么问题，请留言，随时为你解答，

最后附上源码地址：https://github.com/OpenFlutter/PullToRefresh；

里面有很多更酷的控件，欢迎Star；如果喜欢Flutter，可以加入我们哦，我们的QQ群是：892398530

Flutter跑马灯Marquee相关推荐

flutter 跑马灯+渐变透明度背景
之前也是记录了很多小组件的实现,这次把所有代码都给放到这里吧这是效果: 数据(后台数据,不过我这是没的,不要在意这些小细节,忽略吧) Http().post(url,pathParams: para ...
html 跑马灯marquee属性
一.marquee标签的几个重要属性: 1.direction:滚动方向(包括4个值:up.down.left.right) 说明:up:从下向上滚动:down:从上向下滚动:left:从右向左滚动: ...
参考学习的各种跑马灯代码
实现跑马灯的方法很多,其中最简单的是采用一句Html代码来实现,我们在需要出现跑马灯效果的地方插入"<marquee>滚动的文字</marquee>"语句, ...
前端：弹幕标签用法详细介绍（跑马灯）
弹幕标签 1,注意弹幕标签marquee,现在一些浏览器是不支持的 2,弹幕标签也叫跑马灯 marquee格式及其含有的属性 1.基本格式如下: <marquee></marque ...
android:ellipsize = marquee 跑马灯,Android-单行跑马灯（一直循环）效果
[声明:]本文是作者(蘑菇v5)原创,版权归作者蘑菇v5所有,侵权必究.本文首发在简书.如若转发,请注明作者和来源地址!未经授权,严禁私自转载! 前言: 提示的效果,要求一直循环. 1.跑马灯效果( ...
HTML之marquee标签（滚动字幕（跑马灯））
再来学习一个标签---marquee,认识这个单词的人应该知道这个单词的意思是跑马灯. 但其实在H5中这个标签的语义是滚动字幕. marquee标签并不是W3C官方推荐的标签,但是这个标签在各个浏览器 ...
html连续跑马灯无缝连接,无缝跑马灯实现（！marquee）
一般我们需要实现一个简单的跑马灯,我们可以使用标签,但是会存在一个问题,轮播的时候并不是连续的,循环播放的时候中间有段时间会出现白色空白. image 那么有没有什么办法让循环播放的时候中途不出现空白 ...
android:ellipsize = marquee 跑马灯,TextView设置android:ellipsize=marquee不滚动
今天发现android开发中有一个android:ellipsize=marquee,这个感觉像html中的marquee功能,可以实现滚动效果,于是测试了一下,结果不行呀,后来百度了一下解决办法,下 ...
android:ellipsize = marquee 跑马灯,Android基于TextView属性android:ellipsize实现跑马灯效果的方法...
本文实例讲述了Android基于TextView属性android:ellipsize实现跑马灯效果的方法.分享给大家供大家参考,具体如下: Android系统中TextView实现跑马灯效果,必须具 ...
TextView系列：ellipsize属性详解 android:ellipsize=“marquee“（跑马灯效果）
如下图,从上到下,ellipsesize对应的属性依次是: none start middle end 单行末尾省略比较常见,需要设置三个点:textView宽度,singleLine为true,el ...

Flutter跑马灯Marquee

Flutter跑马灯Marquee相关推荐

最新文章

热门文章