Flutter TabBar最后一项点击跳转页面偶现失效问题求助

问题出在GestureDetector和TabBar原生点击事件的冲突上——TabBar的每个Tab本身自带切换页面的逻辑，当两个事件的触发顺序不确定时，就会出现偶尔触发Tab切换、显示空Container的情况。

直接放弃用GestureDetector包裹Tab的方式，改用TabBar.onTap回调来处理特殊Tab的跳转：

class MyHomePage extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final appState = context.watch<MyAppState>();
    // 计算最后一个特殊Tab的索引
    final newListTabIndex = appState.types.length + 1;

    return DefaultTabController(
      length: appState.types.length + 2,
      child: Scaffold(
        appBar: AppBar(
          title: const Text('Task List'),
          centerTitle: true,
          bottom: TabBar(
            labelColor: Colors.white,
            indicatorColor: Colors.white,
            isScrollable: true,
            labelPadding: const EdgeInsets.only(left: 20, right: 20),
            // 添加onTap回调统一处理点击事件
            onTap: (index) {
              if (index == newListTabIndex) {
                // 点击的是"+ New List"，执行页面跳转
                Navigator.of(context).push(
                  MaterialPageRoute(builder: (context) => const AddNewList())
                );
                // 保持当前选中的Tab，避免控制器自动切换到空页面索引
                DefaultTabController.of(context)?.animateTo(
                  DefaultTabController.of(context)!.index
                );
              }
              // 其他Tab默认执行原生切换逻辑，无需额外处理
            },
            tabs: [
              const Tab(icon: Icon(Icons.star_rounded)),
              for (var type in appState.types) Tab(text: type),
              // 直接使用原生Tab，移除GestureDetector
              const Tab(text: '+ New List'),
            ],
          ),
        ),
        body: TabBarView(
          children: [
            const ShowTaskListPage('favorites'),
            for(var type in appState.types) ShowTaskListPage(type),
            const Container(),
          ],
        ),
      ),
    );
  }
}

关键说明 #

• 用TabBar.onTap统一处理所有Tab的点击逻辑，彻底避免事件冲突
• 点击特殊Tab时，手动调用animateTo锁定当前选中状态，防止控制器自动切换到空页面的索引
• 保留Tab的原生样式和交互逻辑，同时实现自定义跳转需求

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