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 相关文章推荐
Code:loadScript( )加载js的功能函数
Feb 02 Javascript
Prototype PeriodicalExecuter对象 学习
Jul 19 Javascript
Jquery 表单取值赋值的一些基本操作
Oct 11 Javascript
兼容IE与firefox火狐的回车事件(js与jquery)
Oct 20 Javascript
浅析onsubmit校验表单时利用ajax的return false无效问题
Jul 10 Javascript
js实现div的切换特效上一个下一个
Feb 11 Javascript
BootStrap 智能表单实战系列(十)自动完成组件的支持
Jun 13 Javascript
jQuery扩展+xml实现表单验证功能的方法
Dec 25 Javascript
JS实现给对象动态添加属性的方法
Jan 05 Javascript
js实现彩色条纹滚动条效果
Mar 15 Javascript
vue2.0.js的多级联动选择器实现方法
Feb 09 Javascript
JavaScript中的 new 命令
May 22 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
提问的智慧
2006/10/09 PHP
php读取msn上的用户信息类
2008/12/05 PHP
php 遍历数据表数据并列表横向排列的代码
2009/09/05 PHP
Windows下的PHP 5.3.x安装 Zend Guard Loader教程
2014/09/06 PHP
PHP判断网络文件是否存在的方法
2015/03/12 PHP
php pdo操作数据库示例
2017/03/10 PHP
javascript中将Object转换为String函数代码 (json str)
2012/04/29 Javascript
ajax java 实现自动完成功能
2012/12/19 Javascript
jquery 扑捉回车键事件代码
2014/04/24 Javascript
JavaScript中数组的合并以及排序实现示例
2015/10/24 Javascript
Nodejs学习item【入门手上】
2016/05/05 NodeJs
原生js实现键盘控制div移动且解决停顿问题
2016/12/05 Javascript
Bootstrap CSS使用方法
2016/12/23 Javascript
Parcel 打包示例(React HelloWorld)
2018/01/16 Javascript
vue cli3.0 引入eslint 结合vscode使用
2019/05/27 Javascript
解决layer.confirm快速点击会重复触发事件的问题
2019/09/23 Javascript
解决vue自定义全局消息框组件问题
2019/11/22 Javascript
js中的面向对象之对象常见创建方法详解
2019/12/16 Javascript
Vue中函数防抖节流的理解及应用实现
2020/04/24 Javascript
JavaScript实现滚动加载更多
2020/12/27 Javascript
[01:01:52]完美世界DOTA2联赛PWL S2 GXR vs Magma 第二场 11.25
2020/11/26 DOTA
Python实现多线程下载文件的代码实例
2014/06/01 Python
Python简单爬虫导出CSV文件的实例讲解
2018/07/06 Python
Python自动抢红包教程详解
2019/06/11 Python
使用Python paramiko模块利用多线程实现ssh并发执行操作
2019/12/05 Python
python实现名片管理器的示例代码
2019/12/17 Python
python 调用Google翻译接口的方法
2020/12/09 Python
HTMl5的存储方式sessionStorage和localStorage详解
2014/03/18 HTML / CSS
华为旗下电子商务平台:华为商城
2016/08/06 全球购物
美国电子产品主要品牌的授权在线零售商:DataVision
2019/03/23 全球购物
英国百年闻名的优质健康产品连锁店:Holland & Barrett
2019/12/19 全球购物
2014年营业员工作总结
2014/11/18 职场文书
党支部考察鉴定意见
2015/06/02 职场文书
2019年暑期安全广播稿!
2019/07/03 职场文书
python中opencv实现图片文本倾斜校正
2021/06/11 Python
JAVA springCloud项目搭建流程
2022/05/11 Java/Android