Android Flutter實(shí)現(xiàn)彈幕效果

更新時(shí)間：2022年06月18日 09:33:07 作者：JulyYu

這篇文章主要為大家詳細(xì)介紹如何利用Android FLutter實(shí)現(xiàn)彈幕效果，文中示例代碼介紹的非常詳細(xì)，具有一定的參考價(jià)值，感興趣的小伙伴們可以參考一下

前言

需求要點(diǎn)如下：

彈幕行數(shù)為3行，每條彈幕相互依靠但不存在重疊
每條彈幕可交互點(diǎn)擊跳轉(zhuǎn)
滾動(dòng)速度恒定觸摸不可暫停播放
彈幕數(shù)據(jù)固定一百條且支持輪詢播放

彈幕排序規(guī)則如下：

1 4 7

2 5 8

3 6 9

通用彈幕實(shí)現(xiàn)方案

Flutter Dev Package已有開源彈幕實(shí)現(xiàn)組件，這里舉例barrage_page的實(shí)現(xiàn)方式（大多數(shù)實(shí)現(xiàn)底層邏輯基本一樣）。

基本架構(gòu)采用Stack然后向布局中提交彈幕布局，添加時(shí)設(shè)置好彈幕偏移量來(lái)設(shè)置彈幕位置。

Stack(fit: StackFit.expand, children: <Widget>[
        widget.child,
        _controller.isEnabled
            ? Stack(
            fit: StackFit.loose,
            children: <Widget>[]
              ..addAll(_widgets.values ?? const SizedBox()))
            : const SizedBox(),
      ]);
    });

彈幕效果代碼

但因?yàn)槊織l彈幕可能會(huì)出現(xiàn)重疊情況無(wú)法合理定位每條彈幕的位置因此放棄該方案。

PS:widget只有在build到布局后才能獲取到它基礎(chǔ)信息（相對(duì)位置信息，寬高等）就無(wú)法計(jì)算出所有彈幕的位置信息。

ListView彈幕方案實(shí)現(xiàn)

最先想到使用瀑布流flutter_staggered_grid_view實(shí)現(xiàn)彈幕布局但由于組件暫時(shí)不支持橫向布局就放棄了。

基本框架

采用三個(gè)ListView實(shí)現(xiàn)每一行彈幕效果。雖然不太推薦以這種形式實(shí)現(xiàn)但從快速實(shí)現(xiàn)效果來(lái)說是比較簡(jiǎn)單便捷兜底方案。（可以實(shí)現(xiàn)但不推薦）

Container(
  height: 200,
  child: Column(
    children: [
      Expanded(
        child: ListView.builder(
          scrollDirection: Axis.horizontal,
          controller: scrollController1,
          itemBuilder: (context, index) {
            return Common.getWidget(index,
                height: 30, width: random.nextInt(100).toDouble());
          },
        ),
      ),
      Expanded(
          child: ListView.builder(
        scrollDirection: Axis.horizontal,
        controller: scrollController2,
        itemBuilder: (context, index) {
          return Common.getWidget(index,
              height: 30, width: random.nextInt(100).toDouble());
        },
      )),
      Expanded(
          child: ListView.builder(
        scrollDirection: Axis.horizontal,
        controller: scrollController3,
        itemBuilder: (context, index) {
          return Common.getWidget(index,
              height: 30, width: random.nextInt(100).toDouble());
        },
      ))
    ],
  ),
)

輪播滾動(dòng)

添加定時(shí)器periodic定時(shí)每秒鐘執(zhí)行一次scrollController的animateTo方法移動(dòng)偏移量并且偏移量不斷累加。

其次ListView支持無(wú)限滑動(dòng)只要ListView.builder不設(shè)置itemCount就能實(shí)現(xiàn)。

Timer _timer;

scroll = () {
  offset += 100;
  scrollController1.animateTo(offset,
      duration: Duration(seconds: 1), curve: Curves.linear);
  scrollController2.animateTo(offset,
      duration: Duration(seconds: 1), curve: Curves.linear);
  scrollController3.animateTo(offset,
      duration: Duration(seconds: 1), curve: Curves.linear);
};
_timer = Timer.periodic(Duration(seconds: 1), (timer) {
  scroll();
});

輪詢算法

ListView支持無(wú)限滑動(dòng)后itemBuilder回調(diào)下標(biāo)Index會(huì)超出數(shù)據(jù)源最大值。因此數(shù)據(jù)源也需要支持無(wú)限輪詢來(lái)配合列表滾動(dòng)。start表示彈幕開始取值，這里設(shè)置為（0,1,2）;index表示itemBuilder回調(diào)下標(biāo)Index。

int findIndex(int start, int index) {
  index = start + index * 3;
  if (expressList.length < index) {
    index = index % (expressList.length - 1); // 取余
  } else if (expressList.length == index) { // 是否是最后一個(gè)數(shù)據(jù)
    index = start;
    if (index >= expressList.length) { // 還需要判斷數(shù)據(jù)源是否比start還小
      index = (index % expressList.length - 1);
    }
  }
  return index;
}

點(diǎn)擊事件

一切都實(shí)現(xiàn)得很順利最終就是彈幕點(diǎn)擊實(shí)現(xiàn)。但實(shí)際上當(dāng)ListView的scrollController在執(zhí)行animateTo時(shí)其實(shí)點(diǎn)擊操作是失效的，ListView無(wú)法響應(yīng)點(diǎn)擊事件。只有當(dāng)animateTo操作結(jié)束之后再執(zhí)行點(diǎn)擊才能執(zhí)行點(diǎn)擊。因此若要實(shí)現(xiàn)這個(gè)功能只能先將Timer暫停再執(zhí)行一次點(diǎn)擊，再一次點(diǎn)擊不可能是用戶再去觸發(fā)，這里只能采用模擬點(diǎn)擊形式實(shí)現(xiàn)。

PS:ListView無(wú)法響應(yīng)點(diǎn)擊事件具體原因還待研究，個(gè)人猜測(cè)列表做動(dòng)畫時(shí)對(duì)外部觸摸事件進(jìn)行了屏蔽處理。

GestureDetector(
  onTapUp: (details){
   // 點(diǎn)擊抬起之后暫停定時(shí)器 
    _timer?.cancel();
    // 模擬一次點(diǎn)擊
    Timer(Duration(milliseconds: 100),() {
      GestureBinding.instance.handlePointerEvent(PointerAddedEvent(pointer: 0,position: details.globalPosition));
      GestureBinding.instance.handlePointerEvent(PointerDownEvent(pointer: 0,position: details.globalPosition));
      GestureBinding.instance.handlePointerEvent(PointerUpEvent(pointer: 0,position: details.globalPosition));
    });
  },
  child: ListView.builder(
    controller: scrollController,
    physics: NeverScrollableScrollPhysics(),
    itemBuilder: (context, index) {
      return GestureDetector(
        behavior: HitTestBehavior.opaque,
        child: Common.getWidget(index),
        onTap: () {
          // 內(nèi)部響應(yīng)點(diǎn)擊事件 然后重新設(shè)置定時(shí)器滾動(dòng)列表
          _timer = Timer.periodic(Duration(seconds: 1), (timer) {
            scroll();
          });
        },
      );
    },
  ),
);