【Flutter 实战】菜单(Menu)功能
老孟导读:今天介绍下Flutter中的菜单功能。
PopupMenuButton
使用PopupMenuButton,点击时弹出菜单,用法如下:
PopupMenuButton<String>(
itemBuilder: (context) {
return <PopupMenuEntry<String>>[
PopupMenuItem<String>(
value: '语文',
child: Text('语文'),
),
PopupMenuItem<String>(
value: '数学',
child: Text('数学'),
),
PopupMenuItem<String>(
value: '英语',
child: Text('英语'),
),
PopupMenuItem<String>(
value: '生物',
child: Text('生物'),
),
PopupMenuItem<String>(
value: '化学',
child: Text('化学'),
),
];
},
)
效果如下:
设置其初始值:
PopupMenuButton<String>(
initialValue: '语文',
...
)
设置初始值后,打开菜单后,设置的值将会高亮,效果如下:
获取用户选择了某一项的值,或者用户未选中,代码如下:
PopupMenuButton<String>(
onSelected: (value){
print('$value');
},
onCanceled: (){
print('onCanceled');
},
...
)
tooltip
是长按时弹出的提示,用法如下:
PopupMenuButton<String>(
tooltip: 'PopupMenuButton',
...
)
效果如下:
设置其阴影值、内边距和弹出菜单的背景颜色:
PopupMenuButton<String>(
elevation: 5,
padding: EdgeInsets.all(5),
color: Colors.red,
...
)
默认情况下,PopupMenuButton显示3个小圆点,我们也可以对齐进行设置,设置文字如下:
PopupMenuButton<String>(
child: Text('学科'),
...
)
child
组件将会被InkWell包裹,点击弹出菜单,效果如下:
也可以设置其他图标:
PopupMenuButton<String>(
icon: Icon(Icons.add),
...
)
效果如下:
设置弹出菜单边框:
PopupMenuButton<String>(
shape: RoundedRectangleBorder(
side: BorderSide(
color: Colors.red
),
borderRadius: BorderRadius.circular(10)
),
...
)
效果如下:
menu有一个非常重要的参数Offset
,这个参数是控制菜单弹出的位置,通常情况下,菜单在当前按钮下面展示:
PopupMenuButton<String>(
offset: Offset(0,100),
itemBuilder: (context) {
return <PopupMenuEntry<String>>[
PopupMenuItem<String>(
value: '语文',
child: Text('语文'),
),
PopupMenuItem<String>(
value: '数学',
child: Text('数学'),
),
];
},
)
PopupMenuButton
的每一项都需要是PopupMenuEntry
类型,PopupMenuEntry
为抽象类,其子类有PopupMenuItem、PopupMenuDivider、CheckedPopupMenuItem。
PopupMenuItem
构造函数为
参数说明:
- value:当此项选中后,此值将会通过
onSelected
返回。 - enabled:此项是否可用。
- height:此项的高度
- textStyle:文本样式
- child:子控件。
用法如下:
PopupMenuButton<String>(
onSelected: (value) {
print('$value');
},
itemBuilder: (context) {
return <PopupMenuEntry<String>>[
PopupMenuItem<String>(
value: '语文',
enabled: false,
child: Text('语文'),
),
PopupMenuItem<String>(
value: '数学',
textStyle: TextStyle(color: Colors.red),
child: Text('数学'),
),
PopupMenuItem<String>(
value: '英语',
height: 100,
child: Text('英语'),
),
];
},
)
PopupMenuDivider
PopupMenuDivider是菜单分割线,用法如下:
PopupMenuButton<String>(
onSelected: (value) {
print('$value');
},
itemBuilder: (context) {
return <PopupMenuEntry<String>>[
PopupMenuItem<String>(
value: '语文',
child: Text('语文'),
),
PopupMenuDivider(),
PopupMenuItem<String>(
value: '数学',
child: Text('数学'),
),
];
},
)
PopupMenuDivider默认高度为16,注意这个高度并不是分割线的高度,而是分割线控件的高度,设置为50代码:
PopupMenuDivider(height: 50,),
CheckedPopupMenuItem
CheckedPopupMenuItem是前面带是否选中的控件,本质就是一个ListTile,用法如下:
PopupMenuButton<String>(
onSelected: (value) {
print('$value');
},
itemBuilder: (context) {
return <PopupMenuEntry<String>>[
CheckedPopupMenuItem(
value: '语文',
checked: true,
child: Text('语文'),
),
CheckedPopupMenuItem(
value: '数学',
child: Text('数学'),
),
];
},
)
showMenu
如果你看下PopupMenuButton
的源码会发现,PopupMenuButton
也是使用showMenu实现的,用法如下:
showMenu(
context: context,
position: RelativeRect.fill,
items: <PopupMenuEntry>[
PopupMenuItem(child: Text('语文')),
PopupMenuDivider(),
CheckedPopupMenuItem(
child: Text('数学'),
checked: true,
),
PopupMenuDivider(),
PopupMenuItem(child: Text('英语')),
]);
position
参数表示弹出的位置,效果如下:
属性和PopupMenuButton
基本一样,但使用showMenu
需要我们指定位置,所以一般情况下,我们不会直接使用showMenu
,而是使用PopupMenuButton
,免去了计算位置的过程。
看下PopupMenuButton
是如何计算的,有助于帮助我们理解:
final PopupMenuThemeData popupMenuTheme = PopupMenuTheme.of(context);
final RenderBox button = context.findRenderObject();
final RenderBox overlay = Overlay.of(context).context.findRenderObject();
final RelativeRect position = RelativeRect.fromRect(
Rect.fromPoints(
button.localToGlobal(widget.offset, ancestor: overlay),
button.localToGlobal(button.size.bottomRight(Offset.zero), ancestor: overlay),
),
Offset.zero & overlay.size,
);
final List<PopupMenuEntry<T>> items = widget.itemBuilder(context);
交流
老孟Flutter博客地址(330个控件用法):http://laomengit.com
欢迎加入Flutter交流群(微信:laomengit)、关注公众号【老孟Flutter】:
【Flutter 实战】菜单(Menu)功能的更多相关文章
- 【Flutter实战】六大布局组件及半圆菜单案例
老孟导读:Flutter中布局组件有水平 / 垂直布局组件( Row 和 Column ).叠加布局组件( Stack 和 IndexedStack ).流式布局组件( Wrap )和 自定义布局组件 ...
- 菜单Menu(AS开发实战第四章学习笔记)
4.5 菜单Menu Android的菜单主要分两种,一种是选项菜单OptionMenu,通过按菜单键或点击事件触发,另一种是上下文菜单ContextMenu,通过长按事件触发.页面的布局文件放在re ...
- Flutter实战】文本组件及五大案例
老孟导读:大家好,这是[Flutter实战]系列文章的第二篇,这一篇讲解文本组件,文本组件包括文本展示组件(Text和RichText)和文本输入组件(TextField),基础用法和五个案例助你快速 ...
- 【老孟Flutter】Flutter 2的新功能
老孟导读:昨天期待已久的 Flutter 2.0 终于发布了, Flutter Web和Null安全性趋于稳定,Flutter桌面安全性逐渐转向Beta版! 原文链接:https://medium.c ...
- yii2 rbac权限控制之菜单menu详细教程
作者:白狼 出处:http://www.manks.top/article/yii2_rbac_menu本文版权归作者,欢迎转载,但未经作者同意必须保留此段声明,且在文章页面明显位置给出原文连接,否则 ...
- yii2权限控制rbac之菜单menu最详细教程
前面我们在博文 yii2搭建完美后台并实现rbac权限控制实例教程中完美实现了yii2的后台搭建和rbac权限控制,如果你还没有实现,请先看上文再回来参考本文,因为本文是在上文的基础上进行完善和补充. ...
- 我的第一个python web开发框架(36)——后台菜单管理功能
对于后台管理系统来说,要做好权限管理离不开菜单项和页面按钮控件功能的管理.由于程序没法智能的知道有什么菜单和控件,哪些人拥有哪些操作权限,所以首先要做的是菜单管理功能,将需要管理的菜单项和各个功能项添 ...
- Vue2 实现树形菜单(多级菜单)功能模块
结构示意图 ├── index.html ├── main.js ├── router │ └── index.js # 路由配置文件 ├── components # 组件目录 │ ├── App. ...
- GUI的最终选择 Tkinter(七):菜单Menu组件、Menubutton组件、OptionMenu组件
Menu组件 今天说的Menu组件就是一些菜单组件,开始点点点... Tkinter提供了一个Menu组件,可以实现顶级菜单,下拉菜单和弹出菜单.由于底层是代码实现和优化的,所以不太建议通过按钮和其他 ...
- bootstrap table 父子表实现【无限级】菜单管理功能
bootstrap table 父子表实现[无限级]菜单管理功能 实现效果 前端代码 <%@ page language="java" import="java.u ...
随机推荐
- C#LeetCode刷题之#15-三数之和(3Sum)
目录 问题 示例 分析 问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/3618 访问. 给定一个包含 n 个整数的 ...
- C#LeetCode刷题之#20-有效的括号(Valid Parentheses)
问题 该文章的最新版本已迁移至个人博客[比特飞],单击链接 https://www.byteflying.com/archives/4018 访问. 给定一个只包括 '(',')','{','}',' ...
- GitHub 热点速览 Vol.33:听说程序员都是颜控?
作者:HelloGitHub-小鱼干 摘要:GitHub上面除了很多有趣的项目,也有很多高颜值的项目,比如:图片共享网站 Unsplash 开源的 Dataset,提供了两百多张高颜值美照.Heroi ...
- Android 本地缓存Acache的简单使用
设置缓存数据: ACache mCache = ACache.get(this); mCache.put("key1", "value"); //保存6秒,如果 ...
- PythonCrashCourse 第九章习题
创建一个名为Restaurant 的类,其方法__init__() 设置两个属性: restaurant_name 和cuisine_type 创建一个名为describe _restaurant ( ...
- JavaScript学习系列博客_28_JavaScript 数组去重
数组去重 var arr = [1,2,3,2,2,1,3,4,2,5]; //去除数组中重复的数字 //获取数组中的每一个元素 for(var i=0 ; i<arr.length ; i++ ...
- StructuredStreaming基础操作和窗口操作
一.流式DataFrames/Datasets的结构类型推断与划分 ◆ 默认情况下,基于文件源的结构化流要求必须指定schema,这种限制确保即 使在失败的情况下也会使用一致的模式来进行流查询. ◆ ...
- 喵的Unity游戏开发之路 - 轨道摄像机
前言 很多童鞋没有系统的Unity3D游戏开发基础,也不知道从何开始学.为此我们精选了一套国外优秀的Unity3D游戏开发教程,翻译整理后放送给大家,教您从零开始一步一步掌握Unity3 ...
- 计算机网络-应用层(2)FTP协议
文件传输协议(FTP,File Transfer Protocol)是Internet上使用最广泛的文件传送协议.FTP提供交互式的访问,允许客户指明文件的类型与格式,并允许文件具有存取权限.它屏蔽了 ...
- JAVA作业—字符串操作
------------恢复内容开始------------ ------------恢复内容开始------------ ------------恢复内容开始------------ ------- ...