网站 推广方案查询网站流量

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

1 概念介绍

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

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(borderRad