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

点个赞支持下吧🍔

pub地址:pub.dev/packages/fl…

github地址:github.com/taxze6/flut…

该插件灵感来自我的IM开源项目:github.com/taxze6/flut…,具体信息可以查看我的置顶文章:juejin.cn/post/732935…

关于☘

2024 © Taxze

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

什么时候需要该组件🍖

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

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

  • 滚动动画相关功能

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

该例子来自flutter-chat-craft

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

该例子来自flutter-chat-craft

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

功能演示🌮

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

安装🍩

运行 flutter pub add flutter_barrage_craft 或者手动添加 flutter_barrage_craftpubspec.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();

@override
void 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_craftflutter_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://juejin.cn/post/7352090806453354508 作者:编程的平行世界

(0)
上一篇 2024年4月1日 上午10:30
下一篇 2024年4月1日 上午10:41

相关推荐

发表回复

登录后才能评论