100 行代碼實現(xiàn)Flutter自定義TabBar的示例代碼

更新時間：2020年09月27日 09:43:24 作者：solocoder

這篇文章主要介紹了100 行代碼實現(xiàn)Flutter自定義TabBar的示例代碼，文中通過示例代碼介紹的非常詳細(xì)，對大家的學(xué)習(xí)或者工作具有一定的參考學(xué)習(xí)價值，需要的朋友們下面隨著小編來一起學(xué)習(xí)學(xué)習(xí)吧

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)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: