如何在Flutter同Tab内打开新页面且保留TabBar

核心需求：点击“Nova Reserva”按钮时，在当前Tab的内容区域内打开新页面，底部TabBar保持可见不消失。

解决方案思路 #

给每个Tab单独维护一个独立的Navigator导航栈，让Tab内的页面跳转仅局限在当前Tab的内容区域，不会替换整个页面（包括底部TabBar）。

步骤1：封装TabNavigator组件 #

创建一个专门用于管理单个Tab导航逻辑的组件：

class TabNavigator extends StatefulWidget {
  final GlobalKey<NavigatorState> navigatorKey;
  final Widget initialPage;

  const TabNavigator({
    super.key,
    required this.navigatorKey,
    required this.initialPage,
  });

  @override
  State<TabNavigator> createState() => _TabNavigatorState();
}

class _TabNavigatorState extends State<TabNavigator> {
  @override
  Widget build(BuildContext context) {
    return Navigator(
      key: widget.navigatorKey,
      initialRoute: '/',
      onGenerateRoute: (RouteSettings settings) {
        WidgetBuilder builder;
        switch (settings.name) {
          case '/':
            builder = (context) => widget.initialPage;
            break;
          case '/nova-reserva':
            // 替换为你的"Nova Reserva"目标页面组件
            builder = (context) => const NovaReservaPage();
            break;
          // 可添加当前Tab需要的其他路由
          default:
            throw Exception('未定义路由: ${settings.name}');
        }
        return MaterialPageRoute(builder: builder, settings: settings);
      },
    );
  }
}

步骤2：更新TabBarView的子组件 #

在主页面中为每个Tab创建独立的Navigator键，并将原Tab页面用TabNavigator包裹：

// 为每个Tab分配独立的Navigator键，用于控制对应Tab的导航
final Map<int, GlobalKey<NavigatorState>> _tabNavigatorKeys = {
  0: GlobalKey<NavigatorState>(),
  1: GlobalKey<NavigatorState>(),
  2: GlobalKey<NavigatorState>(),
  3: GlobalKey<NavigatorState>(),
  4: GlobalKey<NavigatorState>(),
};

// 修改原TabBarView代码
TabBarView(
  controller: _tabController,
  children: [
    TabNavigator(
      navigatorKey: _tabNavigatorKeys[0]!,
      initialPage: const HomeTab(),
    ),
    TabNavigator(
      navigatorKey: _tabNavigatorKeys[1]!,
      initialPage: const ResearchesTab(),
    ),
    TabNavigator(
      navigatorKey: _tabNavigatorKeys[2]!,
      initialPage: const SchedulesTab(),
    ),
    TabNavigator(
      navigatorKey: _tabNavigatorKeys[3]!,
      initialPage: const Center(child: Text('MENSAGENS')),
    ),
    TabNavigator(
      navigatorKey: _tabNavigatorKeys[4]!,
      initialPage: const Center(child: Text('CADASTROS')),
    ),
  ],
),

步骤3：实现按钮跳转逻辑 #

在“Nova Reserva”按钮所在页面（比如SchedulesTab）中，使用当前Tab对应的Navigator执行跳转：

// 按钮点击事件示例
ElevatedButton(
  onPressed: () {
    // 获取当前选中Tab的Navigator，执行路由跳转
    _tabNavigatorKeys[_tabController.index]!.currentState?.pushNamed('/nova-reserva');
  },
  child: const Text('Nova Reserva'),
),

如果需要传递参数：

// 跳转时携带参数
_tabNavigatorKeys[_tabController.index]!.currentState?.pushNamed(
  '/nova-reserva',
  arguments: {'reservaId': '123'},
);

// 在NovaReservaPage中接收参数
class NovaReservaPage extends StatelessWidget {
  const NovaReservaPage({super.key});

  @override
  Widget build(BuildContext context) {
    final args = ModalRoute.of(context)?.settings.arguments as Map?;
    return Scaffold(
      appBar: AppBar(title: const Text('Nova Reserva')),
      body: Center(child: Text('预约ID: ${args?['reservaId']}')),
    );
  }
}

原方法无效的原因 #

使用GetX或全局Navigator.push时，操作的是App根节点的导航栈，会将整个页面（包括底部TabBar）替换为新页面。而每个Tab单独维护导航栈后，跳转仅影响当前Tab的内容区域，底部TabBar始终处于根布局中，不会被覆盖。

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