navigation_drawer_menu

Flutter Material Design 导航抽屉菜单

导航抽屉 是一种常见的自适应菜单UI模式。 Material Design 文档对菜单的行为进行了规范，但这种模式并非Material Design特有。该模式包含一个基本的汉堡包菜单，但不限于小屏幕。此菜单模式适用于所有屏幕尺寸。在较宽的屏幕上，您会看到图标和文本；较小的屏幕将仅显示图标；在手机上，菜单在正常使用期间会消失，并在汉堡包图标处滑入。

Hamburger Menu

Beta

此小部件处于Beta阶段，公共接口可能会发生变化

示例

该示例旨在实现上面文档介绍的导航抽屉模式。这是一个正在进行中的项目，长期目标是符合Material Design文档中的行为。欢迎提交修复行为的Pull Request。该示例适用于所有设备类型：桌面和平板电脑（横屏、竖屏）、手机和Web。尝试调整窗口宽度以查看行为如何变化。大部分行为已在示例中实现。目标是创建一个新的小部件，用于替换 Scaffold，并让您能够非常快速地启动具有此功能的新应用。

注意：如果您只是想要一个简单的抽屉菜单，而不希望它自适应屏幕，请查看此处。

Hamburger Menu

Hamburger Menu

Hamburger Menu

运行示例

  • 在Visual Studio Code中打开根文件夹
  • 打开终端窗口
  • 通过在根文件夹（非示例文件夹）中运行以下命令来添加平台
  • 点击运行 -> 开始调试

flutter create example --platforms=windows,macos,linux

flutter create --platforms=web

flutter create --platforms=android

NavigationDrawerMenu

这是一个基本功能类似于 ListView 的小部件。它用于消除构建菜单所需的一些样板代码，并允许您在菜单中放置任意大小的间隔符和标题。示例使用了这组定义。如果您不想使用此小部件，也可以改用 ListView。

final menuItems = [
  MenuItemContent(
      MenuItemDefinition("Alarm", alarmValueKey, iconData: Icons.access_alarm)),
  MenuItemContent(MenuItemDefinition("Todo", todoValueKey,
      iconData: Icons.ad_units_rounded)),
  MenuItemContent.widget(const SizedBox(
    height: 30,
  )),
  MenuItemContent(MenuItemDefinition("Photo", photoValueKey,
      iconData: Icons.add_a_photo_outlined))
];

GitHub

查看 Github