Flutter 实现虎牙斗鱼 d幕效果_app

概述老孟导读：用Flutter实现d幕功能，轻松实现虎牙、斗鱼的d幕效果。先来一张效果图：实现原理 d幕的实现原理非常简单，即将一条d幕从左侧平移到右侧，当然我们要计算d幕垂直方向上的偏移，不然所有的

老孟导读：用Flutter实现d幕功能，轻松实现虎牙、斗鱼的d幕效果。

先来一张效果图：

实现原理

d幕的实现原理非常简单，即将一条d幕从左侧平移到右侧，当然我们要计算d幕垂直方向上的偏移，不然所有的d幕都会在一条直线上，相互覆盖。平移代码如下：

@overrIDevoID initState() {  _animationController =      AnimationController(duration: Widget.duration,vsync: this)  ..addStatusListener((status){    if(status == AnimationStatus.completed){      Widget.onComplete('');    }  });  var begin = Offset(-1.0,.0);  var end = Offset(1.0,.0);    _animation = Tween(begin: begin,end: end).animate(_animationController);  //开始动画  _animationController.forward();  super.initState();}@overrIDe  Widget build(BuildContext context) {    return SlIDeTransition(      position: _animation,child: Widget.child,);  }

计算垂直方向的偏移：

_computetop(int index,double perRowHeight) {  //第几轮d幕  int num = (index / Widget.showCount).floor();  var top;  top = (index % Widget.showCount) * perRowHeight + Widget.padding;  if (num % 2 == 1 && index % Widget.showCount != Widget.showCount - 1) {    //第二轮在第一轮2行d幕中间    top += perRowHeight / 2;  }  if (Widget.randomOffset != 0 && top > Widget.randomOffset) {    top += _random.nextInt(Widget.randomOffset) * 2 - Widget.randomOffset;  }  return top;}

这些准备好后，就是创建一条d幕了，现创建一条最简单的文字d幕：

Text(  text,style: TextStyle(color: colors.white),);

效果如下：

创建一条VIP用户的d幕，其实就是字体变下颜色：

Text(  text,style: TextStyle(color: color(0xFFE9A33A)),)

效果如下：

给文字加个圆角背景：

return Center(  child: Container(    padding: EdgeInsets.only(left: 10,right: 10,top: 3,bottom: 3),decoration: Boxdecoration(        color: colors.red.withOpacity(.8),borderRadius: borderRadius.circular(50)),child: Text(      text,),);

效果如下：

创建一个送火箭的d幕：

return Center(  child: Container(    padding: EdgeInsets.only(left: 10,child: Row(      mainAxisSize: MainAxisSize.min,children: <Widget>[        Text(          text,Image.asset('assets/images/timg.jpeg',height: 30,wIDth: 30,Text(          'x $count',style: TextStyle(color: colors.white,FontSize: 18),],);

效果如下：

火箭有点丑了，不过这不是重点。

其实实现d幕效果没有我开始想的那么简单，过程中也遇到了一些问题，不过好在最终都解决了，献上Github地址：https://github.com/781238222/flutter-do/tree/master/flutter_barrage_sample

如果觉得还不错，给个小小的赞。

交流

Github地址：https://github.com/781238222/flutter-do

170+组件详细用法：http://laomengit.com

如果你对Flutter还有疑问或者技术方面的疑惑，欢迎加入Flutter交流群（微信：laomengit）。

同时也欢迎关注我的Flutter公众号【老孟程序员】，公众号首发Flutter的相关内容。

Flutter生态建设离不开你我他，需要大家共同的努力，点赞也是其中的一种，如果文章帮助到了你，希望点个赞。

总结

以上是内存溢出为你收集整理的Flutter 实现虎牙/斗鱼 d幕效果全部内容，希望文章能够帮你解决Flutter 实现虎牙/斗鱼 d幕效果所遇到的程序开发问题。