Flutter: TabController просто координирует TabBar и TabView

Flutter

простая демонстрация

class _RankPageState extends State<RankPage>{
  final List<Tab> titleTabs = <Tab>[
    Tab(
      text: '今日实时榜',
    ),
    Tab(
      text: '昨日排行榜',
    ),
    Tab(
      text: '上周积分榜',
    ),
  ];
...
      child: Scaffold(
        appBar: AppBar(
            ...
          elevation: 0.0,
          backgroundColor: Color.fromRGBO(26, 172, 255, 1),
          title: TabBar(
            isScrollable: true,
            indicator: UnderlineTabIndicator(
                borderSide: BorderSide(style: BorderStyle.none)),
            tabs: titleTabs
          ),
        ),
        body: Container(
          color: Color.fromRGBO(26, 172, 255, 1),
          child: TabBarView(
            //TabBarView 默认支持手势滑动，若要禁止设置 NeverScrollableScrollPhysics
            physics: NeverScrollableScrollPhysics(),
            children: <Widget>[
                Center(child:Text('view1')),
                Center(child:Text('view2')),
                Center(child:Text('view3')),
            ],
          ),
        ),
      ),
...
}

TabBar и TabBarView имеют однозначное соответствие через индекс и предоставляются по умолчанию.DefaultTabControllerУстановите взаимосвязь между ними. Чтобы переключать анимацию и отслеживать взаимодействие при переключении, вы можете настроитьController

class _RankPageState extends State<RankPage> with SingleTickerProviderStateMixin{
    ...
    TabController tabController;
      @override
  void initState() {
    super.initState();
    // 添加监听器
    tabController = TabController(vsync: this, length: titleTabs.length)
      ..addListener(() {
          switch (tabController.index) {
            case 0:
              print(1);
              break;
            case 1:
              print(2)
              break;
            case 2:
              print(3)
              break;
          }
      });
  }
    ...
    //增加controller
    title: TabBar(
        controller: tabController,
        ...
    )
    ...
    child: TabBarView(
        controller: tabController,
        ...
    )
    ...
}

Проверьте результаты после запуска.Каждый раз при переключении консоли вкладок будет печататься соответствующее значение, но есть проблема.При нажатии на переключатель вкладок, печатается два раза, похоже выполняется дважды, и вывод обычно выводится один раз при скольжении для переключения.
Причина примерно в том, что: при нажатии notifyListeners() запускается последовательно во время процесса анимации;
Исходный код выглядит следующим образом:

Связанные подробные проблемы - Github Issues

Взгляните на API класса TabController, есть следующие свойства

//该动画值表示当前TabBar选中的指示器位置以及TabBar和TabBarView的scrollOffsets
animation → Animation<double>
//当前选中Tab的下标。改变index也会更新 previousIndex、设置animation's的value值、重置indexIsChanging为false并且通知监听器
index ↔ int
//true：当动画从上一个跳到下一个时
indexIsChanging → bool
//tabs的总数，通常大于1
length → int
//不同于animation's的value和index。offset value必须在-1.0和1.0之间
offset ↔ double
//上一个选中tab的index值，最初与index相同
previousIndex → int

Затем мы можем добавить слой суждения в слушателя

...
    tabController = TabController(vsync: this, length: titleTabs.length)
      ..addListener(() {
          if(tabController.indexIsChanging){
            switch (tabController.index) {
                case 0:
                  print(1);
                  break;
                case 1:
                  print(2)
                  break;
                case 2:
                  print(3)
                  break;
              }
          }
      });
...

Вышеприведенное решает проблему двойного щелчка и выполнения блока кода, но при попытке скольжения indexIsChanging всегда имеет значение false, что означает, что скользящий переключатель не может выполнить наш код. . . .
После нащупывания и отладки, чтобы свайп и щелчок выполняли наш блок кода только один раз, внесите следующие изменения

...
    tabController = TabController(vsync: this, length: titleTabs.length)
      ..addListener(() {
          if(tabController.index.toDouble() == tabController.animation.value){
            switch (tabController.index) {
                case 0:
                  print(1);
                  break;
                case 1:
                  print(2)
                  break;
                case 2:
                  print(3)
                  break;
              }
          }
      });
...

Ну ~ ~ для решения наших потребностей. . .

Ссылаться на

Официальный API TabController

Категории