如何在页面中弹出菜单

我们在上一章回中介绍了Sliver综合示例相关的内容，本章回中将介绍PopupMenuButton组件.闲话休提，让我们一起Talk Flutter吧。

1 概念介绍

我们在本章回中介绍的PopupMenuButton组件位于AppBar右侧，通常显示三个圆点图标，点击该图标时弹出的菜单就是PopupMenuButton，点击菜单中的选项后菜
单自动关闭。如果有看官不理解的话可以查看下面的程序运行效果图。本章回中将详细介绍PopupMenuButton的使用方法。

2 使用方法

和其它组件一样PopupMenuButton组件提供了相关的属性，通过这些属性可以控制该组件，下面是该组件中常用的属性：

• icon属性：主要用来控制按钮的图标，默认是三个白色的圆点；
• color属性：主要用来控制弹出菜单的背景颜色，默认是白色；
• shape属性：主要用来控制菜单的形状，默认是矩形；
• onOpened属性：该属性是方法类型，菜单弹出时回调；
• onCanceled属性：该属性是方法类型，菜单关闭时回调；
• onSelected属性：该属性是方法类型，选择某个菜单项时回调该方法；
• itemBuilder属性：该属性用来存放菜单中的选项，可以存放多个菜单选项；
  这些属性中，我们重点介绍一下itemBuilder属性，我们需要使用PopupMenuItem或者CheckedPopupMenuItem组件给它赋值。这两个组件中都包含两个常用属性，
• child属性：用来控制菜单选项的显示内容，通常使用Text组件或者Icon组件给它赋值；
• value属性：用来控制菜单选项的值，onSelected属性对应的方法中会把这个值传递给方法的参数；
  介绍完这些属性后，我们将在后面的小节中通过示例代码来演示它们的具体用法。

3 示例代码

actions: [///这个组件自带三个点的icon，不需要单独添加，可以通过icon属性修改PopupMenuButton(// icon: Icon(Icons.ac_unit),///弹出菜单的背景颜色，不过会把icon的颜色也修改了// color: Colors.grey,///控制菜单的形状，修改为圆角shape: RoundedRectangleBorder(borderRadius: BorderRadius.circular(16),),///控制菜单弹出位置over就在appBar上，under在AppBar下方,默认值是overposition:PopupMenuPosition.over,///控制菜单的偏移位置，正值向右和下偏移，负值向左和上偏移offset: const Offset(-16,0),///选择菜单的某个item后的回调方法，这个value和item中的value属性一致，如果item中///没有给value属性赋值，那么该方法不会被回调onSelected: (value){ debugPrint('selected: $value');},///meun打开和关闭时的回调方法onOpened: () => debugPrint('open'),onCanceled: () {debugPrint('cancel');},///菜单的初始值，与该值相等的item会被标记为选中状态initialValue: 'two',///创建菜单项itemBuilder: (context) {// return <PopupMenuItem<String>>[return [///建议指定value属性PopupMenuItem<String>(value: 'one',onTap: ()=> debugPrint('tap one'),child: const Text('1'),),PopupMenuItem<String>(value:'two',onTap: ()=> debugPrint('tap two'),child: const Text('2'),),PopupMenuItem<String>(value:'three',onTap: ()=> debugPrint('tap three'),child: const Text('3'),),///另外一种菜单项目，它可以被选择，通过checked控制，默认值为false,设置为true时显示对号；const CheckedPopupMenuItem<String>(value: 'four',checked:true,child: Text('4'),),];},),
],

在上面的示例代码中，我们添加了四个菜单项目，前三个菜单项都相同，最后一个菜单项带一个对号，表示被选择。此外，PopupMenuButton组件需要放到AppBar组件的actions属性中，这个在代码中可以看到。
看官们，与"PopupMenuButton组件"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!