写点什么

Flutter - TabController 监听 index

作者:坚果前端
  • 2021 年 11 月 26 日
  • 本文字数:1484 字

    阅读完需:约 5 分钟

大家好,我是坚果


Flutter - TabController 监听 index

简单一个小例子:

class _OrderPageState extends State<OrderPage>{   List _tabLabels = ["坚果", "前端"];      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: _tabLabels          ),        ),        body: Container(          color: Color.fromRGBO(26, 172, 255, 1),          child: TabBarView(            //TabBarView 默认支持手势滑动,若要禁止设置 NeverScrollableScrollPhysics            physics: NeverScrollableScrollPhysics(),            children: <Widget>[                Center(child:Text('坚果')),                Center(child:Text('前端"')),                        ],          ),        ),      )}
复制代码

TabBar 与 TabBarView 通过 index 有一一对应关系,自定义一个 Controller:

class _GroupInfoState extends BaseState<GroupInfoNeWPage>    with SingleTickerProviderStateMixin{    TabController tabController;      @override  void initState() {    super.initState();    // 添加监听器    tabController = TabController(vsync: this, length: titleTabs.length)      ..addListener(() {          switch (tabController.index) {            case 0:                  print("坚果");                  break;                case 1:                  print("前端")                  break;                     }      });  }    //增加controller    title: TabBar(        controller: tabController,    )    child: TabBarView(        controller: tabController,    )}
复制代码

切换 tab 控制台都会打印相应的值,但有点击选项卡切换时打印了 2 次,似乎执行了两遍,滑动切换时正常输出一次。

原因大致是因为: 点击时 在动画过程先后触发了 notifyListeners()。看一下 TabController Class API,有以下属性:


//该动画值表示当前TabBar选中的指示器位置以及TabBar和TabBarView的scrollOffsetsanimation → Animation<double>//当前选中Tab的下标。改变index也会更新 previousIndex、设置animation's的value值、重置indexIsChanging为false并且通知监听器index ↔ int//true:当动画从上一个跳到下一个时indexIsChanging → bool//tabs的总数,通常大于1length → 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.index.toDouble() == tabController.animation.value){            switch (tabController.index) {                case 0:                  print("坚果");                  break;                case 1:                  print("前端")                  break;                            }          }      });
复制代码


今天的分享到此就和大家说再见了,我是坚果,我会在平常分享一些我遇到的问题,以及解决问题时所采取的方案,欢迎大家关注

发布于: 16 小时前阅读数: 5
用户头像

坚果前端

关注

此间若无火炬,我便是唯一的光 2020.10.25 加入

公众号:“坚果前端”,51CTO博客首席体验官,专注于大前端技术的分享,包括Flutter,小程序,安卓,VUE,JavaScript。

评论

发布
暂无评论
Flutter - TabController监听index