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{
      @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滚完第二个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；

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

Flutter跑马灯Marquee

猜你喜欢