【Flutter】导航组件 NavigationRail 的用法简介

​​Material Design 3 定义了三种导航模式，其用法和对应的 Flutter 组件如下所示：

MD3 导航	Flutter 组件	用途
Navigation bar	BottomNavigationBar	小型屏（宽度小于640）
Navigation drawer	Drawer	大型屏（宽度大于960）
Navigation rail	NavigationRail	中型屏（宽度介于640和960之间）

这篇博文要介绍的是 NavigationRail 的用法，它主要用于宽度介于640到960之间的中型屏，展现形式如下（最左侧的竖长条）：

从设计规范的角度来讲，导航数量最好控制在 3 到 7 个。

如果超出最大数量，可以在顶部放一个菜单按钮，点击后弹出用模态对话框展示的二级导航。

另外，Navigation rail 顶部也可以放置 FAB，用于凸显产品最核心的导航目的地：

顶部还可以放置 Logo，但做设计时一定要注意，不要给用户造成「这是个按钮」的错觉。

以上是我们从设计层面做出的解读，下面我们从代码层面看一下它的具体用法。

我们知道，Flutter 针对不同屏幕大小内置了三种导航组件：

• NavigationRail => 中型屏（宽度介于 640 ~ 960 之间）
• BottomNavigationBar => 小型屏（宽度小于 640）
• Drawer => 大型屏（宽度大于 960）

这三种组件一般会配合 Scaffold 一起使用，为了让导航组件能够根据屏幕尺寸进行动态调整，我们来实现一个「自适应」的 Scaffold。

步骤1：新建一个 dart 源文件，命名为 adaptive_scaffold.dart。

步骤2：定义两个查询屏幕类型的小函数：

bool _isLargeScreen(BuildContext context) {
   
  return MediaQuery.of(context).size.width > 960.0;
}

bool _isMediumScreen(BuildContext context) {
   
  return MediaQuery.of(context).size.width > 640.0;
}

步骤3：定义一个表示导航目的地的结构体 AdaptiveScaffoldDestination

class AdaptiveScaffoldDestination {
   
  // 标题
  final String title;

  // 图标
  final IconData icon;

  const AdaptiveScaffoldDestination({
   
    required this.title,
    required this.