Flutter 通过TabController 定义TabBar

语法使用

1. 页面必须继承StatefulWidget
2. 页面必须实现SingleTickerProviderStateMixin
3. 页面初始化时，实例化TabController
4. 在TabBar组件中指定controller为我们实例化的TabController
5. 在TabBarView组件中指定controller为我们实例化的TabController

 

主要是监听TabBar与TabBarView的交互。比如，我们可以在tab切换时加载不同数据；可以自定义切换动画等。

参数详解

属性	说明
animation	官方：一个动画，其值表示TabBar所选选项卡指示器的当前位置以及TabBar 和TabBarView的scrollOffsets。
index	当前tab索引，//跳转后执行
indexIsChanging	动画是时为true
length	tab总数
offset	动画的值和索引之间的差异。偏移量必须在-1.0和1.0之间
previousIndex	前tab索引，////跳转后执行

方法详解 

方法名称	说明
animateTo	从当前tab跳到目标tab并执行动画
dispose	销毁
addListener	添加监听
noSuchMethod	当访问不存在的属性或方法时调用（不知道是什么鬼）
notifyListeners	调用所有监听器
removeListener	清除监听器

代码示例

1、页面必须继承StatefulWidget

class TabControllerPage extends StatefulWidget {
  @override
  _TabControllerPageState createState() => _TabControllerPageState();
}

2、页面必须实现SingleTickerProviderStateMixin

class _TabControllerPageState extends State with SingleTickerProviderStateMixin{

3、页面初始化时实例化TabController，并指定tab长度

TabController _tabController;

  @override
  void initState() {
    print('初始化 数据...');
    _tabController = new TabController(
      vsync: this,//固定写法
      length: 9   //指定tab长度
    );
    super.initState();
  }

4、在TabBar组件中指定controller为我们实例化的TabController

bottom: TabBar(
            controller: _tabController,
            isScrollable: true,
            tabs: [
              Tab(text: '推荐',),
                Tab(text: '丽人',),
                Tab(text: '旅行',),
                Tab(text: '电影',),
                Tab(text: '结婚',),
                Tab(text: '购物',),
                Tab(text: '教培',),
                Tab(text: '家装',),
                Tab(text: '亲子',),
            ],
          ),

5、在TabBarView组件中指定controller为我们实例化的TabController

body: TabBarView(
          controller: _tabController,
          children: [
            // Your code
            ),
          ],
        )

在这里简单的介绍一下TabController监听事件，打印当前索引和前索引。

//添加监听
    _tabController.addListener((){
      var index = _tabController.index;
      var previousIndex = _tabController.previousIndex;
      print("index: $index");
      print('previousIndex: $previousIndex');
    });

 

 效果图

 完整代码

查看完整代码