Flutter 超实用简单菜单弹出框 PopupMenuButton功能


Posted in Javascript onAugust 06, 2019

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

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 parameters
super(key: key);

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

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

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

简单 Demo

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

Flutter 超实用简单菜单弹出框 PopupMenuButton功能

再来看一下代码:

/// 首先定义了一个枚举
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」里定义了  PopupMenuButton

3. 设置 icon 为  Icon(Icons.more_vert)

4. itemBuilder  需返回一个  List<PopupMenuEntry<T>>

5. 这里传入的值就是  PopupMenuItem<WhyFarther>

6. 然后定义  onSelected  参数接收点击回调

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

Flutter 超实用简单菜单弹出框 PopupMenuButton功能

总结

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

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

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

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

References

[1] onSelected: https://api.flutter.dev/flutter/material/PopupMenuButton/onSelected.html
[2] onSelected: https://api.flutter.dev/flutter/material/PopupMenuButton/onSelected.html
[3] child: https://api.flutter.dev/flutter/material/PopupMenuButton/child.html
[4] icon: https://api.flutter.dev/flutter/material/PopupMenuButton/icon.html
[5] icon: https://api.flutter.dev/flutter/material/PopupMenuButton/icon.html
[6] PopupMenuButton: https://api.flutter.dev/flutter/material/PopupMenuButton-class.html
[7] IconButton: https://api.flutter.dev/flutter/material/IconButton-class.html

总结

以上所述是小编给大家介绍的Flutter 超实用简单菜单弹出框 PopupMenuButton功能,希望对大家有所帮助,如果大家有任何疑问请给我留言,小编会及时回复大家的。在此也非常感谢大家对三水点靠木网站的支持!
如果你觉得本文对你有帮助,欢迎转载,烦请注明出处,谢谢!

Javascript 相关文章推荐
fancybox1.3.1 基于Jquery的插件在IE中图片显示问题
Oct 01 Javascript
apycom出品的jQuery精美菜单破解方法
Feb 18 Javascript
javascript放大镜效果的简单实现
Dec 09 Javascript
JavaScript中的对象序列化介绍
Dec 30 Javascript
AngularJS 日期格式化详解
Dec 23 Javascript
JavaScript中的ParseInt(&quot;08&quot;)和“09”返回0的原因分析及解决办法
May 19 Javascript
省市选择的简单实现(基于zepto.js)
Jun 21 Javascript
JS实现复选框的全选和批量删除功能
Apr 05 Javascript
通过实例讲解JS如何防抖动
Jun 15 Javascript
为什么Vue3.0使用Proxy实现数据监听(defineProperty表示不背这个锅)
Oct 14 Javascript
vue-preview动态获取图片宽高并增加旋转功能的实现
Jul 29 Javascript
vue项目配置 webpack-obfuscator 进行代码加密混淆的实现
Feb 26 Vue.js
JS中如何轻松遍历对象属性的方式总结
Aug 06 #Javascript
VUE组件中的 Drawer 抽屉实现代码
Aug 06 #Javascript
浅入深出Vue之自动化路由
Aug 06 #Javascript
解决vue单页面修改样式无法覆盖问题
Aug 05 #Javascript
微信小程序3种位置API的使用方法详解
Aug 05 #Javascript
微信小程序 高德地图路线规划实现过程详解
Aug 05 #Javascript
详解将微信小程序接口Promise化并使用async函数
Aug 05 #Javascript
You might like
php 无限级 SelectTree 类
2009/05/19 PHP
php获取中文拼音首字母类和函数分享
2014/04/24 PHP
PHP示例演示发送邮件给某个邮箱
2019/04/03 PHP
使用PHP+Redis实现延迟任务,实现自动取消订单功能
2019/11/21 PHP
超强的IE背景图片闪烁(抖动)的解决办法
2007/09/09 Javascript
获取当前网页document.url location.href区别总结
2008/05/10 Javascript
JS 学习笔记 防止发生命名冲突
2009/07/30 Javascript
基于jQuery的实现简单的分页控件
2010/10/10 Javascript
javascript面向对象编程代码
2011/12/19 Javascript
仿当当网淘宝网等主流电子商务网站商品分类导航菜单
2013/09/25 Javascript
JavaScript实现删除,移动和复制文件的方法
2015/08/05 Javascript
js判断checkbox是否选中个数的方法(超简单)
2016/08/19 Javascript
JavaScript实现垂直滚动条效果
2017/01/18 Javascript
基于jquery实现多级菜单效果
2017/07/25 jQuery
微信小程序自定义组件
2017/08/16 Javascript
把JavaScript代码改成ES6语法不完全指南(分享)
2017/09/10 Javascript
angular2实现统一的http请求头方法
2018/08/13 Javascript
基于vue的验证码组件的示例代码
2019/01/22 Javascript
vue 使用 sortable 实现 el-table 拖拽排序功能
2020/12/26 Vue.js
Python open()文件处理使用介绍
2014/11/30 Python
Python的SQLalchemy模块连接与操作MySQL的基础示例
2016/07/11 Python
Python实现两个list对应元素相减操作示例
2017/06/09 Python
Python3爬楼梯算法示例
2019/03/04 Python
Python----数据预处理代码实例
2019/03/20 Python
Flask框架学习笔记之表单基础介绍与表单提交方式
2019/08/12 Python
节日快乐! Python画一棵圣诞树送给你
2019/12/24 Python
TensorFlow tf.nn.conv2d_transpose是怎样实现反卷积的
2020/04/20 Python
python实现图书馆抢座(自动预约)功能的示例代码
2020/09/29 Python
Python txt文件如何转换成字典
2020/11/03 Python
用css3写出气球样式的示例代码
2017/09/11 HTML / CSS
HTML5实现无刷新修改URL的方法
2019/11/14 HTML / CSS
Html5页面点击遮罩层背景关闭遮罩层
2020/11/30 HTML / CSS
大课间体育活动方案
2014/03/12 职场文书
2015年秋季学校开学标语
2015/07/16 职场文书
详解如何使用Node.js实现热重载页面
2021/05/06 Javascript
Redis sentinel哨兵集群的实现步骤
2022/07/15 Redis