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入门·对象属性方法大总结
Oct 01 Javascript
三级下拉菜单的js实现代码
May 23 Javascript
javascript实现焦点滚动图效果 具体方法
Jun 24 Javascript
jQuery取得设置清空select选择的文本与值
Jul 08 Javascript
Javascript之BOM(window对象)详解
May 25 Javascript
JS 实现 ajax 异步浏览器兼容问题
Jan 21 Javascript
Webpack实现按需打包Lodash的几种方法详解
May 08 Javascript
js获取元素的偏移量offset简单方法(必看)
Jul 05 Javascript
VUE element-ui 写个复用Table组件的示例代码
Nov 18 Javascript
小程序兼容安卓和IOS数据处理问题及坑
Sep 18 Javascript
vue实现动态按钮功能
May 13 Javascript
Vue 组件的挂载与父子组件的传值实例
Sep 02 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
phpmyadmin里面导入sql语句格式的大量数据的方法
2010/06/05 PHP
关于php正则匹配汉字的方法介绍
2013/04/25 PHP
解析PHP SPL标准库的用法(遍历目录,查找固定条件的文件)
2013/06/18 PHP
PHP获取一个字符串中间一部分字符的方法
2014/08/19 PHP
php.ini中date.timezone设置详解
2016/11/20 PHP
curl 出现错误的调试方法(必看)
2017/02/13 PHP
PHP PDOStatement::errorCode讲解
2019/01/31 PHP
Yii中特殊行为ActionFilter的使用方法示例
2020/10/18 PHP
js 链式延迟执行DOME
2012/01/04 Javascript
javascript之典型高阶函数应用介绍
2013/01/10 Javascript
使用Grunt.js管理你项目的应用说明
2013/04/24 Javascript
js 弹出新页面避免被浏览器、ad拦截的一种新方法
2014/04/30 Javascript
jQuery实现contains方法不区分大小写的方法
2015/02/13 Javascript
JavaScript数组的一些奇葩行为
2016/01/25 Javascript
jQuery Tags Input Plugin(添加/删除标签插件)详解
2016/06/20 Javascript
微信小程序下拉刷新PullDownRefresh的使用方法
2018/11/29 Javascript
弱类型语言javascript开发中的一些坑实例小结【变量、函数、数组、对象、作用域等】
2019/08/07 Javascript
Vue实例的对象参数options的几个常用选项详解
2019/11/08 Javascript
js+canvas实现五子棋小游戏
2020/08/02 Javascript
JavaScript实现alert弹框效果
2020/11/19 Javascript
[06:53]2018DOTA2国际邀请赛寻真——勇于创新的Vici Gaming
2018/08/14 DOTA
Python中optparse模块使用浅析
2015/01/01 Python
介绍Python中内置的itertools模块
2015/04/29 Python
python快速编写单行注释多行注释的方法
2019/07/31 Python
Python将主机名转换为IP地址的方法
2019/08/14 Python
python利用openpyxl拆分多个工作表的工作簿的方法
2019/09/27 Python
python字符串格式化方式解析
2019/10/19 Python
详解python 支持向量机(SVM)算法
2020/09/18 Python
css3制作动态进度条以及附加jQuery百分比数字显示
2012/12/13 HTML / CSS
美国和加拿大计算机和电子产品购物网站:TigerDirect.com
2019/09/13 全球购物
写一个函数,要求输入一个字符串和一个字符长度,对该字符串进行分隔
2015/07/30 面试题
计算机科学系职业生涯规划书
2014/03/08 职场文书
简单租房协议书
2014/04/09 职场文书
监察局领导班子四风问题整改措施思想汇报
2014/10/05 职场文书
2014年服务员个人工作总结
2014/12/23 职场文书
CSS 圆形进度栏
2021/04/06 HTML / CSS