TabBar

在页面上渲染 TabBar 组件,通常配合 Scaffold 组件的 bottomNavigationBar 属性一起使用,用来渲染底部的 TabBar 效果。

注意:

  1. TabBar 最好和有状态页面配合使用

  2. TabBar 必须指定 TabController 控制器,用来控制 TabBar 的切换

  3. 如若不指定 TabController 控制器,也可以使用 DefaultTabController 组件,把 TabBar 组件包裹起来,同时提供需要切换的页面个数即可,代码示例如下:

    DefaultTabController(
      // 指定需要切换的页面个数
      length: tablist.length,
      child: Scaffold(
        appBar: AppBar(),
        // 被 tabbar 控制切换的页面
        body: TabBarView(),
        // 指定 tab 项
        bottomNavigationBar: TabBar(
          tabs: tablist
        )
      ),
    )
    
  4. TabController 必须用在拥有 TickerProviderStateMixinSingleTickerProviderStateMixin 特征的类中,因此,必须让 TabController 所在的类实现此特征,代码示例如下:

    class _HomePageState extends State<HomePage> with SingleTickerProviderStateMixin { }
    

实现步骤:

  1. 创建对应的 Tab 项:

    List<Widget> tablist = <Widget>[
      Tab(
        text: '正在热映',
        icon: Icon(Icons.movie),
      ),
      Tab(
        text: '即将上映',
        icon: Icon(Icons.movie_filter),
      ),
      Tab(
        text: 'Top250',
        icon: Icon(Icons.local_movies),
      ),
    ];
    
  2. 创建 TabController 对象:

    TabController tabCtrl;
    
  3. 在 initState 生命周期函数中,初始化 tabCtrl 对象:

    @override
    void initState() {
      super.initState();
      tabCtrl = TabController(vsync: this, length: tablist.length);
    }
    
  4. 为 Scaffold 添加 bottomNavigationBar 选项如下:

    bottomNavigationBar: Container(
      // 设置 tabbar 的背景色
      decoration: BoxDecoration(color: Colors.black),
      // 设置 tabbar 的高度
      height: 50,
      // 指定 tabbar 组件
      child: TabBar(
        // 指定 tabbar 的控制器,必须提供控制器,否则 tabbar 不能正常工作
        controller: tabCtrl,
        // 设置 tabbar 中文本的样式,注意,height 属性很重要,必须设置为 0,否则文本和图标之间的距离太大,不美观
        labelStyle: TextStyle(height: 0, fontSize: 10),
        // 设置指示器的颜色
        indicatorColor: Colors.red,
        // 指定当前 tabbar 总共有几个按钮
        tabs: tablist,
      ),
    )
    

results matching ""

    No results matching ""