您好,登錄后才能下訂單哦!
本篇內(nèi)容介紹了“怎么使用Android Flutter實現(xiàn)彈幕效果”的有關(guān)知識,在實際案例的操作過程中,不少人都會遇到這樣的困境,接下來就讓小編帶領(lǐng)大家學(xué)習(xí)一下如何處理這些情況吧!希望大家仔細閱讀,能夠?qū)W有所成!
需求要點如下:
彈幕行數(shù)為3行,每條彈幕相互依靠但不存在重疊
每條彈幕可交互點擊跳轉(zhuǎn)
滾動速度恒定 觸摸不可暫停播放
彈幕數(shù)據(jù)固定一百條且支持輪詢播放
彈幕排序規(guī)則如下:
1 4 7
2 5 8
3 6 9
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ǔ)信息(相對位置信息,寬高等)就無法計算出所有彈幕的位置信息。
最先想到使用瀑布流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í)行一次scrollController
的animateTo
方法移動偏移量并且偏移量不斷累加。
其次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)下標(biāo)Index
會超出數(shù)據(jù)源最大值。因此數(shù)據(jù)源也需要支持無限輪詢來配合列表滾動。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) { // 是否是最后一個數(shù)據(jù) index = start; if (index >= expressList.length) { // 還需要判斷數(shù)據(jù)源是否比start還小 index = (index % expressList.length - 1); } } return index; }
一切都實現(xiàn)得很順利最終就是彈幕點擊實現(xiàn)。但實際上當(dāng)ListView
的scrollController
在執(zhí)行animateTo
時其實點擊操作是失效的,ListView
無法響應(yīng)點擊事件。只有當(dāng)animateTo
操作結(jié)束之后再執(zhí)行點擊才能執(zhí)行點擊。因此若要實現(xiàn)這個功能只能先將Timer
暫停再執(zhí)行一次點擊,再一次點擊不可能是用戶再去觸發(fā),這里只能采用模擬點擊形式實現(xiàn)。
PS:ListView
無法響應(yīng)點擊事件具體原因還待研究,個人猜測列表做動畫時對外部觸摸事件進行了屏蔽處理。
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)部響應(yīng)點擊事件 然后重新設(shè)置定時器滾動列表 _timer = Timer.periodic(Duration(seconds: 1), (timer) { scroll(); }); }, ); }, ), );
“怎么使用Android Flutter實現(xiàn)彈幕效果”的內(nèi)容就介紹到這里了,感謝大家的閱讀。如果想了解更多行業(yè)相關(guān)的知識可以關(guān)注億速云網(wǎng)站,小編將為大家輸出更多高質(zhì)量的實用文章!
免責(zé)聲明:本站發(fā)布的內(nèi)容(圖片、視頻和文字)以原創(chuàng)、轉(zhuǎn)載和分享為主,文章觀點不代表本網(wǎng)站立場,如果涉及侵權(quán)請聯(lián)系站長郵箱:is@yisu.com進行舉報,并提供相關(guān)證據(jù),一經(jīng)查實,將立刻刪除涉嫌侵權(quán)內(nèi)容。