欧美bbbwbbbw肥妇,免费乱码人妻系列日韩,一级黄片

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

 更新時間:2022年06月18日 09:33:07   作者:JulyYu  
這篇文章主要為大家詳細介紹如何利用Android FLutter實現(xiàn)彈幕效果,文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下

前言

需求要點如下:

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

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

1 4 7

2 5 8

3 6 9

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

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

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

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

彈幕效果代碼

但因為每條彈幕可能會出現(xiàn)重疊情況無法合理定位每條彈幕的位置因此放棄該方案。

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

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

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

基本框架

采用三個ListView實現(xiàn)每一行彈幕效果。雖然不太推薦以這種形式實現(xiàn)但從快速實現(xiàn)效果來說是比較簡單便捷兜底方案。(可以實現(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());
        },
      ))
    ],
  ),
)

輪播滾動

添加定時器periodic定時每秒鐘執(zhí)行一次scrollControlleranimateTo方法移動偏移量并且偏移量不斷累加。

其次ListView支持無限滑動只要ListView.builder不設(shè)置itemCount就能實現(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支持無限滑動后itemBuilder回調(diào)下標Index會超出數(shù)據(jù)源最大值。因此數(shù)據(jù)源也需要支持無限輪詢來配合列表滾動。start表示彈幕開始取值,這里設(shè)置為(0,1,2);index表示itemBuilder回調(dià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) { // 是否是最后一個數(shù)據(jù)
    index = start;
    if (index >= expressList.length) { // 還需要判斷數(shù)據(jù)源是否比start還小
      index = (index % expressList.length - 1);
    }
  }
  return index;
}

點擊事件

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

PS:ListView無法響應點擊事件具體原因還待研究,個人猜測列表做動畫時對外部觸摸事件進行了屏蔽處理。

GestureDetector(
  onTapUp: (details){
   // 點擊抬起之后暫停定時器 
    _timer?.cancel();
    // 模擬一次點擊
    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)部響應點擊事件 然后重新設(shè)置定時器滾動列表
          _timer = Timer.periodic(Duration(seconds: 1), (timer) {
            scroll();
          });
        },
      );
    },
  ),
);

到此這篇關(guān)于Android Flutter實現(xiàn)彈幕效果的文章就介紹到這了,更多相關(guān)Flutter彈幕效果內(nèi)容請搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!

相關(guān)文章

  • Android進階之從IO到NIO的模型機制演進

    Android進階之從IO到NIO的模型機制演進

    這篇文章主要為大家介紹了Android進階之從IO到NIO的模型機制演進詳解,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進步,早日升職加薪
    2023-01-01
  • 基于AnDroid FrameLayout的使用詳解

    基于AnDroid FrameLayout的使用詳解

    本篇文章是對AnDroid FrameLayout的使用進行了詳細的分析介紹,需要的朋友參考下
    2013-05-05
  • Android?側(cè)滑按鈕的實現(xiàn)代碼

    Android?側(cè)滑按鈕的實現(xiàn)代碼

    這篇文章主要介紹了Android?側(cè)滑按鈕的實現(xiàn),本文結(jié)合示例代碼圖文并茂的形式給大家介紹的非常詳細,對大家的學習或工作具有一定的參考借鑒價值,需要的朋友可以參考下
    2022-04-04
  • Android仿eleme點餐頁面二級聯(lián)動列表

    Android仿eleme點餐頁面二級聯(lián)動列表

    本站一直在點外賣,于是心血來潮就像仿餓了么做個站,接下來通過本文給大家介紹android 二級聯(lián)動列表,仿eleme點餐頁面的相關(guān)資料,需要的朋友可以參考下
    2016-10-10
  • Android項目中使用HTTPS配置的步驟詳解

    Android項目中使用HTTPS配置的步驟詳解

    這篇文章主要給大家介紹了關(guān)于Android項目中使用HTTPS配置步驟的相關(guān)資料,文中介紹的非常詳細,對大家具有一定的參考學習價值,需要的朋友們下面來一起看看吧。
    2017-06-06
  • Flutter?DateTime日期轉(zhuǎn)換的詳細使用

    Flutter?DateTime日期轉(zhuǎn)換的詳細使用

    本文主要介紹了Flutter?DateTime日期轉(zhuǎn)換的詳細使用,文中通過示例代碼介紹的非常詳細,對大家的學習或者工作具有一定的參考學習價值,需要的朋友們下面隨著小編來一起學習學習吧
    2022-05-05
  • Android微信自動搶紅包插件優(yōu)化和實現(xiàn)

    Android微信自動搶紅包插件優(yōu)化和實現(xiàn)

    這篇文章主要為大家詳細介紹了Android微信自動搶紅包插件優(yōu)化和實現(xiàn),文中示例代碼介紹的非常詳細,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2016-12-12
  • Android PickerView實現(xiàn)三級聯(lián)動效果

    Android PickerView實現(xiàn)三級聯(lián)動效果

    這篇文章主要為大家詳細介紹了Android PickerView實現(xiàn)三級聯(lián)動效果,PickerView實現(xiàn)全國地址的選擇,具有一定的參考價值,感興趣的小伙伴們可以參考一下
    2019-01-01
  • Android數(shù)據(jù)存儲幾種方式講解

    Android數(shù)據(jù)存儲幾種方式講解

    在開發(fā)過程中,數(shù)據(jù)存取是較為頻繁的,今天我們來了解下android幾種常見的數(shù)據(jù)存取方式。在Android中,sharePreferences是一種輕量級的數(shù)據(jù)存儲方式,采用鍵值對的存儲方式,存儲少量數(shù)據(jù),支持基本類型的簡單數(shù)據(jù)存儲
    2022-12-12
  • android9.0 默認apk權(quán)限添加方法

    android9.0 默認apk權(quán)限添加方法

    本文給大家分享android9.0 默認apk權(quán)限添加方法,默認賦予全部權(quán)限,根據(jù)包名賦予權(quán)限,通過default-permissions-google.xml的方式實現(xiàn),文中通過實例代碼給大家介紹的非常詳細,需要的朋友參考下吧
    2021-06-06

最新評論