Flutter之切换导航TabBar组件

TabController

这是Tab页的控制器，用于定义Tab标签和内容页的坐标，还可配置标签页的切换动画效果等。

TabController的创建有两种形式，一种是使用系统的DefaultTabController，第二种是自己定义一个TabController实现SingleTickerProviderStateMixin。

TabController一般放入有状态控件中使用，以适应标签页数量和内容有动态变化的场景，如果标签页在APP中是静态固定的格局，则可以在无状态控件中加入简易版的DefaultTabController以提高运行效率，毕竟无状态控件要比有状态控件更省资源，运行效率更快。

TabBar
Tab页的Title控件，切换Tab页的入口，一般放到AppBar控件下使用，内部有*Title属性。其子元素按水平横向排列布局，如果需要纵向排列，请使用Column或ListView控件包装一下。子元素为Tab类型的数组。

TabBarView
Tab页的内容容器，其内放置Tab页的主体内容。子元素可以是多个各种类型的控件。

Tab使用方法

1、无状态控件搭配DefaultTabController

这种方式很简单，只要在Scaffold上面再套一层DefaultTabController就可以了。这种方式下，TabBarView会自动去查找这个tabController,如果找不到就会报错。

class TabPage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return  new DefaultTabController(
        length: 3,
        child: new Scaffold(
          appBar: new AppBar(
            backgroundColor: Colors.orangeAccent,
            title: new TabBar(
              tabs: [
                new Tab(icon: new Icon(Icons.directions_car)),
                new Tab(icon: new Icon(Icons.directions_transit)),
                new Tab(icon: new Icon(Icons.directions_bike)),
              ],
              indicatorColor: Colors.white,
            ),
          ),
          body: new TabBarView(
            children: [
              new Icon(Icons.directions_car),
              new Icon(Icons.directions_transit),
              new Icon(Icons.directions_bike),
            ],
          ),
        ),
      );
  }
}

2、有状态控件搭配TabController

Tab页的切换搭配了动画，因此到State类上附加一个SingleTickerProviderStateMixin:

  //定义有状态控件
class TabsPage extends StatefulWidget {
    @override
    _TabsPageState createState() => new _TabsPageState();
}

  //用于使用到了一点点的动画效果，因此加入了
class _TabsPageState extends State<TabsPage> with SingleTickerProviderStateMixin{
　　TabController _tabController;

    ...
}

然后到有状态控件的子类State中初始化控制器TabController：

  @override
  void initState() {
    super.initState();
    _tabController = new TabController(
      vsync: this,     //动画效果的异步处理，默认格式，背下来即可
      length: 3      //需要控制的Tab页数量
    );    
  }
  //当整个页面dispose时，记得把控制器也dispose掉，释放内存
  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

然后到TabBar和TabBarView中的controller属性中调用控制器_tabController

@override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
         title: Text('Keep Alive Demo'),
         bottom: TabBar(
           controller: _tabController, //配置控制器
           tabs: <Widget>[
             Tab(icon: Icon(Icons.directions_car)),
             Tab(icon: Icon(Icons.directions_transit)),
             Tab(icon: Icon(Icons.directions_bike)),
           ],
           indicatorColor: Colors.white, //tab标签的下划线颜色
         ),
      ),
      body: TabBarView(
        controller: _tabController, //配置控制器
        children: <Widget>[
          new Icon(Icons.directions_car),
          new Icon(Icons.directions_transit),
          new Icon(Icons.directions_bike),
        ],
      ),
    );
  } 

 

转载于:https://www.cnblogs.com/joe235/p/11213861.html