Flutter中如何在所有页面显示固定标签索引的底部导航栏

我有一个包含Home、Loans、Insurance、Settings四个标签的BottomNavigationBar。Settings页面的按钮可跳转至多个其他页面，这些页面无需加入导航栏标签，但需让底部导航栏在所有页面持久显示，以便快速返回主页面。现有代码可实现四个主页面的导航，我不想将其他页面加入标签索引，仅希望导航栏显示在这些非索引页面上。

import 'package:bima/Insurance/insurance.dart';
import 'package:bima/Loans/loans.dart';
import 'package:bima/Settings/settings.dart';
import 'package:flutter/material.dart';

import '../Home/home.dart';

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

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

class _DashboardState extends State<Dashboard> {
  int _currentIndex = 0;

  final tabs = [
    const Home(),
    const Loans(),
    const Insurance(),
    const Settings()
  ];

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: tabs[_currentIndex],
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        unselectedItemColor: Colors.black,
        selectedItemColor: const Color.fromRGBO(212, 164, 24, 1),
        currentIndex: _currentIndex,
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
        },
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.wallet_outlined),
            label: 'Loans',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.shield_moon_outlined),
            label: 'Insurance',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            label: 'Settings',
          ),
        ],
      ),
    );
  }
}

• 带底部导航栏的页面：显示四个标签的底部导航栏，页面内容为Home/Loans/Insurance/Settings其中一个主页面
• 无底部导航栏的页面：从Settings跳转后的子页面，底部未显示导航栏（这是需要修正的状态）

核心思路是让Dashboard作为父容器，内部用Navigator管理主页面和子页面的路由栈，所有页面都嵌入Dashboard的body中，从而保持底部导航栏持久显示。具体实现如下：

修改后的Dashboard代码 #

import 'package:bima/Insurance/insurance.dart';
import 'package:bima/Loans/loans.dart';
import 'package:bima/Settings/settings.dart';
import 'package:flutter/material.dart';

import '../Home/home.dart';
// 导入你的子页面，示例假设为ProfilePage
// import '../Profile/profile.dart';

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

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

class _DashboardState extends State<Dashboard> {
  int _currentIndex = 0;
  final GlobalKey<NavigatorState> _navigatorKey = GlobalKey<NavigatorState>();

  // 存储四个主页面
  final Map<int, Widget> _mainPages = {
    0: const Home(),
    1: const Loans(),
    2: const Insurance(),
    3: const Settings(),
  };

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Navigator(
        key: _navigatorKey,
        initialRoute: '/',
        onGenerateRoute: (settings) {
          // 初始路由加载当前选中的主页面
          if (settings.name == '/') {
            return MaterialPageRoute(
              builder: (context) => _mainPages[_currentIndex]!,
            );
          }
          // 处理子页面路由，根据实际页面添加
          if (settings.name == '/profile') {
            return MaterialPageRoute(
              builder: (context) => const ProfilePage(), // 替换为你的子页面
            );
          }
          // 其他子页面同理添加路由规则
          return null;
        },
      ),
      bottomNavigationBar: BottomNavigationBar(
        type: BottomNavigationBarType.fixed,
        unselectedItemColor: Colors.black,
        selectedItemColor: const Color.fromRGBO(212, 164, 24, 1),
        currentIndex: _currentIndex,
        onTap: (index) {
          setState(() {
            _currentIndex = index;
          });
          // 点击标签时清空路由栈，回到对应主页面初始状态
          _navigatorKey.currentState?.pushNamedAndRemoveUntil(
            '/',
            (route) => false,
          );
        },
        items: const [
          BottomNavigationBarItem(
            icon: Icon(Icons.home),
            label: 'Home',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.wallet_outlined),
            label: 'Loans',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.shield_moon_outlined),
            label: 'Insurance',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.settings),
            label: 'Settings',
          ),
        ],
      ),
    );
  }
}

Settings页面跳转示例 #

在Settings页面的按钮点击事件中，使用Navigator.of(context).pushNamed跳转子页面：

ElevatedButton(
  onPressed: () {
    Navigator.of(context).pushNamed('/profile');
  },
  child: const Text('跳转到个人资料'),
)

关键说明 #

• 子页面无需单独嵌套Scaffold（如果嵌套了，底部导航栏会覆盖子页面的bottomNavigationBar，建议子页面直接用Container等组件承载内容）
• 点击底部导航栏标签时，通过pushNamedAndRemoveUntil清空路由栈，确保回到对应主页面的初始状态
• 新增子页面时，只需在onGenerateRoute中添加对应的路由规则即可

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