Flutter页面跳转时保留BottomAppBar的实现咨询

你遇到的问题很典型——当使用全局Navigator.push跳转新页面时，新页面会完全替换掉当前的Scaffold（包括底部的BottomAppBar）。要解决这个问题，我们需要给每个标签页配置独立的导航子栈（也就是嵌套导航），这样跳转操作只会影响当前标签页的内容，父页面的BottomAppBar会始终保留。

具体实现步骤 #

1. 为每个标签页创建导航Key
   用GlobalKey<NavigatorState>来控制每个标签页内部的导航栈，确保切换标签后导航状态不会丢失。

2. 用IndexedStack管理标签页
   IndexedStack可以保持所有子组件的状态，切换标签时不会重建页面，完美适配嵌套导航的场景。

3. 重构页面结构，添加嵌套Navigator
   把每个标签页的内容包裹在独立的Navigator组件中，让跳转操作在标签页内部的栈中进行。

修改后的代码示例 #

home_page.dart 核心修改部分

class HomePage extends StatefulWidget {
  @override
  _HomePageState createState() => _HomePageState();
}

class _HomePageState extends State<HomePage> {
  int _selectedIndex = 0;
  // 为每个标签页分配独立的导航Key
  final List<GlobalKey<NavigatorState>> _navigatorKeys = [
    GlobalKey<NavigatorState>(),
    GlobalKey<NavigatorState>(),
  ];

  void _selectedTab(int index) {
    setState(() {
      _selectedIndex = index;
    });
  }

  // 构建带嵌套导航的标签页
  Widget _buildTabNavigator(int index, Widget tabContent) {
    return Navigator(
      key: _navigatorKeys[index],
      onGenerateRoute: (settings) {
        return MaterialPageRoute(
          builder: (context) => tabContent,
        );
      },
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(
        title: const Text('DemoApp'),
        actions: <Widget>[
          IconButton(
            icon: const Icon(Icons.account_circle),
            tooltip: "Account settings",
            onPressed: () {
              // 使用当前标签页的Navigator跳转，而非全局Navigator
              _navigatorKeys[_selectedIndex].currentState?.push(
                MaterialPageRoute(builder: (context) => UserDetail('test')),
              );
            },
          )
        ],
      ),
      // 用IndexedStack保持标签页状态
      body: IndexedStack(
        index: _selectedIndex,
        children: [
          _buildTabNavigator(0, WalletTab()),
          _buildTabNavigator(1, StoreTab()), // 替换成你的第二个标签页组件
        ],
      ),
      bottomNavigationBar: FABBottomAppBar(
        color: Theme.of(context).primaryColorLight,
        onTabSelected: _selectedTab,
        selectedColor: Theme.of(context).primaryColor,
        notchedShape: const CircularNotchedRectangle(),
        items: const [
          FABBottomAppBarItem(iconData: Icons.home, text: 'Wallet'),
          FABBottomAppBarItem(iconData: Icons.location_on, text: 'Store')
        ],
      ),
      floatingActionButton: const FloatingActionButton(
        onPressed: null,
        tooltip: '',
      ),
      floatingActionButtonLocation: FloatingActionButtonLocation.centerDocked,
      resizeToAvoidBottomPadding: false,
    );
  }
}

标签页内列表项的跳转处理 #

在WalletTab或StoreTab的列表项点击事件中，直接使用Navigator.of(context)即可，因为此时的context属于当前标签页的嵌套Navigator，跳转不会影响父页面的BottomAppBar：

// 示例：WalletTab中的列表项点击
ListTile(
  title: const Text('查看详情'),
  onTap: () {
    Navigator.of(context).push(
      MaterialPageRoute(builder: (context) => ItemDetailPage()),
    );
  },
)

为什么这个方案有效？ #

• 每个标签页拥有独立的导航栈，跳转操作只会在当前标签页的栈中进行，父页面的Scaffold（包括BottomAppBar）不会被替换。
• IndexedStack确保切换标签时，之前的标签页状态（包括导航栈）被完整保留，返回时能回到正确的页面。

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