Flutter中如何添加NavigationRail菜单按钮与始终展开的抽屉

核心实现思路 #

要完成需求，需要通过Scaffold管理抽屉状态，给NavigationRail添加触发按钮，再配置贴合Material 3风格的抽屉组件。

1. 初始化基础控制对象 #

先定义全局Key来精准控制抽屉开关，同时维护导航选中状态：

final GlobalKey<ScaffoldState> _scaffoldKey = GlobalKey<ScaffoldState>();
int _selectedRailIndex = 0;
int _drawerSelectedIndex = 0;

2. 给NavigationRail添加菜单触发按钮 #

利用NavigationRail的leading属性放置菜单按钮，点击时调用抽屉打开方法：

NavigationRail(
  // 菜单按钮固定在导航栏顶部
  leading: IconButton(
    icon: const Icon(Icons.menu),
    onPressed: () => _scaffoldKey.currentState?.openDrawer(),
  ),
  selectedIndex: _selectedRailIndex,
  onDestinationSelected: (index) => setState(() => _selectedRailIndex = index),
  destinations: const [
    NavigationRailDestination(icon: Icon(Icons.home), label: Text('首页')),
    NavigationRailDestination(icon: Icon(Icons.settings), label: Text('设置')),
  ],
)

3. 配置Material 3风格导航抽屉 #

根据Flutter版本选择对应方案：

方案一：Material 3原生NavigationDrawer（推荐，Flutter 3.13+支持）

完全贴合Material 3设计规范，自带选中状态管理：

Scaffold(
  key: _scaffoldKey,
  drawer: NavigationDrawer(
    selectedIndex: _drawerSelectedIndex,
    onDestinationSelected: (index) {
      setState(() => _drawerSelectedIndex = index);
      Navigator.pop(context); // 选中后自动关闭抽屉
    },
    children: const [
      Padding(
        padding: EdgeInsets.fromLTRB(28, 16, 16, 10),
        child: Text('导航菜单'),
      ),
      NavigationDrawerDestination(
        icon: Icon(Icons.home_outlined),
        selectedIcon: Icon(Icons.home),
        label: Text('首页'),
      ),
      NavigationDrawerDestination(
        icon: Icon(Icons.person_outlined),
        selectedIcon: Icon(Icons.person),
        label: Text('个人中心'),
      ),
      NavigationDrawerDestination(
        icon: Icon(Icons.settings_outlined),
        selectedIcon: Icon(Icons.settings),
        label: Text('设置'),
      ),
    ],
  ),
  body: Row(
    children: [
      // 上述定义的NavigationRail组件
      NavigationRail(...),
      const VerticalDivider(thickness: 1, width: 1),
      // 主内容展示区域
      Expanded(
        child: Center(child: Text('当前导航栏选中索引：$_selectedRailIndex')),
      ),
    ],
  ),
)

方案二：传统Drawer组件（兼容低版本Flutter）

通过自定义列表项实现类似效果：

drawer: Drawer(
  child: ListView(
    padding: EdgeInsets.zero,
    children: [
      const DrawerHeader(
        decoration: BoxDecoration(color: Color(0xFF6200EE)),
        child: Text('我的应用', style: TextStyle(color: Colors.white, fontSize: 20)),
      ),
      ListTile(
        leading: const Icon(Icons.home),
        title: const Text('首页'),
        selected: _drawerSelectedIndex == 0,
        onTap: () {
          setState(() => _drawerSelectedIndex = 0);
          Navigator.pop(context);
        },
      ),
      ListTile(
        leading: const Icon(Icons.person),
        title: const Text('个人中心'),
        selected: _drawerSelectedIndex == 1,
        onTap: () {
          setState(() => _drawerSelectedIndex = 1);
          Navigator.pop(context);
        },
      ),
    ],
  ),
)

注意事项 #

• 必须将Scaffold的key属性绑定到定义的_scaffoldKey，否则无法触发抽屉开关
• 使用NavigationDrawer需确保Flutter SDK版本≥3.13，否则需升级
• 可根据需求自定义抽屉的头部样式、列表项图标及配色，适配应用整体设计

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