flutter-barrage-craft — 能成为 pub.dev 中最好用的弹幕插件吗🤔？

2024-04-01
浙江
本文字数：2180 字
阅读完需：约 7 分钟

点个赞支持下吧🍔

pub 地址：https://pub.dev/packages/flutter_barrage_craft

github 地址：https://github.com/taxze6/flutter_barrage_craft

该插件灵感来自我的 IM 开源项目：https://github.com/taxze6/flutter-chat-craft，具体信息可以查看我的置顶文章：https://juejin.cn/post/7329350541137920054

关于☘

2024 © Taxze

Flutter Barrage Craft 是一个全平台可用的弹幕组件。它可以自动计算弹幕 widget 的 Size，并插入到弹幕轨道当中。支持全部弹幕的暂停、播放、运动速度控制，支持单个弹幕的暂停、播放、单击事件、双击事件...

什么时候需要该组件🍖

短视频平台、直播平台...等需要弹幕的场景

flutter-barrage-craft 可以让您在几分钟内完成集成，只需要将弹幕数据传入弹幕控制器即可。这样，您可以将更多的精力用于编写处理弹幕数据相关功能代码。

滚动动画相关功能

flutter-barrage-craft 虽然是一个弹幕插件，但是可以借助该插件完成滚动动画相关功能，只需要将滚动的数据循环进弹幕控制器即可。

该例子来自flutter-chat-craft

幕插件，但是可以借助该插件完成滚动动画相关功能，只需要将滚动的数据循环进弹幕控制器即可。

该例子来自flutter-chat-craft

功能演示🌮

安装🍩

运行 flutter pub add flutter_barrage_craft 或者手动添加 flutter_barrage_craft 到 pubspec.yaml 依赖项。

dependencies:  flutter_barrage_craft: ^latest_version

复制代码

然后，运行 flutter pub get 安装该插件。

用法🍝

要在 Flutter 中使用 flutter_barrage_craft，请首先导入包：

import 'package:flutter_barrage_craft/flutter_barrage_craft.dart';

复制代码

初始化弹幕控制器

在initState中通过WidgetsBinding.instance.addPostFrameCallback回调函数传入弹幕移动区域，此处传入的移动区域为Size(MediaQuery.of(context).size.width, 300)。

BarrageController controller = BarrageController();
@overridevoid initState() {  super.initState();  WidgetsBinding.instance.addPostFrameCallback((_) {    setState(() {      controller.init(Size(MediaQuery.of(context).size.width, 300));    });  });}

复制代码

通过控制器添加弹幕

您可以将任何正常渲染的widget通过addBarrage添加到弹幕队列中。

方式一：已经手动计算完成 widget size

💥我推荐您选择这种方式，因为会减少一次对传入 widget 的 build，有一定的性能提升。

controller.addBarrage(  barrageWidget: const SizedBox(    width: 100,    height: 20,    child: Text(      "Test Barrage",      style: TextStyle(        fontSize: 14,        color: Colors.white,      ),    ),  ),  widgetSize: const Size(100, 20),);

复制代码

方式二：非固定尺寸（unconstrained）的 widget size

🚩这种方式非常方便，如果您无法确定传入widget的尺寸，没关系，把它交给flutter_barrage_craft，flutter_barrage_craft会完成对该widget的尺寸计算。

使用该方式需注意：
1.会额外 build 一次 widget，用于尺寸计算。
2.必须要传入 BuildContext，否则无法通过 assert(context != null) 。

controller.addBarrage(  barrageWidget: Container(    padding: const EdgeInsets.symmetric(      horizontal: 20,      vertical: 12,    ),    decoration: BoxDecoration(      color: Colors.primaries[          Random().nextInt(Colors.primaries.length)],    ),    child: const Row(      mainAxisSize: MainAxisSize.min,      children: [        FlutterLogo(),        SizedBox(          width: 12,        ),        Text(          "Container Test Barrage",          style: TextStyle(            fontSize: 16,            color: Colors.white,          ),        ),      ],    ),  ),  context: context,);

复制代码

给弹幕添加单击/双击事件

添加单击事件

controller.setBarrageTapCallBack((value) {    print(value);});

复制代码

添加双击事件

controller.setBarrageDoubleTapCallBack((value) {    print(value);});

复制代码

给弹幕添加渲染/移除屏幕监听事件

添加单个弹幕完成显示在屏幕上处理

controller.setSingleBarrageShowScreenCallBack((value) {    print(value);});

复制代码

添加单个弹幕移除屏幕处理

controller.setSingleBarrageRemoveScreenCallBack((value) {    print(value);});

复制代码

添加全部弹幕移除屏幕处理

controller.setAllBarragesRemoveScreenCallBack((value) {    print(value);});

复制代码

改变弹幕移动速度

传入任何大于 0 的浮点数。

该例子是在原有移动速度上加速 3 倍。

controller.changeBarrageRate(3.0);

复制代码

如果需要回到原来移动速度，只需要传入 1。

controller.changeBarrageRate(1.0);

复制代码

播放/暂停弹幕

播放

controller.play();

复制代码

暂停

controller.pause();

复制代码

暂停/播放单个弹幕

只需要将该弹幕的 pause = !pause即可，下面是通过单击事件实现的暂停/播放单个弹幕。

controller.setBarrageTapCallBack((value) {  print(value.toString());  //Pause a single barrage.  setState(() {    value.pause = !value.pause;  });});

复制代码

关于我

Hello，我是 Taxze，如果您觉得文章对您有价值，希望您能给我的文章点个❤️，有问题需要联系我的话：https://github.com/taxze6。如果您觉得文章还差了那么点东西，也请通过关注督促我写出更好的文章~万一哪天我进步了呢？😝

发布于: 10 分钟前阅读数: 8

原文链接:【http://xie.infoq.cn/article/526bf82cebc0ec1e5569eadbb】。

编程的平行世界

关注

他日若遂凌云志敢笑黄巢不丈夫 2020-10-15 加入

曾许少年凌云志，誓做人间第一流. 一起加入Flutter技术交流群532403442 有好多好多滴学习资料喔～小T目前主攻Android与Flutter, 通常会搞搞人工智能、SpringBoot 、Mybatiys等.

发布

暂无评论

创作场景

flutter-barrage-craft — 能成为 pub.dev 中最好用的弹幕插件吗🤔？

点个赞支持下吧🍔

关于☘

什么时候需要该组件🍖

功能演示🌮

安装🍩

用法🍝

初始化弹幕控制器

通过控制器添加弹幕

给弹幕添加单击/双击事件

添加单击事件

添加双击事件

给弹幕添加渲染/移除屏幕监听事件

添加单个弹幕完成显示在屏幕上处理

添加单个弹幕移除屏幕处理

添加全部弹幕移除屏幕处理

改变弹幕移动速度

播放/暂停弹幕

播放

暂停

暂停/播放单个弹幕

关于我

编程的平行世界

评论