監聽 Flutter 的 TabController 上的所有事件

Question

如果您想知道用戶何時更改了標簽頁，您可以使用常規的TabController.addListener()方法。 但是如果知道所有的用戶事件，例如，用戶開始滾動到另一個頁面呢？

我需要知道用戶何時開始滾動到新頁面。 知道用戶已經滾動到新頁面為時已晚。

有沒有辦法實現它？

Answer 1

向tabController添加監聽器只會監聽選項卡索引的變化，但要監聽變化的值（雙精度索引），您可以將監聽器添加到tabController的 animation 。

這是一個完整的代碼，我正在使用flutter_hooks來創建tabController 。

class TestTabListener extends HookWidget {
  const TestTabListener();

  @override
  Widget build(BuildContext context) {
    final tabController = useTabController(initialLength: 3);

    tabController.animation!.addListener(() {
      if (tabController.animation!.value != tabController.index) {
        {
          //code
          print("runing");
        }
      }
    });

    return Scaffold(
      body: TabBarView(
        controller: tabController,
        children: pages,
      ),
    );
  }

  static final pages = [
    Container(color: Colors.red),
    Container(color: Colors.black),
    Container(color: Colors.blue),
  ];
}

此處使用 function 時要小心，因為它會被多次調用，您可能會添加條件。

Answer 2

簡單的檢測如下：

tabBarController =
    TabController(length: 5, initialIndex: pageNumber, vsync: this);
tabBarController.addListener(() {
  changePage(tabBarController.index);
});