Flutter PopupMenuButton 如何在列表生成项后手动添加自定义菜单项

完全支持在遍历生成的菜单项后手动追加自定义项，无需修改原有subjects列表。
PopupMenuButton的itemBuilder返回值为List<PopupMenuEntry<T>>类型列表，除了承载可点击选项的PopupMenuItem，Flutter提供了专用的PopupMenuDivider组件作为菜单分割线，你可以通过Dart的展开运算符（...）直接拼接多段菜单项，即可实现“学科菜单+分割线+Sign Out”的效果。

推荐实现代码 #

仅需修改itemBuilder及对应点击逻辑即可，参考如下：

child: PopupMenuButton<Object>(
  color: const Color.fromARGB(255, 95, 115, 231),
  shape: RoundedRectangleBorder(
    borderRadius: BorderRadius.circular(10)
  ),
  onSelected: (value) {
    // 区分点击项类型走对应逻辑
    if (value is Subject) {
      _changeSubject(value);
    } else if (value == 'signOut') {
      // 此处写退出登录的业务逻辑
    }
  },
  itemBuilder: (BuildContext context) {
    return [
      // 展开遍历生成的原有学科菜单项
      ...subjects.map((Subject subject) {
        return PopupMenuItem<Subject>(
          value: subject,
          child: Text(subject.name),
        );
      }),
      // 追加分割线
      const PopupMenuDivider(
        height: 1,
      ),
      // 追加Sign Out自定义菜单项
      const PopupMenuItem<String>(
        value: 'signOut',
        child: Text('Sign Out'),
      ),
    ];
  },
),

可选实现方式 #

如果你不想修改PopupMenuButton的泛型定义，也可以给Sign Out菜单项单独配置onTap回调处理退出逻辑，不需要走统一的onSelected回调，示例代码如下：

// 保留原有PopupMenuButton<Subject>泛型无需修改
itemBuilder: (BuildContext context) {
  return [
    ...subjects.map((Subject subject) {
      return PopupMenuItem<Subject>(
        value: subject,
        child: Text(subject.name),
      );
    }),
    const PopupMenuDivider(),
    PopupMenuItem<Subject>(
      onTap: () {
        // 菜单点击后会自动关闭，加延迟避免路由冲突
        Future.delayed(
          Duration.zero,
          () {
            // 此处写退出登录的业务逻辑
          },
        );
      },
      child: const Text('Sign Out'),
    ),
  ];
},

说明：PopupMenuDivider默认带有上下间距，你可以通过height参数自定义间距大小，适配自己的UI设计。

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