下拉按钮

pull_down_button 是对 Flutter 的 PopupMenuButton 的重构，使其样式类似于 iOS 14+ 的 弹出和下拉 按钮，并提供了一些额外的自定义选项。

Flutter 可用性

由于该包使用了 Flutter 的新特性 ThemeExtension 进行主题设置，因此最低支持版本为稳定版 3.0.0 或 Beta 版 2.13.0-0。

PullDownButton

PullDownButton 是一个用于显示下拉菜单的小部件。与 PopupMenuButton 不同，PullDownButton 允许通过 buttonBuilder 构建函数对用于显示下拉菜单的按钮进行更好的自定义。

当下拉菜单打开时，调用该菜单的按钮将具有较低的透明度。

PullDownButton(
  itemBuilder: (context) => [
    PullDownMenuItem(
      title: 'Menu item',
      onTap: () => action(),
    ),
    const PullDownMenuDivider(),
    PullDownMenuItem(
      title: 'Menu item 2',
      onTap: () => action2(),
    ),
  ],
  position: PullDownMenuPosition.under,
  buttonBuilder: (context, showMenu) => CupertinoButton(
    onPressed: showMenu,
    padding: EdgeInsets.zero,
    child: const Icon(CupertinoIcons.ellipsis_circle),
  ),
);

backgroundColor 通常具有 0.7-0.8 范围内的不透明度，以便菜单具有模糊效果。

PullDownMenuPosition

PullDownButton 定位其下拉菜单的方式。

可用选项

• over
• under
• above

PullDownMenuItem

PullDownMenuItem 是一个用于创建 Cupertino 风格下拉菜单项的小部件。

PullDownMenuItem(
  title: 'Add to favourites',
  onTap: () => action(),
  icon: CupertinoIcons.star,
),

SelectablePullDownMenuItem

SelectablePullDownMenuItem 是一个用于创建具有选中状态的 Cupertino 风格下拉菜单项的小部件。

SelectablePullDownMenuItem(
  title: 'Order by size',
  selected: true,
  onTap: () => action(),
  icon: CupertinoIcons.chevron_down,
),

笔记

根据 指南，如果菜单项包含至少一个可点击的 SelectablePullDownMenuItem 项，则所有 PullDownMenuItem 项也应为 SelectablePullDownMenuItem 类型（以插入额外的填充，使所有项具有相同的填充）。尽管如此，手动更改所有 PullDownMenuItem 项并非必需，它会自动完成。

SelectablePullDownMenuItem 使用了 PullDownMenuItem 的所有参数以及一些 SelectablePullDownMenuItem 特有的参数。

PullDownMenuDivider

PullDownMenuDivider 是一个用于创建 Cupertino 风格下拉菜单分隔线（细或粗）的小部件。

const PullDownMenuDivider(),

或用于创建粗分隔线。

const PullDownMenuDivider.large(),

还有一个方便的方法可以包装多个带有细分隔线的菜单项。

...PullDownMenuDivider.wrapWithDivider([
  PullDownMenuItem(
    title: 'Menu item',
    onTap: () => action(),
  ),
  PullDownMenuItem(
    title: 'Menu item 2',
    onTap: () => action2(),
  ),
]),

largeDividerColor 通常比 dividerColor 更浅。

PullDownMenuTitle

PullDownMenuTitle 是一个用于创建 Cupertino 风格下拉菜单标题（通常在菜单顶部）的小部件。

const PullDownMenuTitle(title: Text('Pull-down menu')),

主题化

此包还提供了额外的自定义选项。默认情况下，使用 iOS15 主题，但也可以通过小部件参数（参见上文）或 PullDownButtonTheme 主题扩展来覆盖默认设置。

默认主题

浅色主题	深色主题

PullDownButtonTheme

用法

要使用 PullDownButtonTheme，请像这样在您的 ThemeData 中定义它，如果定义了，PullDownButton 将会自动使用。

ThemeData(
  ...,
  extensions: [
    PullDownButtonTheme(
      backgroundColor: Colors.grey,
      iconSize: 24,
      dividerColor: Colors.black,
    ),
  ],
),

backgroundColor 通常具有 0.7-0.8 范围内的不透明度，以便菜单具有模糊效果。largeDividerColor 通常比 dividerColor 更浅。

以下是使用 PullDownButtonTheme 结合 Material 3 颜色方案颜色和来自 Material 3 菜单规范 的文本样式的示例。

自定义 Material 3 浅色主题	自定义 Material 3 深色主题

贡献

欢迎您为本项目做出贡献。

请在 issue tracker 提交功能请求和错误报告。

如果您自己修复了错误或实现了功能，请随时发送 pull request。

GitHub

查看 Github