Flutter如何将主文件命名路由传递给其他类的BottomNavigationBar

核心解决方案 #

无需向BottomNavigationBar所在类传递命名路由，Flutter的Navigator可通过上下文直接访问全局路由表。若要保留底部导航栏并通过命名路由切换页面，推荐使用嵌套Navigator结构，让底部导航栏作为父容器，页面切换在内部Navigator中完成。

1. 修改bottom_navigation_screen.dart #

替换原有的页面实例列表为路由名称，添加导航键控制内部页面切换：

import 'package:flutter/material.dart';
import 'all_articles_screen.dart';
import 'all_children_screen.dart';
import 'user_profile_screen.dart';

class BottomNavigationScreen extends StatefulWidget {
  const BottomNavigationScreen({super.key});

  @override
  State<BottomNavigationScreen> createState() => _BottomNavigationScreenState();
}

class _BottomNavigationScreenState extends State<BottomNavigationScreen> {
  int _selectedIndex = 0;
  // 导航键，用于控制内部Navigator的路由切换
  final GlobalKey<NavigatorState> _navigatorKey = GlobalKey();
  // 对应底部导航项的命名路由，与main.dart中定义的完全一致
  static const List<String> _routeNames = <String>[
    '/userProfileScreen',
    '/allChildrenScreen',
    '/allArticleScreen',
  ];

  void _onItemTapped(int index) {
    setState(() {
      _selectedIndex = index;
    });
    // 替换当前页面路由，避免页面栈累积
    _navigatorKey.currentState?.pushReplacementNamed(_routeNames[index]);
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      // 嵌套Navigator，单独管理底部导航对应的页面
      body: Navigator(
        key: _navigatorKey,
        initialRoute: _routeNames[_selectedIndex],
        onGenerateRoute: (settings) {
          // 复用main.dart中的路由逻辑，返回对应页面
          switch (settings.name) {
            case '/userProfileScreen':
              return MaterialPageRoute(builder: (_) => const UserProfileScreen());
            case '/allChildrenScreen':
              return MaterialPageRoute(builder: (_) => const AllChildrenScreen());
            case '/allArticleScreen':
              return MaterialPageRoute(builder: (_) => const AllArticleScreen());
            default:
              return MaterialPageRoute(builder: (_) => const UserProfileScreen());
          }
        },
      ),
      bottomNavigationBar: BottomNavigationBar(
        backgroundColor: Colors.blue[50],
        items: const <BottomNavigationBarItem>[
          BottomNavigationBarItem(
            icon: Icon(Icons.person),
            label: 'Profile',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.business),
            label: 'Children',
          ),
          BottomNavigationBarItem(
            icon: Icon(Icons.article),
            label: 'Articles',
          ),
        ],
        currentIndex: _selectedIndex,
        selectedItemColor: Colors.blue,
        onTap: _onItemTapped,
      ),
    );
  }
}

2. main.dart无需修改 #

原有的全局路由定义保持不变，嵌套Navigator的onGenerateRoute已复用了全局路由的页面实例逻辑，确保一致性。

关键说明 #

• 嵌套Navigator的作用：让底部导航栏始终处于页面顶层，页面切换仅发生在内部Navigator中，避免直接使用全局Navigator导致导航栏被覆盖。
• pushReplacementNamed的优势：替换当前页面而非添加新页面到栈中，符合底部导航的切换逻辑，避免页面栈无限累积。
• 无需传递路由表：BottomNavigationScreen处于MaterialApp子树中，可直接通过上下文或导航键访问路由功能，无需额外传递路由表。

非main类中使用BottomNavigationBar+命名路由的通用步骤 #

1. 创建StatefulWidget作为底部导航容器，如BottomNavigationScreen。
2. 定义GlobalKey<NavigatorState>导航键和对应底部项的命名路由列表。
3. 在Scaffold的body中嵌套Navigator，设置初始路由和路由生成逻辑。
4. 在底部导航的onTap事件中，通过导航键调用pushReplacementNamed切换路由，并更新选中索引。

内容的提问来源于stack exchange，提问作者Mohammad Bilal Akbar