Flutter 实现虎牙/斗鱼弹幕效果

超、凢脫俗 2023-07-25 09:07 119阅读 0赞

![watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lbmdrczE5ODc_size_16_color_FFFFFF_t_70][]

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

先来一张效果图：

![barrage_5.gif][]

## 实现原理 ##

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

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

效果如下：

![barrage_1.gif][]

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

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

效果如下：

![barrage_2.gif][]

给文字加个圆角背景：

效果如下：

![barrage_3.gif][]

创建一个送火箭的弹幕：

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

效果如下：

![barrage_4.gif][]

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

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

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

## 交流 ##

Github地址：[https://github.com/781238222/flutter-do][https_github.com_781238222_flutter-do]

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

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

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

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

[watermark_type_ZmFuZ3poZW5naGVpdGk_shadow_10_text_aHR0cHM6Ly9ibG9nLmNzZG4ubmV0L21lbmdrczE5ODc_size_16_color_FFFFFF_t_70]: /images/20230528/314f0b90715f48b0afb2caeae1fd4ba9.png
[barrage_5.gif]: http://img.laomengit.com/barrage_5.gif
[barrage_1.gif]: http://img.laomengit.com/barrage_1.gif
[barrage_2.gif]: http://img.laomengit.com/barrage_2.gif
[barrage_3.gif]: http://img.laomengit.com/barrage_3.gif
[barrage_4.gif]: http://img.laomengit.com/barrage_4.gif
[https_github.com_781238222_flutter-do_tree_master_flutter_barrage_sample]: https://github.com/781238222/flutter-do/tree/master/flutter_barrage_sample
[https_github.com_781238222_flutter-do]: https://github.com/781238222/flutter-do
[http_laomengit.com]: http://laomengit.com