定义和访问列表以构建包含图标的弹出菜单按钮的内容

Question

在 _HomePageState 中，我有一个 PopupMenuButton 定义为

          PopupMenuButton(
            icon: Icon(Icons.more_vert),
            itemBuilder: (BuildContext context) {
              return <PopupMenuItem>[
                PopupMenuItem(
                  onTap: () {
                    BlocProvider.of<BlocAuth>(context)
                        .add(Setting8EventAuth());
                  },
                  child: ListTile(
                    leading: Icon(Icons.settings),
                    title: Text('Settings'),
                  ),
                ),
                PopupMenuItem(
                  onTap: () {
                    BlocProvider.of<BlocAuth>(context)
                        .add(SignOut8EventAuth());
                  },
                  child: ListTile(
                    leading: Icon(Icons.settings),
                    title: Text('Logout'),
                  ),
                ),
              ];
            },

我想设置与内容 PopupMenuButton 相关的项目列表并调用该列表，而不是为每个项目乘以相同的代码。

仍然处于 _HomePageState（尽管最终我想将其移到其他地方），基于

Flutter - PopupMenuButton - 从列表中添加项目后手动添加项目我已经定义了

  List<PopupMenuContent> items = [
    PopupMenuContent(
      name: 'Profile',
      iconFile: 'person.jpg',
      event: 'Profile8EventAuth()',
    ),
    PopupMenuContent(
      name: 'Settings',
      iconFile: 'settings.jpg',
      event: 'Settings8EventAuth()',
    ),
    PopupMenuContent(
      name: 'Logout',
      iconFile: 'logout.jpg',
      event: 'SignOut8EventAuth()',
    ),
  ];

我希望用接近的东西在 PopupMenuButton 中调用

          PopupMenuButton(
            icon: Icon(Icons.more_vert),
            itemBuilder: (BuildContext context) {
              return items.map((item) {
                return PopupMenuItem(
                  child: ListTile(
                    leading: Icon(Icons.${item.iconFile}),
                    title: Text(item.name),
                  ),
                  onTap: () {
                    BlocProvider.of<BlocAuth>(context).add(item.event as AbstEventAuth);
                  },
                );
              }).toList();
            },
          )

我不确定 BlocProvider 中的转换是否有效，但第一个问题是我收到的错误消息与

leading: Icon(Icons.${item.iconFile}),

有关。 尽管不是那么整洁，我可以在 2 个返回之间设置

String itemIF = item.iconFile;

，但随后我无法将其插入到

leading: Icon(Icons.xxxAboutHerexxxx),

中。

有什么建议吗？

Answer 1

使用 IconData 作为项目列表中的图标来定义图标而不是字符串。

重新定义 PopupMenuContent 类

class PopupMenuContent {
  final String name;
  final IconData iconData;
  final Function event;

  PopupMenuContent({required this.name, required this.iconData, required this.event});
}

现在相应地列出清单

 List<PopupMenuContent> items = [
    PopupMenuContent(
      name: 'Profile',
      iconData: Icons.person,
      event: () {
        BlocProvider.of<BlocAuth>(context).add(Profile8EventAuth());
      },
    ),
    PopupMenuContent(
      name: 'Settings',
      iconData: Icons.settings,
      event: () {
        BlocProvider.of<BlocAuth>(context).add(Settings8EventAuth());
      },
    ),
    PopupMenuContent(
      name: 'Logout',
      iconData: Icons.logout,
      event: () {
        BlocProvider.of<BlocAuth>(context).add(SignOut8EventAuth());
      },
    ),
  ];

build fn

@override
  Widget build(BuildContext context) {
    return PopupMenuButton(
      icon: Icon(Icons.more_vert),
      itemBuilder: (BuildContext context) {
        return items.map((item) {
          return PopupMenuItem(
            child: ListTile(
              leading: Icon(item.iconData),
              title: Text(item.name),
            ),
            onTap: () {
              item.event();
            },
          );
        }).toList();
      },
    );
  }