Flutter，点击图标后，显示下拉条目选框

这里给出两种方式，一种是点击时没有动画效果的Icon+GestureDetector，另一种是点击时带动画的Material Widget自带的IconButton。
第一种：

MouseRegion( // 用于鼠标移动到区域，出现小手
  cursor: SystemMouseCursors.click,
  child: Tooltip(
    message: "页面布局",
    preferBelow: false,
    child: GestureDetector(
      onTap: () {
        showMenu<String>(
          context: context,
          position: const RelativeRect.fromLTRB(420, 350, 400, 0), // 下拉菜单位置
          items: <PopupMenuEntry<String>>[
            const PopupMenuItem<String>(
              value: '单页面',
              child: Text('单页面'),
            ),
            const PopupMenuItem<String>(
              value: '两页面', 
              child: Text('两页面'),
            ),
            const PopupMenuItem<String>(
              value: '四页面',
              child: Text('四页面'),
            ),
            const PopupMenuItem<String>(
              value: '六页面',
              child: Text('六页面'),
            ),
            const PopupMenuItem<String>(
              value: '八页面',
              child: Text('八页面'),
            ),
          ],
        ).then((String? value) {
          if (value != null) {
            print("点击了按钮");
          } else {
            print("点击了：$value");
          }
        });
      },
      child: Container(
        width: 25,
        height: 20,
        child: const Icon(
          Icons.view_agenda_outlined,
          size: 25,
        ),
      ),
    ),
  ),
),
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51

第二种：

             IconButton(
                onPressed: (){
                  showMenu<String>(
                    context: context,
                    position: const RelativeRect.fromLTRB(420, 350, 400, 0), // 下拉菜单位置 .shift(const Offset(0, 50))
                    items: <PopupMenuEntry<String>>[
                      const PopupMenuItem<String>(
                        value: '单页面',
                        child: Text('单页面'),
                      ),
                      const PopupMenuItem<String>(
                        value: '两页面',
                        child: Text('两页面'),
                      ),
                      const PopupMenuItem<String>(
                        value: '四页面',
                        child: Text('四页面'),
                      ),
                      const PopupMenuItem<String>(
                        value: '六页面',
                        child: Text('六页面'),
                      ),
                      const PopupMenuItem<String>(
                        value: '八页面',
                        child: Text('八页面'),
                      ),
                    ],
                  ).then((String? value) {
                    if (value != null) {
                      print("点击了按钮");
                    } else {
                      print("点击了：$value");
                    }
                  });
                }, 
                icon: const Icon(Icons.view_agenda_outlined),
                tooltip: "页面布局",
                color: Colors.black,
              ),
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39