Flutter实现PopupMenu(弹出设置菜单)

news/2024/10/21 20:42:17/

PopupMenuButton简介

PopupMenuButton是一个用于创建弹出菜单的小部件。它通常与IconButton或其他触发菜单显示的小部件一起使用。当用户点击触发按钮时,PopupMenuButton会在屏幕上方或下方弹出一个菜单,显示一组选项供用户选择。

PopupMenuButton常用属性

PopupMenuButton的常用属性包括:
itemBuilder:菜单项构建器,用于定义菜单中的选项。它接受一个回调函数,该函数返回一个包含菜单项的List<PopupMenuEntry>,其中T是选项的类型。
onSelected:选项被选择时的回调函数。当用户选择菜单中的选项时,该回调函数会被触发,参数为选中的选项值。
icon:触发菜单显示的图标,通常使用IconButton来显示。
下面是一个示例代码,演示如何使用PopupMenuButton创建一个操作菜单:

在上面的示例中,itemBuilder回调函数返回了一个包含三个菜单项的List<PopupMenuEntry>,每个菜单项都使用PopupMenuItem构建。onSelected回调函数会在用户选择菜单项时被触发,它会打印选中的选项值。icon属性用于显示触发菜单显示的图标,这里使用了一个垂直更多选项的图标。

PopupMenuItem

PopupMenuItem是PopupMenuButton中的一个小部件,用于创建弹出菜单中的一个选项。它通常作为itemBuilder回调函数中返回的List中的一项。

PopupMenuItem的常用属性包括:

value:选项的值。当用户选择该选项时,onSelected回调函数会被触发,并且该值将作为参数传递给回调函数。
child:选项的内容,通常为Text小部件,用于显示选项的文本或其他内容。
enabled:选项是否可用。如果设置为false,则选项将显示为禁用状态,用户无法选择。
height:选项的高度。可以使用该属性自定义选项的高度。
textStyle:选项文本的样式。可以使用该属性自定义选项文本的样式,如字体、颜色等。

例子

 appBar: AppBar(title: _buildAppBarTitle(),centerTitle: true,actions: [IconButton(icon: Icon(Icons.search),onPressed: _showSearchPage,),PopupMenuButton<String>(itemBuilder: (context) => [PopupMenuItem(child: Text('发起群聊'),value: '发起群聊',),PopupMenuItem(child: Text('添加朋友'),value: '添加朋友',),PopupMenuItem(child: Text('扫一扫'),value: '扫一扫',),PopupMenuItem(child: Text('收付款'),value: '收付款',),],onSelected: (value) {// 处理操作菜单选项的回调// TODO: 根据选中的操作执行相应的逻辑print('选中的选项: $value');},icon: Icon(Icons.add_circle),),],),

效果如下图:
image.png
image.png


http://www.ppmy.cn/news/77072.html

相关文章

Unknown system variable ‘query_cache_size‘

报错如下 The error occurred while executing a query ### Cause: org.springframework.jdbc.CannotGetJdbcConnectionException: Failed to obtain JDBC Connection; nested exception is java.sql.SQLException: Unknown system variable query_cache_size at org.myba…

2172. 最大公约数

Powered by:NEFU AB-IN Link 文章目录 2172. 最大公约数题意思路代码 2022年第十三届决赛真题 2172. 最大公约数 题意 给定一个数组, 每次操作可以选择数组中任意两个相邻的元素 x , y x, yx,y 并将其 中的一个元素替换为 gcd ⁡ ( x , y ) \operatorname{gcd}(x, y)gcd(x,y),…

go手写Redis(8)之数据库核心层及指令实现

数据库核心层 前面实现完了处理器的逻辑&#xff0c;现在到了核心的数据层实现了&#xff0c;核心的数据库主要是来执行用户发送的指令并且进行数据存储 1. Database 数据层的顶级接口定义&#xff0c;在 interface/database/database.go 文件中定义&#xff0c; 其中定义了…

[C++/PTA] 立方体类的实现

[C/PTA] 立方体类的实现 题目要求解题思路代码总结 题目要求 立方体类Box的实现&#xff0c;完成计算体积、计算表面积、输出结果等功能。其中给定的主函数为&#xff1a; int main( ){float ab;cin>>ab;Box obj;obj.seta( ab );obj.getvolume( );obj.getarea( );obj…

齐聚手机赛道:小度朝左,蔚来向右

经过多年的发展&#xff0c;智能手机可以说已经发展到了人手一台的地步了&#xff0c;普及率之高可见一斑。然而&#xff0c;如今的智能手机却没有延续高增长态势&#xff0c;反而出现了销量下滑的情况。据Canalys公布的数据显示&#xff0c;2022年全球智能手机出货量不足12亿部…

ov2640子设备视频操作详细分析

ov2640子设备视频操作详细分析 文章目录 ov2640子设备视频操作详细分析ov2640_subdev_video_ops视频操作ov2640_s_stream开始流ov2640_g_fmt 获取格式ov2640_s_fmt设置格式ov2640_try_fmt尝试格式ov2640_cropcap裁剪能力ov2640_g_crop获取裁剪ov2640_enum_fmt枚举格式ov2640_g_…

充实你的Android开发工具箱:无效数据处理的方案

&#x1f604;&#x1f604;个人介绍 光子郎.进行开发工作七年以上&#xff0c;目前涉及全栈领域并进行开发。会经常跟小伙伴分享前沿技术知识&#xff0c;java后台、web前端、移动端&#xff08;Android&#xff0c;uniapp&#xff0c;小程序&#xff09;相关的知识以及经验体…

Mit6.006-lecture09-Breadth-First-Search

一、新单元&#xff1a;图 Quiz 1包含lecture01到lecture08&#xff0c;关注数据结构和排序 今天开始新单元&#xff0c;lecture09-lecture14&#xff0c;关注图算法 二、图应用 图无处不在 任何网络系统都存在有向连接图 比如&#xff1a;路网、计算机网络、社交网络 任…