这篇文章主要为大家展示了Flutter如何实现虎牙/斗鱼弹幕功能，内容简而易懂，希望大家可以学习一下，学习完之后肯定会有收获的，下面让小编带大家一起来看看吧。
禹会网站建设公司成都创新互联公司,禹会网站设计制作，有大型网站制作公司丰富经验。已为禹会成百上千家提供企业网站建设服务。企业网站搭建\外贸营销网站建设要多少钱，请找那个售后服务好的禹会做网站的公司定做！
先来一张效果图：
实现原理
弹幕的实现原理非常简单，即将一条弹幕从左侧平移到右侧，当然我们要计算弹幕垂直方向上的偏移，不然所有的弹幕都会在一条直线上，相互覆盖。平移代码如下：
@override
void 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) {
//第几轮弹幕
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行弹幕中间
top += perRowHeight / 2;
}
if (widget.randomOffset != 0 && top > widget.randomOffset) {
top += _random.nextInt(widget.randomOffset) * 2 - widget.randomOffset;
}
return top;
}这些准备好后，就是创建一条弹幕了，现创建一条最简单的文字弹幕：
Text(
text,
style: TextStyle(color: Colors.white),
);
效果如下：
创建一条VIP用户的弹幕，其实就是字体变下颜色：
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,
style: TextStyle(color: Colors.white),
),
),
);
效果如下：
创建一个送火箭的弹幕：
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: Row(
mainAxisSize: MainAxisSize.min,
children: [
Text(
text,
style: TextStyle(color: Colors.white),
),
Image.asset('assets/images/timg.jpeg',height: 30,width: 30,),
Text(
'x $count',
style: TextStyle(color: Colors.white, fontSize: 18),
),
],
),
),
);
效果如下：
火箭有点丑了，不过这不是重点。
以上就是关于Flutter如何实现虎牙/斗鱼弹幕功能的内容，如果你们有学习到知识或者技能，可以把它分享出去让更多的人看到。
网页名称：Flutter如何实现虎牙/斗鱼弹幕功能
链接地址：
http://cdkjz.cn/article/jpiogg.html
