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 相关文章推荐
JavaScript之HTMLCollection接口代码
Apr 27 Javascript
jquery.post用法关于type设置问题补充
Jan 03 Javascript
javascript简单实现图片预加载
Dec 03 Javascript
浅谈javascript中字符串String与数组Array
Dec 31 Javascript
详解JavaScript for循环中发送AJAX请求问题
Jun 23 Javascript
底部悬浮通栏可以关闭广告位的实现方法
Jun 01 Javascript
浅谈layer的iframe弹窗给里面的标签赋值的问题
Nov 10 Javascript
详解JS异步加载的三种方式
Mar 07 Javascript
Vue.use源码分析
Apr 22 Javascript
layui弹出层效果实现代码
May 19 Javascript
[原创]js实现保存文本框内容为本地文件兼容IE,chrome,火狐浏览器
Feb 14 Javascript
基于vue.js实现分页查询功能
Dec 29 Javascript
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中浮点数计算比较及取整不准确的解决方法
2015/01/09 PHP
js下利用控制器载入对应脚本
2010/07/17 Javascript
eval的两组性能测试数据
2012/08/17 Javascript
js 设置缓存及获取设置的缓存
2014/05/08 Javascript
jQuery的:parent选择器定义和用法
2014/07/01 Javascript
一个不错的字符串转码解码函数(自写)
2014/07/31 Javascript
基于zepto.js简单实现上传图片
2016/06/21 Javascript
详解Vue.js动态绑定class
2016/12/20 Javascript
jQuery EasyUI的TreeGrid查询功能实现方法
2017/08/08 jQuery
JavaScript实现简单的文本逐字打印效果示例
2018/04/12 Javascript
Vue.js单向绑定和双向绑定实例分析
2018/08/14 Javascript
详解Vue串联过滤器的使用场景
2020/04/30 Javascript
详解JavaScript作用域 闭包
2020/07/29 Javascript
JavaScript函数柯里化实现原理及过程
2020/12/02 Javascript
[01:42]TI4西雅图DOTA2前线报道 第一顿早饭哦
2014/07/08 DOTA
用Python进行行为驱动开发的入门教程
2015/04/23 Python
Python argv用法详解
2016/01/08 Python
轻松理解Python 中的 descriptor
2017/09/15 Python
Python 将pdf转成图片的方法
2018/04/23 Python
分析python请求数据
2018/08/19 Python
python 整数越界问题详解
2019/06/27 Python
Python qqbot 实现qq机器人的示例代码
2019/07/11 Python
Python中list循环遍历删除数据的正确方法
2019/09/02 Python
Django文件上传与下载(FileFlid)
2019/10/06 Python
Fossil美国官网:Fossil手表、手袋、珠宝及配件
2017/02/01 全球购物
荷兰浴室和卫浴网上商店:Badkamerxxl.nl
2020/10/06 全球购物
管理信息系学生的自我评价
2014/01/11 职场文书
大学生就业意向书范文
2014/04/01 职场文书
论文诚信承诺书
2014/05/23 职场文书
文案策划专业自荐信
2014/07/07 职场文书
个人融资协议书
2014/10/02 职场文书
2015大学生暑期实习报告
2015/07/13 职场文书
2019中秋节祝福语大全,提前收藏啦
2019/09/10 职场文书
Angular性能优化之第三方组件和懒加载技术
2021/05/10 Javascript
ztree+ajax实现文件树下载功能
2021/05/18 Javascript
什么是clearfix (一文搞清楚css清除浮动clearfix)
2023/05/21 HTML / CSS