监听 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);
});