如何在 flutter 中创建带有动态数据的 PopUpMenu？

Question

我想用动态数据显示 PopupMenu，这些数据是我从 API 响应中获得的。我尝试在 PopupMenu 子项中使用 listview.builder 但它不起作用。

我的 showmenu() 代码

void showMemberMenu() async {
    await showMenu(
      context: context,
      position: RelativeRect.fromLTRB(200, 150, 100, 100),
      items: [
        PopupMenuItem(
          value: 1,
          child: Text(
            "ROHIT",
            style: TextStyle(
                fontSize: 15.sp,
                fontWeight: FontWeight.bold,
                fontFamily: 'Roboto',
                color: green3),
          ),
        ),
        PopupMenuItem(
          value: 2,
          child: Text(
            "REKHA",
            style: TextStyle(
                fontSize: 15.sp,
                fontWeight: FontWeight.bold,
                fontFamily: 'Roboto',
                color: green3),
          ),
        ),
        PopupMenuItem(
          value: 3,
          child: Text(
            "DHRUV",
            style: TextStyle(
                fontSize: 15.sp,
                fontWeight: FontWeight.bold,
                fontFamily: 'Roboto',
                color: green3),
          ),
        ),
      ],
      elevation: 8.0,
    ).then((value) {
      if (value != null) print(value);
    });
  }

请帮助摆脱这个问题。

Answer 1

您可以使用 List.generate 方法使用从 API 响应中获取的现有列表来生成列表的动态长度。

下面是如何实现它的示例。

  void showMemberMenu() async {
    final List<String> popList = ['ROHIT', 'REKHA', 'DHRUV'];
    await showMenu(
      context: context,
      position: RelativeRect.fromLTRB(200, 150, 100, 100),
      items: List.generate(
        popList.length,
        (index) => PopupMenuItem(
          value: 1,
          child: Text(
            popList[index],
            style: TextStyle(
              fontSize: 15,
              fontWeight: FontWeight.bold,
              fontFamily: 'Roboto',
            ),
          ),
        ),
      ),
      elevation: 8.0,
    ).then((value) {
      if (value != null) print(value);
    });
  }

我添加了final List; popList = ['ROHIT', 'REKHA', 'DHRUV'];
仅用于测试目的，您可以将其替换为您的列表
您从 API 响应中获得。

Answer 2

试试这个：

调用api并将值放入PopupMenuItem

class PopupMenu {
 PopupMenu({@required this.title, @required this.onTap});

 final String title;
 final VoidCallback onTap;

 static PopupMenuButton<String> createPopup(List<PopupMenu> popupItems) {
 return PopupMenuButton<String>(
  onSelected: (value) {
    popupItems.firstWhere((e) => e.title == value).onTap();
  },
  itemBuilder: (context) => popupItems
      .map((item) => PopupMenuItem<String>(
            value: item.title,
            child: Text(
              item.title,
            ),
          ))
      .toList(),
    );
   }
 }

Answer 3

你可以尝试这样做：

https://dartpad.dev/?id=a3f9002a37cbacc2cfae46174cbd2eba

您可以添加任何状态管理来替换 FutureBuilder，但是这是合乎逻辑的方法。

我希望它有帮助。