Flutter 中使用图标的下拉列表答案

【问题标题】：Drop Down List in Flutter using an IconFlutter 中使用图标的下拉列表
【发布时间】：2020-06-06 17:32:44
【问题描述】：

我想在 Flutter 中为特定图标实现下拉列表，并在 AppBar 中对其应用 GestureDetector。它的代码是，

AppBar(
   actions: <Widget>[
      Padding(
        padding: const EdgeInsets.fromLTRB(4.0, 4.0, 0, 4.0),
        child: Image.network(
            "Some Image Url"),
      ),
   GestureDetector(
        onTap: () {
//       I want to implement the Dropdown List here.
        },
        child: Padding(
          padding: const EdgeInsets.all(0.0),
          child: Icon(Icons.arrow_drop_down),
        ),
      ),
     ],
    )

【问题讨论】：

在 Flutter 中不使用 DropdownButton 的下拉列表是什么意思？你在找ExpansionTile吗？
一个下拉列表，通过单击此图标进行选择。
我尝试使用下拉按钮，但它占用空间并且 UI 看起来不太好，所以我只想用这个图标来实现。
如果不使用dropDownButton，我认为您无法做到这一点。
如果您自定义它，您可以做更多的事情。查看详情here。

标签： flutter dart drop-down-menu icons appbar

【解决方案1】：

最简单的方法是使用PopupMenuButton。示例代码：

AppBar(
    title: Text('Awesome appbar'),
    actions: [
      IconButton(
        icon: Icon(MdiIcons.pencil),
        iconSize: 21,
        onPressed: () {
          print('I want to edit');
        },
      ),
      PopupMenuButton<String>(
        icon: Icon(Icons.filter_list),
        onSelected: (String result) {
          switch (result) {
            case 'filter1':
              print('filter 1 clicked');
              break;
            case 'filter2':
              print('filter 2 clicked');
              break;
            case 'clearFilters':
              print('Clear filters');
              break;
            default:
          }
        },
        itemBuilder: (BuildContext context) => <PopupMenuEntry<String>>[
          const PopupMenuItem<String>(
            value: 'filter1',
            child: Text('Filter 1'),
          ),
          const PopupMenuItem<String>(
            value: 'filter2',
            child: Text('Filter 2'),
          ),
          const PopupMenuItem<String>(
            value: 'clearFilters',
            child: Text('Clear filters'),
          ),
        ],
      ),
      PopupMenuButton<String>(
        onSelected: (String result) {
          switch (result) {
            case 'option1':
              print('option 1 clicked');
              break;
            case 'option2':
              print('option 2 clicked');
              break;
            case 'delete':
              print('I want to delete');
              break;
            default:
          }
        },
        itemBuilder: (BuildContext context) => <PopupMenuEntry<String>>[
          const PopupMenuItem<String>(
            value: 'option1',
            child: Text('Option 1'),
          ),
          const PopupMenuItem<String>(
            value: 'option2',
            child: Text('Option 2'),
          ),
          const PopupMenuItem<String>(
            value: 'delete',
            child: Text('Delete'),
          ),
        ],
      )
    ],
  );

【讨论】：

【解决方案2】：

我猜Popup Menu Button 可能是你想要的。

【讨论】：

即使是弹出菜单按钮也会占用空间对吧？那么如何在 Icon 上实现呢？