【Flutter 实战】菜单（Menu）功能

女爷i 2022-12-06 15:15 473阅读 0赞

> 老孟导读：今天介绍下Flutter中的**菜单功能**。

## PopupMenuButton ##

使用PopupMenuButton，点击时弹出菜单，用法如下：

PopupMenuButton<String>(
      itemBuilder: (context) {
        return <PopupMenuEntry<String>>[
          PopupMenuItem<String>(
            value: '语文',
            child: Text('语文'),
          ),
          PopupMenuItem<String>(
            value: '数学',
            child: Text('数学'),
          ),
          PopupMenuItem<String>(
            value: '英语',
            child: Text('英语'),
          ),
          PopupMenuItem<String>(
            value: '生物',
            child: Text('生物'),
          ),
          PopupMenuItem<String>(
            value: '化学',
            child: Text('化学'),
          ),
        ];
      },
    )

效果如下：

![20200914070845270.png][]

设置其初始值：

PopupMenuButton<String>(
      initialValue: '语文',
      ...
    )

设置初始值后，打开菜单后，设置的值将会高亮，效果如下：

![20200914070845564.png][]

获取用户选择了某一项的值，或者用户未选中，代码如下：

PopupMenuButton<String>(
      onSelected: (value){
        print('$value');
      },
      onCanceled: (){
        print('onCanceled');
      },
      ...
    )

`tooltip`是长按时弹出的提示，用法如下：

PopupMenuButton<String>(
      tooltip: 'PopupMenuButton',
      ...
    )

效果如下：

![20200914070845699.png][]

设置其阴影值、内边距和弹出菜单的背景颜色：

PopupMenuButton<String>(
      elevation: 5,
      padding: EdgeInsets.all(5),
      color: Colors.red,
      ...
    )

默认情况下，PopupMenuButton显示3个小圆点，我们也可以对齐进行设置，设置文字如下：

PopupMenuButton<String>(
      child: Text('学科'),
      ...
    )

`child`组件将会被InkWell包裹，点击弹出菜单，效果如下：

![20200914070845781.png][]

也可以设置其他图标：

PopupMenuButton<String>(
        icon: Icon(Icons.add),
        ...
    )

效果如下：

![20200914070845883.png][]

设置弹出菜单边框：

PopupMenuButton<String>(
      shape: RoundedRectangleBorder(
        side: BorderSide(
          color: Colors.red
        ),
        borderRadius: BorderRadius.circular(10)
      ),
        ...
    )

效果如下：

![20200914070845985.png][]

menu有一个非常重要的参数`Offset`，这个参数是控制菜单弹出的位置，通常情况下，菜单在当前按钮下面展示：

PopupMenuButton<String>(
      offset: Offset(0,100),
      itemBuilder: (context) {
        return <PopupMenuEntry<String>>[
          PopupMenuItem<String>(
            value: '语文',
            child: Text('语文'),
          ),
          PopupMenuItem<String>(
            value: '数学',
            child: Text('数学'),
          ),
        ];
      },
    )

![2020091407084680.png][]

`PopupMenuButton`的每一项都需要是`PopupMenuEntry`类型，`PopupMenuEntry`为抽象类，其子类有PopupMenuItem、PopupMenuDivider、CheckedPopupMenuItem。

### PopupMenuItem ###

构造函数为

![image-20200522160319731][]

参数说明：

*  value：当此项选中后，此值将会通过`onSelected`返回。
 *  enabled：此项是否可用。
 *  height：此项的高度
 *  textStyle：文本样式
 *  child：子控件。

用法如下：

PopupMenuButton<String>(
      onSelected: (value) {
        print('$value');
      },
      itemBuilder: (context) {
        return <PopupMenuEntry<String>>[
          PopupMenuItem<String>(
            value: '语文',
            enabled: false,
            child: Text('语文'),
          ),
          PopupMenuItem<String>(
            value: '数学',
            textStyle: TextStyle(color: Colors.red),
            child: Text('数学'),
          ),
          PopupMenuItem<String>(
            value: '英语',
            height: 100,
            child: Text('英语'),
          ),
        ];
      },
    )

![20200914070846283.png][]

### PopupMenuDivider ###

PopupMenuDivider是菜单分割线，用法如下：

PopupMenuButton<String>(
      onSelected: (value) {
        print('$value');
      },
      itemBuilder: (context) {
        return <PopupMenuEntry<String>>[
          PopupMenuItem<String>(
            value: '语文',
            child: Text('语文'),
          ),
          PopupMenuDivider(),
          PopupMenuItem<String>(
            value: '数学',
            child: Text('数学'),
          ),
        ];
      },
    )

![20200914070846372.png][]

PopupMenuDivider默认高度为16，注意这个高度并不是分割线的高度，而是分割线控件的高度，设置为50代码：

PopupMenuDivider(height: 50,),

![20200914070846461.png][]

### CheckedPopupMenuItem ###

CheckedPopupMenuItem是前面带是否选中的控件，本质就是一个ListTile，用法如下：

PopupMenuButton<String>(
      onSelected: (value) {
        print('$value');
      },
      itemBuilder: (context) {
        return <PopupMenuEntry<String>>[
          CheckedPopupMenuItem(
            value: '语文',
            checked: true,
            child: Text('语文'),
          ),
          CheckedPopupMenuItem(
            value: '数学',
            child: Text('数学'),
          ),
        ];
      },
    )

![20200914070846571.png][]

## showMenu ##

如果你看下`PopupMenuButton`的源码会发现，`PopupMenuButton`也是使用showMenu实现的，用法如下：

showMenu(
        context: context,
        position: RelativeRect.fill,
        items: <PopupMenuEntry>[
          PopupMenuItem(child: Text('语文')),
          PopupMenuDivider(),
          CheckedPopupMenuItem(
            child: Text('数学'),
            checked: true,
          ),
          PopupMenuDivider(),
          PopupMenuItem(child: Text('英语')),
        ]);

`position`参数表示弹出的位置，效果如下：

![20200914070846797.png][]

属性和`PopupMenuButton`基本一样，但使用`showMenu`需要我们指定位置，所以一般情况下，我们不会直接使用`showMenu`，而是使用`PopupMenuButton`，免去了计算位置的过程。

看下`PopupMenuButton`是如何计算的，有助于帮助我们理解：

final PopupMenuThemeData popupMenuTheme = PopupMenuTheme.of(context);
        final RenderBox button = context.findRenderObject();
        final RenderBox overlay = Overlay.of(context).context.findRenderObject();
        final RelativeRect position = RelativeRect.fromRect(
          Rect.fromPoints(
            button.localToGlobal(widget.offset, ancestor: overlay),
            button.localToGlobal(button.size.bottomRight(Offset.zero), ancestor: overlay),
          ),
          Offset.zero & overlay.size,
        );
        final List<PopupMenuEntry<T>> items = widget.itemBuilder(context);

## 交流 ##

老孟Flutter博客地址（330个控件用法）：[http://laomengit.com][http_laomengit.com]

欢迎加入Flutter交流群（微信：laomengit）、关注公众号【老孟Flutter】：

[20200914070845270.png]: /images/20221123/6edd6d6e144d4d889c9e7dfb4db1e242.png
[20200914070845564.png]: /images/20221123/d25ae3a3bdfc4454813aeea3e86d21e3.png
[20200914070845699.png]: /images/20221123/dba4fafbacf64e39919e7c33df6a1b41.png
[20200914070845781.png]: /images/20221123/b23203ee906f4c90950e46eea0a402b9.png
[20200914070845883.png]: /images/20221123/f87470654aa84caa89e8e4d83d42c66c.png
[20200914070845985.png]: /images/20221123/bd550abb95d74f17b4c4ba63e68997ed.png
[2020091407084680.png]: /images/20221123/3c2c34aed83e417b8d4afcc9e8531457.png
[image-20200522160319731]: /images/20221123/635a50c4407740749c6f74ae16f30e75.png
[20200914070846283.png]: /images/20221123/6be05da219614240a6ce063d42454ff1.png
[20200914070846372.png]: /images/20221123/fc64edbf8a2a4b1f94a110858a56e439.png
[20200914070846461.png]: /images/20221123/f6aef4f669a54c19bb3479dee86cd1b1.png
[20200914070846571.png]: /images/20221123/3923eba4919447fcb049e53c967dbeb1.png
[20200914070846797.png]: /images/20221123/57fbc543fb914b8bb65a3418095ba717.png
[http_laomengit.com]: http://laomengit.com