如何在 Flutter 中自定义下拉按钮？

Question

如何在 Flutter 中存档此设计？

我需要自定义下拉按钮，如下截图：

如何在不更改下拉菜单上方标签的样式的情况下为选中的项目设置样式，为未选中的项目设置另一个样式？

如果有人能帮忙，那就太棒了

Answer 1

试试这个：

            PopupMenuButton<MenuItems>(
              child: Row(
                children: [
                  Text('Show Menu'),
                  Icon(
                    Icons.expand_more,
                    color: Colors.grey,
                  ),
                ],
              ),
              onSelected: (MenuItems result) {
                setState(() {
                  selection = result;
                });
              },
              itemBuilder: (BuildContext context) =>
                  <PopupMenuEntry<MenuItems>>[
                PopupMenuItem<MenuItems>(
                  value: MenuItems.one,
                  child: Row(
                    children: [
                      MenuItems.one == selectedItem
                          ? Row(
                              children: [
                                Container(
                                  width: 3,
                                  height: 16,
                                  color: Colors.red,
                                ),
                                SizedBox(
                                  width: 8,
                                ),
                              ],
                            )
                          : Container(),
                      Text(
                        'One',
                        style: TextStyle(
                          color: (MenuItems.one == selectedItem)
                              ? Colors.red
                              : null,
                        ),
                      ),
                    ],
                  ),
                ),
                PopupMenuItem<MenuItems>(
                  value: MenuItems.two,
                  child: Row(
                    children: [
                      MenuItems.two == selectedItem
                          ? Row(
                              children: [
                                Container(
                                  width: 3,
                                  height: 16,
                                  color: Colors.red,
                                ),
                                SizedBox(
                                  width: 8,
                                ),
                              ],
                            )
                          : Container(),
                      Text(
                        'Two',
                        style: TextStyle(
                          color: (MenuItems.two == selectedItem)
                              ? Colors.red
                              : null,
                        ),
                      ),
                    ],
                  ),
                ),
                PopupMenuItem<MenuItems>(
                  value: MenuItems.three,
                  child: Row(
                    children: [
                      MenuItems.three == selectedItem
                          ? Row(
                              children: [
                                Container(
                                  width: 3,
                                  height: 16,
                                  color: Colors.red,
                                ),
                                SizedBox(
                                  width: 8,
                                ),
                              ],
                            )
                          : Container(),
                      Text(
                        'Three',
                        style: TextStyle(
                          color: (MenuItems.three == selectedItem)
                              ? Colors.red
                              : null,
                        ),
                      ),
                    ],
                  ),
                ),
              ],
            ),
          ],
        ),