Flutter中特定屏幕BottomNavigationBar显隐及选中索引重置问题

我来帮你搞定这个问题！你的核心需求有两个：一是在特定页面（登录/注册/成功页）隐藏底部导航栏，在账户袋这类页面保留；二是修复底部导航选中状态重置的问题。下面是分步的解决方案：

1. 核心思路梳理 #

• 状态提升：把底部导航的选中状态（currentIndex）和页面状态存储桶（PageStorageBucket）移到根组件（App）中，避免页面切换时状态丢失。
• 嵌套导航区分：需要保留底部导航的子页面（如account_bag）用嵌套导航管理，不需要的页面（如account_successful）用全局导航跳转，让新页面的Scaffold自然覆盖底部导航。

2. 代码重构实现 #

第一步：重构根组件为有状态组件 #

把原来的无状态App改成有状态，统一管理底部导航状态和页面存储：

import 'package:flutter/material.dart';

class App extends StatefulWidget {
  @override
  _AppState createState() => _AppState();
}

class _AppState extends State<App> {
  // 保存底部导航选中索引，状态提升到根组件避免重置
  int currentIndex = 0;
  // 页面状态存储桶，用于保存各页面滚动位置等状态
  final PageStorageBucket bucket = PageStorageBucket();
  
  // 底部导航对应的主页面列表
  final List<Widget> mainPages = [
    HomeScreen(key: PageStorageKey('home_screen')),
    SearchScreen(key: PageStorageKey('search_screen')),
    AccountScreen(key: PageStorageKey('account_screen')),
  ];

  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        body: PageStorage(
          bucket: bucket,
          child: mainPages[currentIndex],
        ),
        // 底部导航栏始终在主页面显示，跳转新页面时会被覆盖
        bottomNavigationBar: _buildBottomNavigationBar(),
      ),
      // 注册不需要底部导航的页面路由
      routes: {
        '/account-successful': (context) => AccountSuccessfulScreen(),
        '/login': (context) => LoginScreen(),
        '/register': (context) => RegisterScreen(),
      },
    );
  }

  Widget _buildBottomNavigationBar() {
    return BottomNavigationBar(
      currentIndex: currentIndex,
      onTap: (index) => setState(() => currentIndex = index),
      items: [
        BottomNavigationBarItem(
          icon: Icon(Icons.home),
          label: 'Home', // 注意：title已弃用，改用label
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.search),
          label: 'Search',
        ),
        BottomNavigationBarItem(
          icon: Icon(Icons.person),
          label: 'Account',
        ),
      ],
    );
  }
}

第二步：用嵌套导航管理Account页面的子页面 #

在AccountScreen中添加嵌套Navigator，这样跳转到AccountBagScreen时底部导航依然显示，跳转到成功页时用全局导航隐藏底部导航：

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

  @override
  _AccountScreenState createState() => _AccountScreenState();
}

class _AccountScreenState extends State<AccountScreen> {
  // 嵌套导航的全局Key，用于内部页面跳转
  final GlobalKey<NavigatorState> _navigatorKey = GlobalKey<NavigatorState>();

  @override
  Widget build(BuildContext context) {
    return Navigator(
      key: _navigatorKey,
      initialRoute: '/',
      onGenerateRoute: (settings) {
        WidgetBuilder builder;
        switch (settings.name) {
          case '/':
            builder = (context) => _accountHome(context);
            break;
          case '/bag':
            builder = (context) => AccountBagScreen();
            break;
          default:
            throw Exception('Invalid route: ${settings.name}');
        }
        return MaterialPageRoute(builder: builder, settings: settings);
      },
    );
  }

  // Account页面的首页
  Widget _accountHome(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Account')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            ElevatedButton(
              onPressed: () {
                // 使用嵌套导航跳转到账户袋，底部导航保留
                _navigatorKey.currentState?.pushNamed('/bag');
              },
              child: Text('Go to Account Bag'),
            ),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () {
                // 使用全局导航跳转到成功页，底部导航被隐藏
                Navigator.of(context).pushNamed('/account-successful');
              },
              child: Text('Complete Action'),
            ),
          ],
        ),
      ),
    );
  }
}

// 账户袋页面（保留底部导航）
class AccountBagScreen extends StatelessWidget {
  const AccountBagScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Your Account Bag')),
      body: Center(child: Text('Bag contents go here!')),
    );
  }
}

// 成功页面（隐藏底部导航）
class AccountSuccessfulScreen extends StatelessWidget {
  const AccountSuccessfulScreen({Key? key}) : super(key: key);

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      appBar: AppBar(title: Text('Action Successful')),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: [
            Text('Your action was completed successfully!'),
            SizedBox(height: 20),
            ElevatedButton(
              onPressed: () => Navigator.of(context).pop(),
              child: Text('Back to Account'),
            ),
          ],
        ),
      ),
      // 不设置bottomNavigationBar，自然隐藏底部导航
    );
  }
}

3. 关键细节说明 #

• 状态保留：把currentIndex和PageStorageBucket放在根组件的State中，确保切换底部导航或跳转返回时，选中状态和页面滚动位置不会重置。
• 导航区分：嵌套导航用于同一底部导航下的子页面切换，全局导航用于跳转到完全独立的页面（如登录、成功页），后者的Scaffold不包含底部导航，实现隐藏效果。
• PageStorageKey：每个主页面都设置唯一的PageStorageKey，确保PageStorage能正确保存和恢复页面状态（如滚动位置）。

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