Flutter中如何将部分NavigationRailDestination移至菜单底部？

问题需求 #

需要将NavigationRail中的「Mon Compte」和「Déconexion」选项固定在导航栏底部，在「Factures」之后添加可扩展空白空间，同时保留所有导航项的页面跳转功能。

实现思路 #

NavigationRail的destinations属性仅接受NavigationRailDestination类型列表，无法直接插入空白Widget，因此通过以下方式实现：

• 将原导航项拆分为顶部核心导航组和底部功能组
• 添加一个透明不可交互的占位Destination填充中间空间，利用布局特性自动占满剩余高度
• 调整索引计算逻辑，适配新增的占位项，避免点击占位项触发导航

修改后的完整代码 #

class ScaffoldWithNavigationRail extends StatefulWidget {
  final Widget child;

  ScaffoldWithNavigationRail({required this.child, Key? key}) : super(key: key);

  @override
  State<ScaffoldWithNavigationRail> createState() => _ScaffoldWithNavigationRailState();
}

class _ScaffoldWithNavigationRailState extends State<ScaffoldWithNavigationRail> {
  // 拆分顶部核心导航项
  static const _topTabs = [
    ScaffoldWithNavigationRailDestination(
      icon: Icon(Icons.wine_bar),
      initialLocation: "/degustations",
      label: Text("Dégustation")
    ),
    ScaffoldWithNavigationRailDestination(
        icon: Icon(Icons.favorite),
        initialLocation: "/mes_degustations",
        label: Text("Mes dégustations")
    ),
    ScaffoldWithNavigationRailDestination(
        icon: Icon(Icons.payments),
        initialLocation: "/factures",
        label: Text("Factures")
    ),
  ];

  // 拆分底部功能导航项
  static const _bottomTabs = [
    ScaffoldWithNavigationRailDestination(
        icon: Icon(Icons.person_2_rounded),
        initialLocation: "/mon_compte",
        label: Text("Mon Compte")
    ),
    ScaffoldWithNavigationRailDestination(
        icon: Icon(Icons.logout_outlined),
        initialLocation: "/log_out",
        label: Text("Déconexion")
    ),
  ];

  // 透明占位项：填充中间空白，不可见且无交互意义
  static final _placeholderDestination = ScaffoldWithNavigationRailDestination(
    icon: Icon(Icons.transparent),
    initialLocation: "",
    label: SizedBox.shrink(),
  );

  // 合并所有导航项（顶部+占位+底部）
  List<ScaffoldWithNavigationRailDestination> get _allDestinations => [
    ..._topTabs,
    _placeholderDestination,
    ..._bottomTabs,
  ];

  // 计算当前选中索引，适配占位项的位置偏移
  int get _currentIndex {
    final location = GoRouter.of(context).location;
    // 先检查是否属于顶部导航项
    final topIndex = _topTabs.indexWhere((t) => location.startsWith(t.initialLocation));
    if (topIndex != -1) return topIndex;
    
    // 再检查是否属于底部导航项，索引需要加上顶部数量+1（占位项的位置）
    final bottomIndex = _bottomTabs.indexWhere((t) => location.startsWith(t.initialLocation));
    if (bottomIndex != -1) return _topTabs.length + 1 + bottomIndex;
    
    // 默认选中第一个导航项
    return 0;
  }

  // 处理导航项点击，跳过占位项的无效点击
  void _onItemTapped(BuildContext context, int tabIndex) {
    // 点击占位项时直接返回，不触发导航
    if (tabIndex == _topTabs.length) return;
    
    // 匹配实际对应的导航项
    final destination = tabIndex < _topTabs.length 
        ? _topTabs[tabIndex] 
        : _bottomTabs[tabIndex - (_topTabs.length + 1)];
    
    // 避免重复跳转
    if (GoRouter.of(context).location != destination.initialLocation) {
      context.go(destination.initialLocation);
    }
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Row(
        mainAxisSize: MainAxisSize.min,
        children: [
          SafeArea(
            child: NavigationRail(
              elevation: 10,
              extended: true,
              destinations: _allDestinations,
              selectedIndex: _currentIndex,
              onDestinationSelected: (index) => _onItemTapped(context, index),
              // 可选：优化样式，确保占位项无视觉干扰
              selectedLabelTextStyle: TextStyle(color: Theme.of(context).primaryColor),
              unselectedLabelTextStyle: TextStyle(color: Colors.grey),
            ),
          ),
          Expanded(child: widget.child)
        ],
      ),
    );
  }
}

关键说明 #

1. 占位项处理：使用Icons.transparent和SizedBox.shrink()确保占位项完全不可见，同时符合NavigationRailDestination的类型要求
2. 索引适配：底部导航项的实际索引需要加上顶部项数量+1（占位项的位置），保证路由跳转对应正确页面
3. 点击拦截：在_onItemTapped中判断点击的是占位项时直接返回，避免无效导航操作
4. 样式优化：通过调整文本样式，进一步消除占位项的视觉存在感

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