专栏首页Flutter笔记Flutter | 超实用简单菜单弹出框 PopupMenuButton

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

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

点击 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 parameterssuper(key: key);

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

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

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

简单 Demo

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

再来看一下代码:

/// 首先定义了一个枚举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 参数接收点击回调

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

总结

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

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

有对这方面感兴趣的同学,可以查看我以前写的文章:Flutter 源码系列:DropdownButton 源码浅析

完整代码已经传至GitHub:https://github.com/wanglu1209/WFlutterDemo

本文分享自微信公众号 - Flutter笔记(Flutter_Note),作者:Flutter笔记

原文出处及转载信息见文内详细说明,如有侵权,请联系 yunjia_community@tencent.com 删除。

原始发表时间:2019-08-06

本文参与腾讯云自媒体分享计划,欢迎正在阅读的你也加入,一起分享。

我来说两句

0 条评论
登录 后参与评论

相关文章

  • Flutter 源码系列:DropdownButton 源码浅析

    其实关于 DropdownButton 的构造函数和简单使用我在上一篇文章中已经有过讲解,

    Flutter笔记
  • Flutter | 可能是目前最好用的仿微信聊天长按弹出框 WPopupMenu

    1.onValueChanged:是点击选中了某一个 action 时候的回调,返回值是一个 int,如果没有选中,点击空白处了,则会返回一个 null2.ac...

    Flutter笔记
  • Flutter | 超简单仿微信QQ侧滑菜单组件

    1.首先可以滑出菜单2.菜单滑动到一定距离完全滑出,未达到距离回滚3.菜单数量、样式随意定制4.菜单点击回调5.菜单展开时,点击 item 收回菜单(见QQ)

    Flutter笔记
  • OC代码规范

    1,变量的命名要表现出其功能来,最好再在最后加上类型后缀,这样即便不用写注释也能一眼就看出这个变量是干什么的;

    拉维
  • python字符串常用内建函数总结

    capitalize(...)      S.capitalize() -> str      Return a capitalized version o...

    py3study
  • 小程序+新零售,行业新玩法!

    随着消费升级和商业模式的不断革新,线上线下融合的新零售概念被企业和互联网广泛提及。从大润发的飞牛网,到京东3C产品实体店,再到阿里巴巴的无人超市,中国零售业正发...

    中微信通
  • 这款简洁又漂亮的小程序,让你完美避开下雨天

    你是否也遇到过这种情况:看了昨晚的天气预报,说今天不会下雨,心里想着明天休息日可以开心地去逛街。

    知晓君
  • Python开发实战教程(8)-向网页提交获取数据

    Python应用现在如火如荼,应用范围很广。因其效率高开发迅速的优势,快速进入编程语言排行榜前几名。本系列文章致力于可以全面系统的介绍Python语言开发知识和...

    做全栈攻城狮
  • JavaScript 技术篇-js自动转换类型,自动转换为字符串,js避免自动转换的坑

    自动转换类型 当 JavaScript 尝试操作一个 “错误” 的数据类型时,会自动转换为 “正确” 的数据类型。 而往往这种隐式的转化可能给程序带来很多莫...

    小蓝枣
  • TypeScript里的空值合并运算符(双问号)用法

    当左侧操作数为 null 或 undefined 时,其返回右侧的操作数,否则返回左侧的操作数。

    Jerry Wang

扫码关注云+社区

领取腾讯云代金券