溫馨提示×
您好，登錄后才能下訂單哦！
點擊 登錄注冊 即表示同意《億速云用戶服務條款》
您好，登錄后才能下訂單哦！
這篇文章主要為大家展示了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: <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),
),
],
),
),
);效果如下：
火箭有點丑了，不過這不是重點。
以上就是關于Flutter如何實現虎牙/斗魚彈幕功能的內容，如果你們有學習到知識或者技能，可以把它分享出去讓更多的人看到。
免責聲明：本站發布的內容（圖片、視頻和文字）以原創、轉載和分享為主，文章觀點不代表本網站立場，如果涉及侵權請聯系站長郵箱：is@yisu.com進行舉報，并提供相關證據，一經查實，將立刻刪除涉嫌侵權內容。
