Flutter中使用useTabController时索引值在Text组件中不更新的问题求助

这个问题的核心在于：你的HookWidget没有在TabController的索引变化时触发重建。虽然你能通过监听器打印出正确的索引，但Text组件依赖的是build时的_controller.index值，而控制器索引变化不会自动通知Hook系统重新构建Widget，所以Text一直显示初始值。

另外还有个小问题：你现在每次build都会给控制器添加新的监听器，会导致重复触发打印，这个也要一起修复。

方案一：用useListenable监听控制器变化 #

useListenable可以让HookWidget监听一个Listenable对象（TabController就是Listenable），当控制器状态变化时自动触发重建。

修改后的代码如下：

class TabBarDemo extends HookWidget { 
  final List<Widget> list = const [ 
    Tab(icon: Icon(Icons.card_travel)), 
    Tab(icon: Icon(Icons.add_shopping_cart)), 
    Tab(icon: Icon(Icons.ac_unit)), 
  ]; 

  @override 
  Widget build(BuildContext context) { 
    // 用useListenable包裹useTabController，让Widget感知控制器变化
    final _controller = useListenable(useTabController(initialLength: list.length, initialIndex: 0)); 

    // 用useEffect管理监听器，避免重复添加
    useEffect(() {
      void _onTabChange() {
        print("\n ${_controller.index} \n");
      }
      _controller.addListener(_onTabChange);
      // 组件销毁时移除监听器
      return () => _controller.removeListener(_onTabChange);
    }, [_controller]);

    return Scaffold( 
      appBar: AppBar( 
        bottom: TabBar( 
          onTap: (index) {}, 
          controller: _controller, 
          tabs: list, 
        ), 
      ), 
      body: TabBarView( 
        controller: _controller, 
        children: List.generate(list.length, (index) {
          return Center( 
            child: Text('${_controller.index}'), 
          );
        }), 
      ), 
    ); 
  } 
}

方案二：用useState同步索引值 #

如果你需要更灵活地控制索引状态，可以用useState来存储当前索引，在控制器监听器里更新这个状态，从而触发Widget重建。

代码示例：

class TabBarDemo extends HookWidget { 
  final List<Widget> list = const [ 
    Tab(icon: Icon(Icons.card_travel)), 
    Tab(icon: Icon(Icons.add_shopping_cart)), 
    Tab(icon: Icon(Icons.ac_unit)), 
  ]; 

  @override 
  Widget build(BuildContext context) { 
    final _controller = useTabController(initialLength: list.length, initialIndex: 0); 
    // 用useState存储当前索引，初始值和控制器一致
    final currentIndex = useState(_controller.index);

    useEffect(() {
      void _onTabChange() {
        currentIndex.value = _controller.index;
        print("\n ${_controller.index} \n");
      }
      _controller.addListener(_onTabChange);
      return () => _controller.removeListener(_onTabChange);
    }, [_controller]);

    return Scaffold( 
      appBar: AppBar( 
        bottom: TabBar( 
          onTap: (index) {}, 
          controller: _controller, 
          tabs: list, 
        ), 
      ), 
      body: TabBarView( 
        controller: _controller, 
        children: List.generate(list.length, (index) {
          return Center( 
            child: Text('${currentIndex.value}'), 
          );
        }), 
      ), 
    ); 
  } 
}

为什么原来的代码不生效？ #

1. HookWidget的重建仅由Hook状态的变化触发，TabController的index变化不属于Hook状态，所以不会自动重建。
2. 每次build都调用_controller.addListener会重复添加监听器，导致多次打印同一个索引，用useEffect可以确保监听器只添加一次，并且在组件销毁时清理。

内容的提问来源于stack exchange，提问作者Mariam Albarghouti