Flutter教學目錄持續(xù)更新中

github源代碼持續(xù)更新中

1.TabBar簡介

水平選項卡，配合TabBarView可以實現(xiàn)選項卡跟頁面的切換

2.TabBar屬性

• tabs：顯示的標簽內(nèi)容，一般使用Tab對象,也可以自定義
• controller：TabController對象
• isScrollable：是否可滾動（默認false），當false時不可滑動會讓每個tab平均分配寬度空間；如果true可滑動，每個tab會自適應寬度，不超過父節(jié)點寬度會居中顯示
• indicatorColor：指示器顏色
• indicatorWeight：指示器高度
• indicatorPadding：底部指示器的Padding
• indicator：指示器decoration，例如邊框等
• indicatorSize：指示器大小計算方式，TabBarIndicatorSize.label跟文字等寬,TabBarIndicatorSize.tab跟每個tab等寬
• labelColor：選中l(wèi)abel顏色
• labelStyle：選中l(wèi)abel的Style
• labelPadding：每個label的padding值
• unselectedLabelColor：未選中l(wèi)abel顏色
• unselectedLabelStyle：未選中l(wèi)abel的Style

3.Tab屬性

• text：文本
• icon：圖標
• iconMargin：圖標的Margin
• child：子節(jié)點

4.TabController屬性

• length：Tab的數(shù)量
• vsync：TickerProvider，需要混入（with）SingleTickerProviderStateMixin
  例如：

class _TabBarPageState extends State<TabBarPage>
    with SingleTickerProviderStateMixin 

（這邊可能有dart語法不了解的同學不了解混入（with）是什么意思可以看一下這個文章Flutter（Dart）中extends 、 implements 、 with的用法與區(qū)別）

4.常規(guī)使用

一般情況可以直接使用Tab去創(chuàng)建TabBar的子節(jié)點，其中最主要的是需要設置TabController，在頁面銷毀的時候記得銷毀TabController

1600779758(1).png

final _tabList = [
    Tab(
      text: '首頁',
      icon: Icon(Icons.home),
      iconMargin: EdgeInsets.all(5),
    ),
    Tab(
      text: '郵件',
      icon: Icon(Icons.mail),
      iconMargin: EdgeInsets.all(5),
    ),
    Tab(
      text: '消息',
      icon: Icon(Icons.message),
      iconMargin: EdgeInsets.all(5),
    ),
    Tab(
      text: '我的',
      icon: Icon(Icons.people),
      iconMargin: EdgeInsets.all(5),
    ),
  ];
 appBar: AppBar(
        title: Text('TabBarPage'),
        bottom: TabBar(
          tabs: widget._tabList,
          controller: _tabController,
          isScrollable: false,
          indicatorWeight: 2,
          indicatorColor: Colors.amberAccent,
          indicatorPadding: EdgeInsets.only(bottom: 2),
          indicatorSize: TabBarIndicatorSize.tab,
          labelColor: Colors.amberAccent,
          labelPadding: EdgeInsets.only(bottom: 2),
          labelStyle: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
          unselectedLabelColor: Colors.black,
          unselectedLabelStyle:
              TextStyle(fontSize: 16, fontWeight: FontWeight.normal),
        ),
      ),
 @override
  void initState() {
    _tabController = TabController(length: widget._tabList.length, vsync: this);
    super.initState();
  }
@override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

5.自定義的widget做Tab

tabBar是支持放入自定義的widget做子節(jié)點的，這樣給個性化定制提供了更多可能性

1600779869(1).png

 final _tabDateList = [
    TabBean(title: '首頁', icon: Icons.home),
    TabBean(title: '郵件', icon: Icons.mail),
    TabBean(title: '消息', icon: Icons.message),
    TabBean(title: '我的', icon: Icons.people),
  ];
 _customTabs() {
    return widget._tabDateList
        .map(
          (e) => Container(
            child: Column(
              mainAxisAlignment: MainAxisAlignment.center,
              crossAxisAlignment: CrossAxisAlignment.center,
              children: [Icon(e.icon), Text(e.title)],
            ),
          ),
        )
        .toList();
  }
appBar: AppBar(
        title: Text('TabBarPage'),
        bottom: TabBar(
          tabs: _customTabs(),
          controller: _tabController,
          isScrollable: false,
          indicatorWeight: 2,
          indicatorColor: Colors.amberAccent,
          indicatorPadding: EdgeInsets.only(bottom: 2),
          indicatorSize: TabBarIndicatorSize.tab,
          labelColor: Colors.amberAccent,
          labelPadding: EdgeInsets.only(bottom: 2),
          labelStyle: TextStyle(fontSize: 16, fontWeight: FontWeight.bold),
          unselectedLabelColor: Colors.black,
          unselectedLabelStyle:
              TextStyle(fontSize: 16, fontWeight: FontWeight.normal),
        ),
      ),

下一節(jié)Material組件之TabBarView

Flutter（14）：Material組件之TabBarView

Flutter教學目錄持續(xù)更新中

github源代碼持續(xù)更新中