Flutter--通过TabController实现TabBar

一、介绍

之前通过DefaultTabController组件实现了AppBar里面的顶部导航切换，但是实际项目中，有网络请求，上拉加载下拉刷新等操作DefaultTabController就不方便操作，因此提供了TabController实现TabBar。

二、TabController常用属性介绍

属性	说明
index	当前索引值
previousIndex	之前索引值
length	tab的数量
indexIsChanging	是否在切换tab 点击条目切换tab为true 滑动切换tab为false
animation	value表示TabBar的tab当前位置以及TabBar 和TabBarView的scrollOffsets

三、TabController常用方法介绍

方法	说明
addListener	添加监听
dispose	销毁
notifyListeners	激活所有监听
removeListener	清除监听

四、TabController实现TabBar的步骤（完整实现见demo）

1、TabController组件必须是在一个继承StatefulWidget的动态组件中

1111.png

2、必须实现SingleTickerProviderStateMixin

22222.png

3、组件初始化的时候，实例化TabController,实例化的时候，传两个参数，length：tab的个数，vsync：this(固定写法)

33333.png

4、在TabBar组件和TabBarView组件中的controller指定，实例化的TabController

4444.png

55555.png

五、TabController添加addListener，点击tab回调两次的解决方法(见demo)

1、点击tab回调一次，滑动切换tab不会回调

      if(_tabController.indexIsChanging){
          print("ysl--${_tabController.index}");
      }

2、 //点击tab时或滑动tab回调一次

      if(_tabController.index.toDouble() == _tabController.animation.value){
            print("ysl${_tabController.index}");
      }

六、TabController的demo

import 'package:flutter/material.dart';

void main() {
  runApp(TabControllerStu());
}


class TabControllerStu extends StatefulWidget {
  TabControllerStu({Key key}) : super(key: key);

  _TabControllerStuState createState() => _TabControllerStuState();
}

class _TabControllerStuState extends State<TabControllerStu> with SingleTickerProviderStateMixin{
  TabController _tabController;


  //销毁时调用
  @override
  void dispose() {
    super.dispose();
    _tabController.dispose();
  }

  //初始化调用
  @override
  void initState() {
    super.initState();
    _tabController = new TabController(length: 3, vsync: this);
    _tabController.addListener(() {
      //点击tab回调一次，滑动切换tab不会回调
      if(_tabController.indexIsChanging){
        print("ysl--${_tabController.index}");
      }

      //点击tab时或滑动tab回调一次
      if(_tabController.index.toDouble() == _tabController.animation.value){
        print("ysl${_tabController.index}");
      }

    });
  }
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
          appBar: AppBar(
            //必须配置
            title: Text("TabController学习"),
            bottom: TabBar(
              controller: _tabController,
              tabs: [
                Tab(text: "页面A",),
                Tab(text: "页面B",),
                Tab(text: "页面C",)
              ],
            ),
          ),
          body: TabBarView(
            //必须配置
            controller: _tabController,
            children: [
              Center(child:Text("页面A")),
              Center(child:Text("页面B")),
              Center(child:Text("页面C"))
            ],
          )),
    );
  }
}

666666.png