如何在页面中弹出菜单

文章目录

1 概念介绍
2 使用方法
3 示例代码

我们在上一章回中介绍了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下方,默认值是over
    position: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组件"相关的内容就介绍到这里，欢迎大家在评论区交流与讨论!