Flutter开发：如何为PopupMenuButton弹出菜单添加关闭图标？

PopupMenuButton的itemBuilder会按返回列表的顺序从上到下渲染菜单项，直接在业务菜单项前插入自定义头部项即可实现需求，不需要修改组件源码。

• 头部项用PopupMenuItem包裹，设置enabled: false避免触发onSelected回调，可自定义高度适配布局
• 头部项内部通过Spacer组件占位，把关闭图标推到行布局最右侧
• 点击关闭图标时调用Navigator.pop(context)即可主动收起弹出菜单

修改后的完整代码如下：

PopupMenuButton<String>(
  child: SizedBox(
    child: ....
  ),
  onSelected: (value) {},
  itemBuilder: (BuildContext context) {
    final List<PopupMenuEntry<String>> menuItems = [];

    // 插入带关闭按钮的头部项
    menuItems.add(
      PopupMenuItem<String>(
        enabled: false,
        height: 40, // 可根据UI需求调整头部高度
        padding: const EdgeInsets.symmetric(horizontal: 16),
        child: Row(
          children: [
            // 若需要头部左侧展示标题，可在此处添加Text组件
            const Spacer(), // 占满剩余空间，将关闭图标推到最右侧
            GestureDetector(
              onTap: () => Navigator.pop(context),
              child: const Icon(
                Icons.close,
                size: 20,
                // 可按需设置图标颜色、点击水波纹效果
              ),
            )
          ],
        ),
      )
    );

    // 可选：添加分割线区分头部和菜单项
    // menuItems.add(const PopupMenuDivider(height: 1));

    // 追加原有业务菜单项
    menuItems.addAll(
      list!.map((notification) {
        return custom_popup_menu.PopupMenuItem<String>(
          value: someValue,
          child: SizedBox(
            child: Column(
              children: [
                const Divider(
                  thickness: 1,
                  color: CustomColor.blue_color,
                ),
                Text(
                  'some text',
                  style: TextStyle(
                    fontWeight: notification.readOn == null
                        ? FontWeight.w900
                        : FontWeight.normal,
                  ),
                ),
              ],
            ),
          ),
        );
      }).toList()
    );

    return menuItems;
  },
)

如果需要调整关闭图标的点击区域、水波纹效果，可以把GestureDetector替换为IconButton组件，按需调整内边距即可。

内容的提问来源于stack exchange，提问作者who-aditya-nawandar