Flutter：TabController簡單協調TabBar與TabView

翻滾的猿_開著窗戶睡覺發表於2019-03-28
FlutterControllertabBarView

簡單 demo

Flutter：TabController簡單協調TabBar與TabView

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通過index有一一對應關係，並且預設提供了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,
        ...
    )
    ...
}
複製程式碼

執行之後檢視結果，每次切換 tab 控制檯都會列印相應的值，但有個問題，點選選項卡切換時列印了2次，似乎執行了兩遍，滑動切換時正常輸出一次。
原因大致是因為： 點選時 在動畫過程先後觸發了 notifyListeners();
原始碼如下：

Flutter：TabController簡單協調TabBar與TabView
相關詳細問題-Github Issues

看一下 TabController Class API,有以下屬性

//該動畫值表示當前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;
              }
          }
      });
...
複製程式碼

恩~~~解決我們的需求了。。。

參考

官方TabController API 更多關於使用Flutter知識筆記在我的 Github -- HybridApp ，持續更新，歡迎點個 star 訂閱收藏。

相關文章