快捷導(dǎo)航

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

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

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

Flutter 的確很強(qiáng)大，但美中不足的是生態(tài)還有待完善，沒(méi)有出現(xiàn)像前端的 Antd 或 Element 那樣全能的基礎(chǔ) UI 庫(kù)。
由此帶來(lái)的直接影響是開(kā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)畫(huà)效果
滑動(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)景。如果要開(kāi)源出去給別人共用，那最好給予更高的定制化能力。

到此這篇關(guān)于100 行代碼實(shí)現(xiàn)Flutter自定義TabBar的示例代碼的文章就介紹到這了,更多相關(guān)Flutter自定義TabBar內(nèi)容請(qǐng)搜索腳本之家以前的文章或繼續(xù)瀏覽下面的相關(guān)文章希望大家以后多多支持腳本之家！

您可能感興趣的文章: