Flutter动态向TabBar添加新标签时报RangeError下标越界如何解决

问题根源 #

• 执行顺序错误：setState中先创建了length为4的TabController，此时myTabs还未执行add操作长度仍为3，TabBar重建时控制器长度和tabs列表长度不匹配，触发index越界
• 旧控制器未释放：替换TabController前没有销毁旧实例，残留的监听逻辑会干扰新控制器的状态同步
• 长度硬编码：固定写死length=4仅适配单次新增场景，后续增删标签时会再次出现长度不匹配问题

修复代码 #

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key}) : super(key: key);

  @override
  State<MyHomePage> createState() => _MyHomePageState();
}

class _MyHomePageState extends State<MyHomePage> with TickerProviderStateMixin {
  late TabController tabController;
  List<Tab> myTabs = [
    Tab(text: LocaleKeys.ALBUMS.tr()),
    Tab(text: LocaleKeys.PLAYLIST.tr()),
    Tab(text: LocaleKeys.song.tr()),
  ];

  List<Widget> myTabViews = [
    Container(child: Text("one")),
    Container(child: Text("two")),
    Container(child: Text("three")),
  ];

  void addNewTab({required Tab tab, required Widget widget}) {
    setState(() {
      // 先更新标签和视图列表
      myTabs.add(tab);
      myTabViews.add(widget);
      // 销毁旧控制器
      tabController.dispose();
      // 再用最新的列表长度创建新控制器，不要硬编码长度
      tabController = TabController(length: myTabs.length, vsync: this, initialIndex: 1);
    });
  }

  @override
  void initState() {
    super.initState();
    tabController = TabController(length: myTabs.length, vsync: this, initialIndex: 1);
  }

  // 页面销毁时释放控制器资源
  @override
  void dispose() {
    tabController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: _myAppBar(),
      body: _myBody(),
    );
  }

  _myAppBar() {
    return AppBar(
      title: ElevatedButton(
        onPressed: () {
          addNewTab(
              tab: Tab(child: Text("rah")),
              widget: Container(child: Text("test"))
          );
        },
        child: Text("presss"),
      ),
      // 可选：添加key强制TabBar重建，避免极端场景下的状态缓存
      bottom: TabBar(
        key: ValueKey(myTabs.length),
        controller: tabController,
        tabs: myTabs,
      ),
    );
  }

  _myBody() {
    // 可选：TabBarView同步添加key
    return TabBarView(
      key: ValueKey(myTabs.length),
      controller: tabController,
      children: myTabViews
    );
  }
}

补充说明 #

删除标签的逻辑可以参照同样的逻辑实现：先从myTabs和myTabViews中移除对应索引的元素，销毁旧控制器，再用新的列表长度创建TabController即可。

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