Flutter（13）：Material组件之TabBar

Flutter教学目录持续更新中

github源代码持续更新中

1.TabBar简介

水平选项卡，配合TabBarView可以实现选项卡跟页面的切换

2.TabBar属性

• tabs：显示的标签内容，一般使用Tab对象,也可以自定义
• controller：TabController对象
• isScrollable：是否可滚动（默认false），当false时不可滑动会让每个tab平均分配宽度空间；如果true可滑动，每个tab会自适应宽度，不超过父节点宽度会居中显示
• indicatorColor：指示器颜色
• indicatorWeight：指示器高度
• indicatorPadding：底部指示器的Padding
• indicator：指示器decoration，例如边框等
• indicatorSize：指示器大小计算方式，TabBarIndicatorSize.label跟文字等宽,TabBarIndicatorSize.tab跟每个tab等宽
• labelColor：选中label颜色
• labelStyle：选中label的Style
• labelPadding：每个label的padding值
• unselectedLabelColor：未选中label颜色
• unselectedLabelStyle：未选中label的Style

3.Tab属性

• text：文本
• icon：图标
• iconMargin：图标的Margin
• child：子节点

4.TabController属性

• length：Tab的数量
• vsync：TickerProvider，需要混入（with）SingleTickerProviderStateMixin
  例如：

class _TabBarPageState extends State
    with SingleTickerProviderStateMixin 

（这边可能有dart语法不了解的同学不了解混入（with）是什么意思可以看一下这个文章Flutter（Dart）中extends 、 implements 、 with的用法与区别）

4.常规使用

一般情况可以直接使用Tab去创建TabBar的子节点，其中最主要的是需要设置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做子节点的，这样给个性化定制提供了更多可能性

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),
        ),
      ),

下一节Material组件之TabBarView

Flutter（14）：Material组件之TabBarView

Flutter教学目录持续更新中

github源代码持续更新中