這篇文章主要介紹Flutter如何封裝一個(gè)Banner輪播圖效果,文中介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們一定要看完!
成都創(chuàng)新互聯(lián)公司網(wǎng)站建設(shè)提供從項(xiàng)目策劃、軟件開發(fā),軟件安全維護(hù)、網(wǎng)站優(yōu)化(SEO)、網(wǎng)站分析、效果評(píng)估等整套的建站服務(wù),主營(yíng)業(yè)務(wù)為網(wǎng)站設(shè)計(jì)、網(wǎng)站制作,成都App定制開發(fā)以傳統(tǒng)方式定制建設(shè)網(wǎng)站,并提供域名空間備案等一條龍服務(wù),秉承以專業(yè)、用心的態(tài)度為用戶提供真誠(chéng)的服務(wù)。成都創(chuàng)新互聯(lián)公司深信只要達(dá)到每一位用戶的要求,就會(huì)得到認(rèn)可,從而選擇與我們長(zhǎng)期合作。這樣,我們也可以走得更遠(yuǎn)!
在 Flutter 中,如何開發(fā)一個(gè)輪播?
了解需求
首先,我們?cè)陂_發(fā)一個(gè)功能的時(shí)候要了解這個(gè)功能的需求,那一個(gè)輪播需要有什么功能?
1. 可以自定義高度和一些屬性 2. 展示圖片 3. 自動(dòng)翻頁播放 4. 點(diǎn)擊事件 5. 指示器 6. 人為拖動(dòng)的時(shí)候關(guān)閉自動(dòng)播放
其中「人為拖動(dòng)的時(shí)候關(guān)閉自動(dòng)播放」是比較難的,我們后續(xù)會(huì)說,那先一個(gè)一個(gè)功能來實(shí)現(xiàn)。
自定義高度和一些屬性
這里主要是做一些前期的工作,如果我們的 Banner 要開源讓別人來使用,那我們肯定是要給用戶一些可以自定義的屬性的,比如:
1. Banner 的高度 2. 圖片切換的效果 3. 點(diǎn)擊事件的回調(diào)
既然我們是封裝一個(gè) Widget,那我們新建一個(gè)文件 widget_banner.dart ,類名叫 CustomBanner , 構(gòu)造函數(shù)如下:
CustomBanner( this._images, { this.height = 200, this.onTap, this.curve = Curves.linear, }) : assert(_images != null);
? _images:首先,圖片的鏈接必須有,并且在后面也做了一個(gè)斷言驗(yàn)證
? height:其次,高度可以讓用戶自己定義,默認(rèn)為200
? onTap:用戶點(diǎn)擊的回調(diào),是一個(gè) ValueChanged<int>
,回調(diào)一個(gè) index
? curve:圖片在切換時(shí)候的效果,默認(rèn)為 Curves.linear
這樣初期的準(zhǔn)備工作已經(jīng)做完,下面就開始做展示圖片的功能。
展示圖片
一般的 Banner 都是由一些圖片組成,然后在固定的時(shí)間內(nèi)翻頁,
那能夠翻頁的 Widget,我們首先想到的是 PageView ,而 PageView 也正好能滿足我們的需求,
它有如下幾個(gè)屬性:
1. 多頁面翻頁
2. 有控制器控制翻頁
3. 翻頁的回調(diào)
4. 無限頁面
那我們首先就來定義一個(gè) PageView :
Widget _buildPageView() { var length = widget._images.length; return Container( height: widget.height, child: PageView.builder( controller: _pageController, onPageChanged: (index) { if (index == 0) { _curIndex = length; } }, itemBuilder: (context, index) { return Image.network( widget._images[index % length], fit: BoxFit.cover, ); }, ), ); }
這里定義了一個(gè)方法通過 PageView.builder 來生成 PageView ,用該方法的好處是可以生成無限個(gè) Page,這樣就不用擔(dān)心滑到右側(cè)邊界的問題。
那有人會(huì)問如果是左側(cè)的邊界該怎么辦?
看 onPageChange 方法,我們判斷了如果 index == 0 那就把 _curIndex 改為 length,為什么改為 length?
因?yàn)樵?itemBuilder 中,返回的是 widget._images[index % length] ,用 index 對(duì) length 取余,這樣就保證了我們的圖片不會(huì)數(shù)組越界,并且第 length 個(gè)圖片就是第一個(gè)圖片,這樣就保證左側(cè)的邊界也不會(huì)被觸碰到了。
在 PageView 的上方也是定義了一個(gè) Container 來限定高度,來看一下效果:
自動(dòng)翻頁播放
現(xiàn)在能展示圖片了,那就該來做自動(dòng)翻頁了。
一般在 Dart 中,使用 Timer.periodic()
來做循環(huán)定時(shí)任務(wù),該方法有兩個(gè)參數(shù):
1. duration:指隔多長(zhǎng)時(shí)間執(zhí)行一次 2. callback:時(shí)間到的時(shí)候執(zhí)行的任務(wù)
那有了該方法,我們就可以很輕松的寫出自動(dòng)播放:
_timer = Timer.periodic(Duration(seconds: 3), (t) { _curIndex++; _pageController.animateToPage( _curIndex, duration: Duration(milliseconds: 300), curve: Curves.linear, ); });
在上面我們給 PageView 定義了一個(gè) controller ,這里就可以用上了,
首先定義 Timer.periodic 方法,指出每三秒執(zhí)行一次,然后在回調(diào)任務(wù)中執(zhí)行:
1. _curIndex++:index +1 2. 使用 controller 的 animateToPage 方法,該方法是有動(dòng)畫效果的跳轉(zhuǎn)
animateToPage 有三個(gè)參數(shù):
1. 跳轉(zhuǎn)的頁面 2. 跳轉(zhuǎn)到該頁面動(dòng)畫持續(xù)時(shí)間(也就是多長(zhǎng)時(shí)間能翻到該頁) 3. 動(dòng)畫的效果
定義好后,我們來看一下效果:
點(diǎn)擊事件
現(xiàn)在自動(dòng)播放也 ok 了,那基本的就剩一個(gè)點(diǎn)擊事件了。
點(diǎn)擊事件非常簡(jiǎn)單,我們可以在 PageView 上面加一個(gè) GestureDetector 來識(shí)別手勢(shì),
但是我又不想在 PageView 上面加,為什么?
因?yàn)楹罄m(xù)要添加指示器,指示器應(yīng)該也要有自己的點(diǎn)擊事件,比如點(diǎn)擊第二個(gè)小圓點(diǎn)就跳轉(zhuǎn)到第二頁之類的,
所以,我們要在 Image 上面添加手勢(shì)識(shí)別:
return GestureDetector( onTap: () { Scaffold.of(context).showSnackBar( SnackBar( content: Text('當(dāng)前 page 為 ${index % length}'), duration: Duration(milliseconds: 500), ), ); }, child: Image.network( widget._images[index % length], fit: BoxFit.cover, ), );
非常簡(jiǎn)單,就是增加了一個(gè) GestureDetector ,來看一下效果:
講道理,現(xiàn)在一個(gè)最最基本的 Banner 就已經(jīng)完成了,能看圖片,有輪播,有點(diǎn)擊事件。
但是還并不完善,下面來做指示器。
指示器
一般的輪播,都會(huì)有一個(gè)指示器,例如下面的小圓點(diǎn),或者「1 / 3」類似于這種,那我們這里就只搞第一種小圓點(diǎn)。
作為指示器,應(yīng)該有如下幾點(diǎn):
1. 在圖片前面(廢話,在圖片后面也看不到) 2. 有幾張圖片就有幾個(gè)指示器 3. 顯示出當(dāng)前在第幾頁
在圖片前面顯示
這個(gè)需求比較簡(jiǎn)單,我們用一個(gè) Stack 來包裹住 PageView 和 Indicator 就ok了:
return Stack( alignment: Alignment.bottomCenter, children: <Widget>[ _buildViewPager(), _buildIndicator(), ], );
定義了一個(gè) _buildIndicator()
方法,該方法用來構(gòu)建一個(gè)指示器。
有幾張圖片就有幾個(gè)指示器
我們這里說的指示器就是小圓點(diǎn),也很簡(jiǎn)單,用 ClipOval 來創(chuàng)建一個(gè)圓形就ok了,
具體代碼如下:
Widget _buildIndicator() { var length = widget._images.length; return Positioned( bottom: 10, child: Row( children: widget._images.map((s) { return Padding( padding: const EdgeInsets.symmetric(horizontal: 3.0), child: ClipOval( child: Container( width: 8, height: 8, color: Colors.grey, ), ), ); }).toList(), ), ); }
邏輯為:
1. 首先獲取到圖片數(shù)據(jù)的長(zhǎng)度 2. Stack 定義了 Aligment 為 bottomCenter 3. 然后定義了一個(gè) Positioned 來控制距離底部的距離 4. child 為 Row ,橫向排列小圓點(diǎn) 5. 給每個(gè)小圓點(diǎn)設(shè)置邊距為3 6. 小圓點(diǎn)的大小為8
看一下效果:
可以發(fā)現(xiàn)小圓點(diǎn)確實(shí)是出來了,但是并沒有指示到當(dāng)前是哪一個(gè)。
顯示出當(dāng)前在第幾頁
那接下來就要顯示出當(dāng)前是在第幾頁,其實(shí)這個(gè)也很簡(jiǎn)單(如果不做特殊效果的話),
我們剛才指示器的小圓點(diǎn)是灰色的,那當(dāng)前頁的小圓點(diǎn)我們給弄成白色的:
Widget _buildIndicator() { var length = widget._images.length; return Positioned( bottom: 10, child: Row( children: widget._images.map((s) { return Padding( padding: const EdgeInsets.symmetric(horizontal: 3.0), child: ClipOval( child: Container( width: 8, height: 8, color: s == widget._images[_curIndex % length] ? Colors.white : Colors.grey, ), ), ); }).toList(), ), ); }
這里的重點(diǎn)是 Container 的 color 屬性,判斷一下當(dāng)前的值是否是和當(dāng)前 index 的值相等,
如果相等則變?yōu)榘咨?,如果不相等則是灰色。
如果光寫成這樣,小圓點(diǎn)是不會(huì)變的,所以我們要在 PageView 的 onPageChanged 回調(diào)中去 setState() ,
順便更新 _curIndex 的值。
重新構(gòu)建一下刷新頁面,這個(gè)時(shí)候看一下效果:
這個(gè)時(shí)候這個(gè) Banner 可以說是很完善了,但是如果我們手動(dòng)的去干預(yù)滑動(dòng)會(huì)出現(xiàn)什么問題呢?
因?yàn)槲覀儎偛艑懙氖?3 秒一切換,所以我們?cè)?,手?dòng)切換的時(shí)候,它在到達(dá)第三秒后,就會(huì)出現(xiàn)連續(xù)換頁的情況。
人為拖動(dòng)的時(shí)候關(guān)閉自動(dòng)播放
所以,根據(jù)上述情況,我們就要在監(jiān)聽到有人為拖動(dòng)的時(shí)候去關(guān)閉自動(dòng)播放,然后在沒有人為的情況下打開。
剛才已經(jīng)在 Image 上面加了一個(gè) GesutreDetector ,正好,我們添加 onPanDown 參數(shù)來暫停定時(shí)任務(wù)。
然后在手指離開的時(shí)候恢復(fù)任務(wù)。
但是!這里有很大的坑!
1. Timer 沒有暫停方法 2. 因?yàn)橛玫氖?nbsp; PageView ,有滑動(dòng)沖突, 所以監(jiān)聽不到手指離開的方法
這里只能采用曲線救國(guó)的方法:
1.
雖然 Timer 沒有暫停,但是他有取消 cancel() 方法。
2.
雖然監(jiān)聽不到手指離開的方法,但是我們可以監(jiān)聽到手指觸碰的方法
所以我們應(yīng)該這么寫:
/// 點(diǎn)擊到圖片的時(shí)候取消定時(shí)任務(wù) _cancelTimer() { if (_timer != null) { _timer.cancel(); _timer = null; _initTimer(); } } /// ------------------------ return GestureDetector( onPanDown: (details) { _cancelTimer(); }, onTap: () { Scaffold.of(context).showSnackBar( SnackBar( content: Text('當(dāng)前 page 為 ${index % length}'), duration: Duration(milliseconds: 500), ), ); }, child: Image.network( widget._images[index % length], fit: BoxFit.cover, ), );
先定義一個(gè)方法, _cancelTimer()
,里面首先判斷如果 _timer 不是 null 的時(shí)候則把 _timer 取消掉,然后置空。
隨后再對(duì) _timer 進(jìn)行初始化。
為什么要這么做?取消的同時(shí)進(jìn)行初始化?
因?yàn)槲覀儾⒉恢朗裁磿r(shí)候手指離開屏幕,所以我們?cè)谑种更c(diǎn)擊后就 重新開始計(jì)時(shí) ,
這樣既能保證點(diǎn)擊的時(shí)候沒有定時(shí)任務(wù),又能保證在后續(xù)的一段時(shí)間后會(huì)重新開始定時(shí)任務(wù)。
因?yàn)槎〞r(shí)任務(wù)的時(shí)間是3秒,而我們滑動(dòng)查看圖片也就一兩秒的時(shí)間,這段時(shí)間之內(nèi)如果再次手動(dòng)滑動(dòng),那么也會(huì)取消掉之前的任務(wù),重新開始新的任務(wù),這樣就達(dá)到了我們的效果。
來看一下:
以上是“Flutter如何封裝一個(gè)Banner輪播圖效果”這篇文章的所有內(nèi)容,感謝各位的閱讀!希望分享的內(nèi)容對(duì)大家有幫助,更多相關(guān)知識(shí),歡迎關(guān)注創(chuàng)新互聯(lián)行業(yè)資訊頻道!
網(wǎng)站名稱:Flutter如何封裝一個(gè)Banner輪播圖效果
網(wǎng)頁網(wǎng)址:http://muchs.cn/article12/pihpgc.html
成都網(wǎng)站建設(shè)公司_創(chuàng)新互聯(lián),為您提供ChatGPT、App開發(fā)、企業(yè)網(wǎng)站制作、微信小程序、網(wǎng)站營(yíng)銷、企業(yè)建站
聲明:本網(wǎng)站發(fā)布的內(nèi)容(圖片、視頻和文字)以用戶投稿、用戶轉(zhuǎn)載內(nèi)容為主,如果涉及侵權(quán)請(qǐng)盡快告知,我們將會(huì)在第一時(shí)間刪除。文章觀點(diǎn)不代表本網(wǎng)站立場(chǎng),如需處理請(qǐng)聯(lián)系客服。電話:028-86922220;郵箱:631063699@qq.com。內(nèi)容未經(jīng)允許不得轉(zhuǎn)載,或轉(zhuǎn)載時(shí)需注明來源: 創(chuàng)新互聯(lián)