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中的运用上部
Nov 20 Javascript
web前端开发也需要日志
Dec 09 Javascript
node.js+express制作网页计算器
Jan 17 Javascript
图解prototype、proto和constructor的三角关系
Jul 31 Javascript
浅谈html转义及防止javascript注入攻击的方法
Dec 04 Javascript
js正则表达式验证表单【完整版】
Mar 06 Javascript
微信小程序 开发之全局配置
May 05 Javascript
node.js express框架简介与实现
Jul 23 Javascript
学习LayUI时自研的表单参数校验框架案例分析
Jul 29 Javascript
node.js处理前端提交的GET请求
Aug 30 Javascript
js中console在一行内打印字符串和对象的方法
Sep 10 Javascript
vue路由跳转传递参数的方式总结
May 10 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
SONY ICF-SW7600的电路分析
2021/03/02 无线电
PHP+APACHE实现用户论证的方法
2006/10/09 PHP
php socket方式提交的post详解
2008/07/19 PHP
解析PHP中ob_start()函数的用法
2013/06/24 PHP
javascript实现的使用方向键控制光标在table单元格中切换
2010/11/17 Javascript
JavaScript 基础篇之运算符、语句(二)
2012/04/07 Javascript
jQuery响应鼠标事件并隐藏与显示input默认值
2014/08/24 Javascript
jquery插件jquery.nicescroll实现图片无滚动条左右拖拽的方法
2015/08/10 Javascript
5分钟打造简易高效的webpack常用配置
2017/07/04 Javascript
jQuery实现QQ空间汉字转拼音功能示例
2017/07/10 jQuery
vue :src 文件路径错误问题的解决方法
2018/05/15 Javascript
Vue 中的受控与非受控组件的实现
2018/12/17 Javascript
关于vue2强制刷新,解决页面不会重新渲染的问题
2019/10/29 Javascript
《javascript设计模式》学习笔记四:Javascript面向对象程序设计链式调用实例分析
2020/04/07 Javascript
在Vue中创建可重用的 Transition的方法
2020/06/02 Javascript
[01:03:18]DOTA2-DPC中国联赛 正赛 RNG vs Dynasty BO3 第一场 1月29日
2021/03/11 DOTA
[49:30]DOTA2-DPC中国联赛正赛 Dragon vs Dynasty BO3 第二场 3月4日
2021/03/11 DOTA
python 随机数生成的代码的详细分析
2011/05/15 Python
跟老齐学Python之赋值,简单也不简单
2014/09/24 Python
python 正则表达式参数替换实例详解
2020/01/17 Python
tensorflow查看ckpt各节点名称实例
2020/01/21 Python
Django基于Models定制Admin后台实现过程解析
2020/11/11 Python
AmazeUI在模态框中嵌入表单形成模态输入框
2020/08/20 HTML / CSS
迪斯尼商品官方网站:ShopDisney
2016/08/01 全球购物
澳大利亚最受欢迎的美发和美容在线商店:Catwalk
2018/12/12 全球购物
荷兰在线钓鱼商店:Raven
2019/06/26 全球购物
JAVA的事件委托机制和垃圾回收机制
2014/09/07 面试题
师范应届生语文教师求职信
2013/10/29 职场文书
施工资料员岗位职责
2014/01/06 职场文书
合作经营协议书
2014/04/17 职场文书
2015庆祝七一建党节94周年活动总结
2015/03/20 职场文书
2016年公务员六五普法心得体会
2016/01/21 职场文书
最美劳动诗,致敬所有的劳动者!
2019/07/12 职场文书
导游词之寿县报恩寺
2020/01/19 职场文书
python实现自定义日志的具体方法
2021/05/28 Python
mysql数据库隔离级别详解
2022/06/16 MySQL