用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,),);

效果如下：

建立一個送火箭的彈幕：

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),],);

效果如下：

火箭有點醜了，不過這不是重點。

其實實現彈幕效果沒有我開始想的那麼簡單，過程中也遇到了一些問題，不過好在最終都解決了，獻上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 實現虎牙鬥魚 彈幕內容請搜尋我們以前的文章或繼續瀏覽下面的相關文章希望大家以後多多支援我們！