Flutter TabBar与TabBarView动态调整标签数量时不同步问题排查

• 你在build方法中每次都重新实例化TabController，没有继承旧控制器的当前索引状态，新控制器默认初始索引为0，但TabBarView内部残留了上一次的滚动/动画状态，两者状态不匹配导致不同步。
• 删除最后一个标签时，旧控制器的当前索引值大于新标签列表的最大合法索引（新长度-1），未做边界校验和主动修正，导致内部组件状态混乱。

1. 移除build方法中重建TabController的逻辑，改为通过didUpdateWidget生命周期监听选中标签的变化，主动调整控制器的属性和索引
2. 调整索引时做边界校验，确保索引值合法，再赋值给控制器
3. 给TabBar和TabBarView添加唯一Key，确保状态刷新正确

以下是修复后的核心代码：

class _TabWidgetState extends State<TabWidget>  with TickerProviderStateMixin {
  late TabController _tabController;
  @override
  void initState() {
    _tabController = TabController(length: widget.selectedTabs.length, vsync: this);
    super.initState();
  }

  @override
  void didUpdateWidget(covariant TabWidget oldWidget) {
    super.didUpdateWidget(oldWidget);
    // 仅在选中标签列表长度变化时调整控制器
    if (oldWidget.selectedTabs.length != widget.selectedTabs.length) {
      final oldIndex = _tabController.index;
      // 计算合法新索引：旧索引超出范围就设为0，否则保留原有索引
      final newIndex = oldIndex >= widget.selectedTabs.length ? 0 : oldIndex;
      // 销毁旧控制器，创建指定初始索引的新控制器
      _tabController.dispose();
      _tabController = TabController(
        length: widget.selectedTabs.length, 
        vsync: this,
        initialIndex: newIndex
      );
    }
  }

  @override
  void dispose() {
    _tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    
    if (widget.selectedTabs.isEmpty) {
      return Container(
        padding: const EdgeInsets.all(20),
        child: const Text("Select some tabs to be available."),
      );
    } 

    var tabs = <Widget>[];
    List<Widget> tabBody = [];
    for (var i = 0; i < widget.allItems.length; i++) {
      if (widget.selectedTabs.contains(widget.allItems[i].id)) {
        tabs.add(Tab(text: widget.allItems[i].title));
        tabBody.add(widget.allItems[i].widget);
      }
    }

    return Column(
      crossAxisAlignment: CrossAxisAlignment.center,
      children: [
          TabBar(
              key: const Key('tab_bar'),
              labelColor: Colors.black,
              unselectedLabelColor: Colors.black54,
              tabs: tabs,
              controller: _tabController,
              indicatorSize: TabBarIndicatorSize.tab,
          ),
          Expanded(
            child: TabBarView(
              key: const Key('tab_bar_view'),
              children: tabBody,
              controller: _tabController,
            ),
          ),
      ]
    );
  }
}

附加优化建议 #

你原代码中直接操作selectedTabs列表的add/remove，没有走你自定义的set方法，不符合ChangeNotifier的更新规范，建议调整Checkbox的onChanged逻辑：

onChanged: (value) {
  if (value==true) {
    final newList = List<int>.from(tabsProvider.selectedTabs)..add(item.id);
    tabsProvider.selectedTabs = newList;
  } else {
    final newList = List<int>.from(tabsProvider.selectedTabs)..remove(item.id);
    tabsProvider.selectedTabs = newList;
  }
}

调整后可以删除多余的doNotifyListeners方法，set方法内部已经自动触发通知。

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