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