Flutter技术问询：如何制作包含自定义Widget的弹出菜单？

要在Flutter弹出菜单中添加无需处理点击事件的自定义Widget，核心是利用PopupMenuEntry类——PopupMenuButton的itemBuilder要求返回List<PopupMenuEntry<T>>，我们可以通过自定义PopupMenuEntry子类或直接使用其匿名实例来实现无交互的自定义内容。

方法1：自定义通用无点击Popup条目 #

先封装一个可复用的自定义条目类，方便快速添加任意无交互Widget：

class NonClickablePopupEntry extends PopupMenuEntry<Void> {
  final Widget child;
  final double height;

  NonClickablePopupEntry({required this.child, this.height = 48});

  @override
  bool represents(void value) => false; // 标记为无选中值，不触发onSelected

  @override
  State<NonClickablePopupEntry> createState() => _NonClickablePopupEntryState();
}

class _NonClickablePopupEntryState extends State<NonClickablePopupEntry> {
  @override
  Widget build(BuildContext context) {
    return widget.child;
  }
}

方法2：直接在PopupMenuButton中使用 #

在PopupMenuButton的itemBuilder里混合普通可点击条目和自定义无点击内容：

PopupMenuButton<String>(
  itemBuilder: (context) => [
    // 普通可点击菜单项
    const PopupMenuItem(
      value: 'setting',
      child: Row(
        children: [Icon(Icons.settings), SizedBox(width: 8), Text('设置')],
      ),
    ),
    // 自定义无点击标题
    NonClickablePopupEntry(
      height: 36,
      child: Padding(
        padding: const EdgeInsets.symmetric(horizontal: 16, vertical: 8),
        child: Text(
          '其他功能',
          style: TextStyle(fontWeight: FontWeight.bold, color: Colors.grey[600]),
        ),
      ),
    ),
    // 另一个可点击选项
    const PopupMenuItem(
      value: 'help',
      child: Row(
        children: [Icon(Icons.help), SizedBox(width: 8), Text('帮助中心')],
      ),
    ),
    // 直接用PopupMenuEntry快速实现简单无点击内容
    PopupMenuEntry<String>(
      height: 40,
      child: Container(
        padding: const EdgeInsets.symmetric(horizontal: 16),
        child: Text('v1.0.0', style: TextStyle(color: Colors.blueGrey)),
      ),
    ),
  ],
  onSelected: (value) {
    // 仅处理可点击条目的选中事件
    if (value == 'setting') {
      // 跳转到设置页
    } else if (value == 'help') {
      // 打开帮助中心
    }
  },
  child: const Icon(Icons.more_vert),
)

关键说明 #

• represents方法返回false，表示该条目不对应任何选中值，不会触发PopupMenuButton的onSelected回调
• 可以根据需求自定义无点击Widget的布局，比如图片、多行文本、卡片等，直接作为child传入即可
• 如果只是简单的分隔或文本，也可以直接使用PopupMenuEntry的匿名实例，无需单独封装类

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