Flutter中实现两个独立导航TabBar的问题求助

想在Flutter应用里做两个独立的TabBar导航，顶部TabBar的图标要跳转到和底部TabBar图标不同的页面。但用DefaultTabController作为主页时，上下TabBar的图标会按顺序跳转到同一个页面。

需求参考图：

我的代码如下：

class MyApp extends StatelessWidget {
  const MyApp({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      title: 'Flutter Demo',
      theme: ThemeData(
        primarySwatch: Colors.yellow,
      ),
      home: const MyHomePage(title: 'My first app'),
    );
  }
}

class MyHomePage extends StatefulWidget {
  const MyHomePage({Key? key, required this.title}) : super(key: key);

  final String title;

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

class _MyHomePageState extends State<MyHomePage> {
  int _counter = 0;

  void _incrementCounter() {
    setState(() {
      _counter++;
    });
  }

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      color: Colors.yellow,
      home: DefaultTabController(
        length: 4,
        child: Scaffold(
          body: TabBarView(
            children: [
              Container(
                color: Colors.grey,
                child: TabBar(
                  tabs: [
                    Tab(icon: Icon(Icons.flight)),
                    Tab(icon: Icon(Icons.directions_transit)),
                    Tab(icon: Icon(Icons.directions_car)),
                    Tab(icon: Icon(Icons.directions_car)),
                  ],
                ),
              ),
              Container(
                color: Colors.orange,
                child: TabBar(
                  tabs: [
                    Tab(icon: Icon(Icons.flight)),
                    Tab(icon: Icon(Icons.directions_transit)),
                    Tab(icon: Icon(Icons.directions_car)),
                    Tab(icon: Icon(Icons.directions_car)),
                  ],
                ),
              ),
              Container(
                color: Colors.lightGreen,
              ),
              Container(
                color: Colors.red,
              ),
            ],
          ),
          bottomNavigationBar: const TabBar(
            tabs: [
              Tab(
                icon: Icon(Icons.home),
              ),
              Tab(
                icon: Icon(Icons.rss_feed),
              ),
              Tab(
                icon: Icon(Icons.perm_identity),
              ),
              Tab(
                icon: Icon(Icons.settings),
              )
            ],
            labelColor: Colors.yellow,
            unselectedLabelColor: Colors.blue,
            indicatorSize: TabBarIndicatorSize.label,
            indicatorPadding: EdgeInsets.all(5.0),
            indicatorColor: Colors.red,
          ),
          backgroundColor: Colors.black,
        ),
      ),
    );
  }
}

当前实现效果：

我是Flutter新手，正在通过实战项目学习，希望得到问题澄清和详细解答。

DefaultTabController是全局共享的，所以上下两个TabBar会共用同一个选中索引，导致点击时跳转到同位置的页面。要实现独立导航，得给每个TabBar单独配置TabController，各自管理页面切换逻辑。

1. 移除DefaultTabController，手动创建两个控制器 #

在State类里声明两个TabController，分别控制顶部和底部导航，还要混入SingleTickerProviderStateMixin提供动画支持：

class _MyHomePageState extends State<MyHomePage> with SingleTickerProviderStateMixin {
  late TabController _topTabController;
  late TabController _bottomTabController;

  @override
  void initState() {
    super.initState();
    // 初始化顶部控制器，对应顶部Tab数量
    _topTabController = TabController(length: 4, vsync: this);
    // 初始化底部控制器，对应底部Tab数量
    _bottomTabController = TabController(length: 4, vsync: this);
  }

  @override
  void dispose() {
    // 销毁控制器，避免内存泄漏
    _topTabController.dispose();
    _bottomTabController.dispose();
    super.dispose();
  }
}

2. 重构页面结构，分离导航层级 #

核心思路是：底部TabBar控制一级页面切换，每个一级页面里可以包含自己的顶部TabBar和二级页面。比如：

• 底部Tab0：主页，带顶部TabBar和4个二级页面
• 底部Tab1：资讯页，带顶部TabBar和4个二级页面
• 底部Tab2：个人中心
• 底部Tab3：设置

修改build方法（注意去掉原代码里多余的MaterialApp嵌套，一个应用只需要一个）：

@override
Widget build(BuildContext context) {
  return Scaffold(
    body: TabBarView(
      controller: _bottomTabController,
      children: [
        // 底部Tab0：带顶部Tab的主页
        Scaffold(
          appBar: AppBar(
            bottom: TabBar(
              controller: _topTabController,
              tabs: const [
                Tab(icon: Icon(Icons.flight)),
                Tab(icon: Icon(Icons.directions_transit)),
                Tab(icon: Icon(Icons.directions_car)),
                Tab(icon: Icons.directions_bike),
              ],
            ),
          ),
          body: TabBarView(
            controller: _topTabController,
            children: const [
              Center(child: Text("顶部Tab0：飞行")),
              Center(child: Text("顶部Tab1：公交")),
              Center(child: Text("顶部Tab2：驾车")),
              Center(child: Text("顶部Tab3：骑行")),
            ],
          ),
        ),
        // 底部Tab1：带顶部Tab的资讯页
        Scaffold(
          appBar: AppBar(
            bottom: TabBar(
              controller: _topTabController, // 若需要不同顶部Tab，可新建另一个TabController
              tabs: const [
                Tab(icon: Icon(Icons.sports_soccer)),
                Tab(icon: Icon(Icons.sports_basketball)),
                Tab(icon: Icon(Icons.sports_tennis)),
                Tab(icon: Icons.sports_golf),
              ],
            ),
          ),
          body: TabBarView(
            controller: _topTabController,
            children: const [
              Center(child: Text("资讯Tab0：足球")),
              Center(child: Text("资讯Tab1：篮球")),
              Center(child: Text("资讯Tab2：网球")),
              Center(child: Text("资讯Tab3：高尔夫")),
            ],
          ),
        ),
        // 底部Tab2：个人中心
        const Center(child: Text("个人中心")),
        // 底部Tab3：设置
        const Center(child: Text("设置")),
      ],
    ),
    bottomNavigationBar: TabBar(
      controller: _bottomTabController,
      tabs: const [
        Tab(icon: Icon(Icons.home)),
        Tab(icon: Icon(Icons.rss_feed)),
        Tab(icon: Icon(Icons.perm_identity)),
        Tab(icon: Icon(Icons.settings)),
      ],
      labelColor: Colors.yellow,
      unselectedLabelColor: Colors.blue,
      indicatorSize: TabBarIndicatorSize.label,
      indicatorPadding: EdgeInsets.all(5.0),
      indicatorColor: Colors.red,
    ),
    backgroundColor: Colors.black,
  );
}

3. 关键注意点 #

• 每个TabBar必须绑定对应的TabController，确保选中状态独立。
• 如果不同底部Tab的顶部TabBar结构不同（数量、图标不一样），可以给每个底部页面单独创建TabController，不要共用。
• 必须在dispose方法中销毁所有控制器，防止内存泄漏。
• 原代码中MyHomePage里的MaterialApp是多余的，会导致主题、路由混乱，直接移除。

这样修改后，底部Tab切换一级页面，每个一级页面的顶部Tab可以独立切换二级页面，完全实现两个TabBar的分离导航。

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