第一百六十二回 PopupMenuButton组件

文章目录

  • 概念介绍
  • 使用方法
  • 示例代码

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

概念介绍

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

使用方法

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

  • icon属性:主要用来控制按钮的图标,默认是三个白色的圆点;
  • color属性:主要用来控制弹出菜单的背景颜色,默认是白色;
  • shape属性:主要用来控制菜单的形状,默认是矩形;
  • onOpened属性:该属性是方法类型,菜单弹出时回调;
  • onCanceled属性:该属性是方法类型,菜单关闭时回调;
  • onSelected属性:该属性是方法类型,选择某个菜单项时回调该方法;
  • itemBuilder属性:该属性用来存放菜单中的选项,可以存放多个菜单选项;

这些属性中,我们重点介绍一下itemBuilder属性,我们需要使用PopupMenuItem或者CheckedPopupMenuItem组件给它赋值。这两个组件中都包含两个常用属性,

  • child属性:用来控制菜单选项的显示内容,通常使用Text组件或者Icon组件给它赋值;
  • value属性:用来控制菜单选项的值,onSelected属性对应的方法中会把这个值传递给方法的参数;

介绍完这些属性后,我们将在后面的小节中通过示例代码来演示它们的具体用法。

示例代码

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 >[
      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组件"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!

你可能感兴趣的:(一起Talk,Flutter吧,移动开发,Flutter开发,AppBar,Actions,PopupMenu,PopupMenuButton)