Flutter 中使用图标的下拉列表

Question

我想在 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),
        ),
      ),
     ],
    )

Answer 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'),
          ),
        ],
      )
    ],
  );