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的时候,我就又回到(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: [
            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)