为了账号安全,请及时绑定邮箱和手机立即绑定

Flutter | 超实用简单菜单弹出框 PopupMenuButton

标签:
Java Python

相信在实际开发过程当中,肯定少不了这样的功能:

https://img1.sycdn.imooc.com/5de2369500017dc706150230.jpg

点击 AppBar 右上角的按钮,弹出一个菜单供用户选择。

幸运的是,Flutter 提供给我们了一个 Widget,直接就能实现如上的效果。

PopupMenuButton

还是老规矩,先看官方的说明:

Displays a menu when pressed and calls onSelected[1] when the menu is dismissed because an item was selected. The value passed to onSelected[2] is the value of the selected menu item.

One of child[3] or icon[4] may be provided, but not both. If icon[5] is provided, then PopupMenuButton[6] behaves like an IconButton[7].

If both are null, then a standard overflow icon is created (depending on the platform).

大致意思为:

当按下的时候显示一个菜单,选择了一个项目的时候会回调 onSelected,传递的值是所选菜单的值。

可以提供 child or icon ,但是不能同时提供。

如果为空,则提供一个默认的图标,取决于平台。

构造函数

看完了官方说明,再来看构造函数:

const PopupMenuButton({

  Key key,

  @required this.itemBuilder,

  this.initialValue,

  this.onSelected,

  this.onCanceled,

  this.tooltip,

  this.elevation = 8.0,

  this.padding = const EdgeInsets.all(8.0),

  this.child,

  this.icon,

  this.offset = Offset.zero,

  this.enabled = true,

}) : assert(itemBuilder != null),

assert(offset != null),

assert(enabled != null),

assert(!(child != null && icon != null)), // fails if passed both parameters

super(key: key);

这里面每一个参数应该都很好理解,就不做过多的解释了,

唯一必传的参数就是 itemBuilder,也可以看到后面的断言:

assert(!(child != null && icon != null)) 判断了 child 、icon 是否同时不为空,如果是的话就报错了。

简单 Demo

构造函数理解了,官方也提供了一个 Demo,我们来看一下运行效果:

https://img4.sycdn.imooc.com/5de236c00001861506330244.jpg

再来看一下代码:

/// 首先定义了一个枚举

enum WhyFarther {

  harder,

  smarter,

  selfStarter,

  tradingCharter,

}

/// ------------------------------------

/// build 方法

Widget build(BuildContext context) {

  return Scaffold(

    appBar: AppBar(

      title: Text('PopupMenuButtonPage'),

      actions: <Widget>[

        PopupMenuButton<WhyFarther>(

          onSelected: (WhyFarther result) {

            setState(() {

              _selection = result;

            });

          },

          icon: Icon(Icons.more_vert),

          itemBuilder: (BuildContext context) => <PopupMenuEntry<WhyFarther>>[

            const PopupMenuItem<WhyFarther>(

              value: WhyFarther.harder,

              child: Text('Working a lot harder'),

            ),

            const PopupMenuItem<WhyFarther>(

              value: WhyFarther.smarter,

              child: Text('Being a lot smarter'),

            ),

            const PopupMenuItem<WhyFarther>(

              value: WhyFarther.selfStarter,

              child: Text('Being a self-starter'),

            ),

            const PopupMenuItem<WhyFarther>(

              value: WhyFarther.tradingCharter,

              child: Text('Placed in charge of trading charter'),

            ),

          ],

        ),

      ],

    ),

    body: Container(),

  );

}

解释一下逻辑:

1.首先定义了一个枚举2.然后在 AppBar 的「actions」里定义了 PopupMenuButton3.设置 icon 为 Icon(Icons.more_vert)4.itemBuilder 需返回一个 List<PopupMenuEntry<T>>5.这里传入的值就是 PopupMenuItem<WhyFarther>6.然后定义 onSelected 参数接收点击回调

这样整体的逻辑就是定义好了,运行一下:

https://img2.sycdn.imooc.com/5de236f50001ca0206440603.jpg

总结

这样就完成了一个超级简单并且实用的菜单弹出框,

其实它的实现逻辑和 DropdownButton 差不多,都是使用了 PopupRoute。



点击查看更多内容
TA 点赞

若觉得本文不错,就分享一下吧!

评论

作者其他优质文章

正在加载中
移动开发工程师
手记
粉丝
30
获赞与收藏
45

关注作者,订阅最新文章

阅读免费教程

  • 推荐
  • 评论
  • 收藏
  • 共同学习,写下你的评论
感谢您的支持,我会继续努力的~
扫码打赏,你说多少就多少
赞赏金额会直接到老师账户
支付方式
打开微信扫一扫,即可进行扫码打赏哦
今天注册有机会得

100积分直接送

付费专栏免费学

大额优惠券免费领

立即参与 放弃机会
意见反馈 帮助中心 APP下载
官方微信

举报

0/150
提交
取消