100 行代碼實(shí)現(xiàn)Flutter自定義TabBar的示例代碼
Flutter 的確很強(qiáng)大,但美中不足的是生態(tài)還有待完善,沒(méi)有出現(xiàn)像前端的 Antd 或 Element 那樣全能的基礎(chǔ) UI 庫(kù)。
由此帶來(lái)的直接影響是開發(fā)效率提不上去,需要耗費(fèi)大量的時(shí)間精力在基礎(chǔ)組件的封裝上。
官方的 TabBar 不滿足需求,又沒(méi)有合適的輪子,只好自己造輪子啦。接下來(lái)帶你一步步實(shí)現(xiàn)自定義 TabBar……
一、目標(biāo)和效果
需求目標(biāo)是:
- 這個(gè)頁(yè)面不要 material 左側(cè)統(tǒng)一的返回鍵和 Title
- 在右側(cè)有取消按鈕,點(diǎn)取消即返回
- 點(diǎn)擊 Tab 可以實(shí)現(xiàn) content 切換并帶有動(dòng)畫效果
- 滑動(dòng)內(nèi)容區(qū)域也可以切換 Tab
效果如下圖:
二、實(shí)現(xiàn)思路
將整個(gè)頁(yè)面分為兩部分,上面的 Tab 按鈕和下面的內(nèi)容區(qū)域。
為了保持通用性,上面的 Tab 和下面的內(nèi)容區(qū)域都需要讓調(diào)用者傳入,它們都是 Widget 數(shù)組
class STab extends StatefulWidget { // tab 集合 final List<Widget> tabs; // 頁(yè)面集合 final List<Widget> pages; STab({this.tabs, this.pages}); @override _STabState createState() => _STabState(); }
頁(yè)面整體的布局是一個(gè) Column ,上面是 Tab 區(qū)域,下面的 Content 區(qū)域用 Expand 包裹,達(dá)到撐滿整個(gè)屏幕的效果。
上面的 Tab 布局,最外層是 Stack 布局,因?yàn)樾枰∠粹o一直在最右邊且不能影響 tab 按鈕的排版。多個(gè) tab 按鈕用橫向布局 Row 來(lái)排列,并設(shè)置居中對(duì)齊。
@override Widget build(BuildContext context) { return Container( child: Column( children: [ TabLayout(widget.tabs, selectedIndex, onTabChange, onCancelClick), ContentLayout(widget.pages, swipeControl, onPageChange) ], )); }
下面的內(nèi)容區(qū)域,要實(shí)現(xiàn)左右滑動(dòng)切換的效果,用了一個(gè)第三方庫(kù) flutter_swiper 。當(dāng)點(diǎn)擊 Tab 的時(shí)候,設(shè)置 swiper 的下標(biāo)切換顯示的內(nèi)容;當(dāng)左右滑動(dòng) swiper,設(shè)置 tab 的選中狀態(tài),達(dá)到 tab 選中狀態(tài)跟 swiper 滑動(dòng)的聯(lián)動(dòng)。
三、組件封裝
/// tab 切換組件 import 'package:flutter/material.dart'; import 'package:flutter_swiper/flutter_swiper.dart'; class STab extends StatefulWidget { // tab 集合 final List<Widget> tabs; // 頁(yè)面集合 final List<Widget> pages; STab({this.tabs, this.pages}); @override _STabState createState() => _STabState(); } class _STabState extends State<STab> { int selectedIndex = 0; SwiperController swipeControl = new SwiperController(); // tab 索引變化回調(diào) void onTabChange(index) { setState(() { selectedIndex = index; }); swipeControl.move(index); } void onCancelClick() { print('cancel'); } void onPageChange(index) { setState(() { selectedIndex = index; }); } @override Widget build(BuildContext context) { return Container( child: Column( children: [ TabLayout(widget.tabs, selectedIndex, onTabChange, onCancelClick), ContentLayout(widget.pages, swipeControl, onPageChange) ], )); } } /// 上面 Tab 的布局 Widget TabLayout(tabs, selectedIndex, onTabChange, onRightButtonClick) { List<Widget> getItem() { List<Widget> children = []; for (var i = 0; i < tabs.length; i++) { children.add( GestureDetector( onTap: () { onTabChange(i); }, child: Container( padding: EdgeInsets.only(left: 20, right: 20, bottom: 10), decoration: BoxDecoration( border: Border( bottom: BorderSide( color: selectedIndex == i ? Color(0xff595959) : Colors.transparent, width: 3))), child: tabs[i], )), ); } return children; } return Stack( children: [ Row( mainAxisAlignment: MainAxisAlignment.center, children: getItem(), ), Positioned( top: 0, right: 0, child: GestureDetector( child: Container( height: 40, padding: EdgeInsets.only(left: 10, right: 10, bottom: 10), child: Text( '取消', textAlign: TextAlign.center, style: TextStyle(fontSize: 16), ), ), onTap: () { onRightButtonClick(); }, )) ], ); } /// 下面頁(yè)面內(nèi)容布局 Widget ContentLayout(pages, swipeControl, onIndexChanged) { return Expanded( child: Container( decoration: BoxDecoration(color: Colors.white), child: Swiper( itemCount: pages.length, itemBuilder: (BuildContext context, int index) { return pages[index]; }, loop: false, onIndexChanged: (index) { onIndexChanged(index); }, controller: swipeControl, )), ); }
四、如何使用
傳入 tabs 和 頁(yè)面 pages 即可
class Demo extends StatelessWidget { final List<Widget> tabBodies = [ ExpensePage(), IncomePage(), ]; @override Widget build(BuildContext context) { return Scaffold( body: Container( padding: EdgeInsets.only(top: 30), decoration: BoxDecoration( color: Color(0xffF9DC62) ), child: STab( tabs: [ Text('支出', style: TextStyle(fontSize: 18, color: Colors.black),), Text('收入', style: TextStyle(fontSize: 18, color: Colors.black)), ], pages: tabBodies, ), ), ); } }
五、結(jié)語(yǔ)
組件的封裝只是根據(jù)業(yè)務(wù)簡(jiǎn)單的封裝了一下,沒(méi)有考慮到更多的情況,比如右側(cè)的取消按鈕也應(yīng)該由外部傳入,顏色也應(yīng)該由外部傳入,還有沒(méi)校驗(yàn)傳入的數(shù)據(jù)是否合法……大家可以根據(jù)自己的實(shí)際業(yè)務(wù)需求調(diào)整源碼。
至于封裝到什么程度才算好,適合、夠用就好。
如果只是給自己的業(yè)務(wù)用,那封裝到這樣就夠了,只需考慮業(yè)務(wù)內(nèi)的場(chǎng)景。如果要開源出去給別人共用,那最好給予更高的定制化能力。
到此這篇關(guān)于100 行代碼實(shí)現(xiàn)Flutter自定義TabBar的示例代碼的文章就介紹到這了,更多相關(guān)Flutter自定義TabBar內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家!
相關(guān)文章
android使用url connection示例(get和post數(shù)據(jù)獲取返回?cái)?shù)據(jù))
這篇文章主要介紹了android使用URLConnection來(lái)get和post數(shù)據(jù)獲取返回的數(shù)據(jù),大家參考使用吧2014-01-01基于Flutter制作一個(gè)吃豆人加載動(dòng)畫
這篇文章主要為大家介紹了如何利用Flutter制作出吃豆人加載動(dòng)畫效果,文中的示例代碼講解詳細(xì),快跟隨小編一起動(dòng)手嘗試一下2022-04-04Flutter 狀態(tài)管理scoped model源碼解讀
這篇文章主要為大家介紹了Flutter 狀態(tài)管理scoped model源碼解讀,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2022-11-11Android中Intent組件的入門學(xué)習(xí)心得
Intent組件雖然不是四大組件,但卻是連接四大組件的橋梁,學(xué)習(xí)好這個(gè)知識(shí),也非常的重要,下面這篇文章主要給大家介紹了關(guān)于Android中Intent組件的相關(guān)資料,需要的朋友可以參考下2021-12-12android利用handler實(shí)現(xiàn)打地鼠游戲
這篇文章主要為大家詳細(xì)介紹了android利用handler實(shí)現(xiàn)打地鼠游戲,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2020-11-11解決android viewmodel 數(shù)據(jù)刷新異常的問(wèn)題
這篇文章主要介紹了解決android viewmodel 數(shù)據(jù)刷新異常的問(wèn)題,具有很好的參考價(jià)值,希望對(duì)大家有所幫助。一起跟隨小編過(guò)來(lái)看看吧2020-03-03Android開發(fā)RecyclerView實(shí)現(xiàn)折線圖效果
這篇文章主要為大家詳細(xì)介紹了Android開發(fā)RecyclerView實(shí)現(xiàn)折線圖效果,文中示例代碼介紹的非常詳細(xì),具有一定的參考價(jià)值,感興趣的小伙伴們可以參考一下2022-09-09Android轉(zhuǎn)場(chǎng)效果實(shí)現(xiàn)示例淺析
這篇文章主要為大家介紹了Android轉(zhuǎn)場(chǎng)效果實(shí)現(xiàn)示例淺析,有需要的朋友可以借鑒參考下,希望能夠有所幫助,祝大家多多進(jìn)步,早日升職加薪2023-02-02舉例講解Android應(yīng)用開發(fā)中OTTO框架的基本使用
這篇文章主要介紹了Android應(yīng)用開發(fā)中OTTO框架的基本使用講解,文中舉了創(chuàng)建一個(gè)單例模式的應(yīng)用例子,需要的朋友可以參考下2016-02-02