直播代码Flutter实现虎牙斗鱼弹幕效果
直播代码Flutter实现虎⽛⽃鱼弹幕效果
实现原理斗鱼弹幕暂时不能打开
弹幕的实现原理⾮常简单，即将⼀条弹幕从左侧平移到右侧，当然我们要计算弹幕垂直⽅向上的偏移，不然所有的弹幕都会在⼀条直线上，相互覆盖。平移代码如下：
@override
void initState(){
_animationController =
AnimationController(duration: widget.duration, vsync: this)
..addStatusListener((status){
if(status == AnimationStatuspleted){
}
});
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 += _Int(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: ly(left:10, right:10, top:3, bottom:3),    decoration:BoxDecoration(
color: d.withOpacity(.8),
borderRadius: BorderRadius.circular(50)),
child:Text(
text,
style:TextStyle(color: Colors.white),
),
),
);
创建⼀个送⽕箭的弹幕：
return Center(
child:Container(
padding: ly(left:10, right:10, top:3, bottom:3),    decoration:BoxDecoration(
color: d.withOpacity(.8),
borderRadius: BorderRadius.circular(50)),
child:Row(
mainAxisSize: MainAxisSize.min,
children:<Widget>[
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), ),
],
),
),
);
return Center(
child:Container(
padding: ly(left:10, right:10, top:3, bottom:3),    decoration:BoxDecoration(
color: d.withOpacity(.8),
borderRadius: BorderRadius.circular(50)),
child:Row(
mainAxisSize: MainAxisSize.min,
children:<Widget>[
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), ),
],
)
,
),
);

版权声明：本站内容均来自互联网，仅供演示用，请勿用于商业和其他非法用途。如果侵犯了您的权益请与我们联系QQ:729038198，我们将在24小时内删除。