案例概述

弹出菜单（PopupMenu）是一种常见的交互方式，用于显示一组相关的操作选项。本案例展示了如何创建各种弹出菜单效果。

核心概念

1. PopupMenuButton

PopupMenuButton 是一个按钮，点击时显示弹出菜单。

2. 菜单项

通过 PopupMenuItem 定义菜单项。

3. 菜单分隔符

通过 PopupMenuDivider 分隔菜单项。

代码详解

示例 1：基础弹出菜单

class BasicPopupMenuExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return PopupMenuButton<String>(
      onSelected: (value) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text('选择了: $value')),
        );
      },
      itemBuilder: (context) => [
        const PopupMenuItem(value: '选项1', child: Text('选项1')),
        const PopupMenuItem(value: '选项2', child: Text('选项2')),
        const PopupMenuItem(value: '选项3', child: Text('选项3')),
      ],
    );
  }
}

代码解释： 这是最简单的弹出菜单。点击按钮显示菜单，选择菜单项时触发 onSelected 回调。

示例 2：图标菜单

class IconMenuExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return PopupMenuButton<String>(
      icon: const Icon(Icons.more_vert),
      onSelected: (value) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text('操作: $value')),
        );
      },
      itemBuilder: (context) => [
        const PopupMenuItem(value: '编辑', child: Text('编辑')),
        const PopupMenuItem(value: '删除', child: Text('删除')),
        const PopupMenuItem(value: '分享', child: Text('分享')),
      ],
    );
  }
}

代码解释： 这个示例展示了图标菜单。使用 icon 参数显示图标按钮。

示例 3：自定义菜单项

class CustomMenuItemsExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return PopupMenuButton<String>(
      onSelected: (value) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text('选择了: $value')),
        );
      },
      itemBuilder: (context) => [
        PopupMenuItem(
          value: '选项1',
          child: Row(
            children: [
              const Icon(Icons.edit),
              const SizedBox(width: 8),
              const Text('编辑'),
            ],
          ),
        ),
        PopupMenuItem(
          value: '选项2',
          child: Row(
            children: [
              const Icon(Icons.delete),
              const SizedBox(width: 8),
              const Text('删除'),
            ],
          ),
        ),
      ],
    );
  }
}

代码解释： 这个示例展示了自定义菜单项。可以在菜单项中放置任何 Widget。

示例 4：禁用菜单项

class DisabledMenuItemsExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return PopupMenuButton<String>(
      onSelected: (value) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text('选择了: $value')),
        );
      },
      itemBuilder: (context) => [
        const PopupMenuItem(value: '选项1', child: Text('选项1')),
        const PopupMenuItem(
          enabled: false,
          child: Text('禁用选项'),
        ),
        const PopupMenuItem(value: '选项3', child: Text('选项3')),
      ],
    );
  }
}

代码解释： 这个示例展示了禁用菜单项。通过 enabled 参数控制菜单项是否可用。

示例 5：菜单分隔符

class MenuDividerExample extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return PopupMenuButton<String>(
      onSelected: (value) {
        ScaffoldMessenger.of(context).showSnackBar(
          SnackBar(content: Text('选择了: $value')),
        );
      },
      itemBuilder: (context) => [
        const PopupMenuItem(value: '编辑', child: Text('编辑')),
        const PopupMenuItem(value: '删除', child: Text('删除')),
        const PopupMenuDivider(),
        const PopupMenuItem(value: '分享', child: Text('分享')),
        const PopupMenuItem(value: '关于', child: Text('关于')),
      ],
    );
  }
}

代码解释： 这个示例展示了菜单分隔符。通过 PopupMenuDivider 分隔不同类型的菜单项。

高级话题

1. 动态/响应式设计

根据屏幕大小调整菜单。

2. 动画与过渡

自定义菜单出现动画。

3. 搜索/过滤/排序

动态生成菜单项。

4. 选择与批量操作

支持多选菜单。

5. 加载与缓存

异步加载菜单项。

6. 键盘导航

支持键盘快捷键。

7. 无障碍支持

提供无障碍支持。

8. 样式自定义

自定义菜单样式。

9. 数据持久化/导出

保存菜单状态。

10. 单元测试与集成测试

测试菜单功能。

PC 端适配要点

• 支持右键菜单
• 提供清晰的菜单项
• 自动调整位置避免超出屏幕

实际应用场景

• 更多操作：显示额外操作
• 上下文菜单：右键菜单
• 选项菜单：选择选项
• 工具菜单：工具选项

扩展建议

• 学习高级菜单库
• 研究性能优化
• 探索自定义菜单
• 集成快捷键库

总结

弹出菜单是展示操作选项的有效方式。通过灵活使用 PopupMenuButton，可以创建各种菜单效果。

欢迎加入开源鸿蒙跨平台社区：https://openharmonycrossplatform.csdn.net