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

这篇具有很好参考价值的文章主要介绍了Flutter实现PopupMenu(弹出设置菜单)。希望对大家有所帮助。如果存在错误或未考虑完全的地方,请大家不吝赐教,您也可以点击"举报违法"按钮提交疑问。

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),
          ),
        ],
      ),

效果如下图:
Flutter实现PopupMenu(弹出设置菜单)
Flutter实现PopupMenu(弹出设置菜单)文章来源地址https://www.toymoban.com/news/detail-473644.html


结束语
Flutter是一个由Google开发的开源UI工具包,它可以让您在不同平台上创建高质量、美观的应用程序,而无需编写大量平台特定的代码。我将学习和深入研究Flutter的方方面面。从基础知识到高级技巧,从UI设计到性能优化,欢饮关注一起讨论学习,共同进入Flutter的精彩世界!

到了这里,关于Flutter实现PopupMenu(弹出设置菜单)的文章就介绍完了。如果您还想了解更多内容,请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章,希望大家以后多多支持TOY模板网!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处: 如若内容造成侵权/违法违规/事实不符,请点击违法举报进行投诉反馈,一经查实,立即删除!

领支付宝红包 赞助服务器费用

相关文章

  • flutter开发实战-flutter实现类似iOS的Alert提示框与sheet菜单效果

    flutter开发实战-flutter实现类似iOS的Alert提示框与sheet菜单效果 在开发过程中,经常使用到提示框Dialog,与sheet,使用到了flutter的showDialog与showModalBottomSheet 我这里类似alert弹窗直接调用 flutter 中提供的showDialog()函数显示对话框。 我这里类似Sheet底部弹窗调用 flutter 中提供的show

    2024年02月16日
    浏览(27)
  • iOS开发 点击按钮弹出按钮列表菜单

    调用方法如下 效果如下

    2024年02月16日
    浏览(29)
  • Android 12.0 系统设置显示主菜单添加屏幕旋转菜单实现旋转屏幕功能

     在android12.0的系统rom定制化开发中,在对系统设置进行定制开发中,有产品需求要求增加 旋转屏幕功能的菜单,就是在点击旋转屏幕菜单后弹窗显示旋转0度,旋转 90度,旋转180度, 旋转270度针对不同分辨率的无重力感应的大屏设备的屏幕旋转功能的实现, 接下来就来分析

    2024年02月09日
    浏览(41)
  • 【MATLAB GUI】 3. 列表框和弹出式菜单

    看B站up主freexyn的freexyn编程实例视频教程系列36Matlab GUI的学习笔记 任务要求设计一个信息注册系统,其中性别和班级可以随时修改 弹出式菜单:只能进行选择,不能进行输入 先设计界面,使用了可编辑文本、弹出式菜单、按钮、列表框 全选,双击,修改FontSize为16,修改St

    2024年02月21日
    浏览(28)
  • UI界面程序鼠标右键弹出菜单的一些事

    在做客户端UI程序时,鼠标右键弹出菜单这种操作非常常见,一般在鼠标右键按下或者鼠标右键抬起事件中响应操作,显示菜单即可,但是有时涉及到鼠标的移动,就是鼠标按下右键且移动时,则不需要弹出菜单,其它时候正常弹出。这种情况有很多种实现方式,但是操作体

    2024年02月03日
    浏览(28)
  • react ant-design实现导航菜单menu的路由设置/切换页面

    ant-design版本是5.1.1,路由版本是v6的 新版本的导航菜单路由设置与旧版的不太一样,刚开始的时候甚至不知道该怎么写 实现效果: 代码: 首先,给导航菜单的menu添加点击事件 修改item,通过设置点击事件获取点击后的key值(key值即路由跳转的页面) 打印出来看看 获取到的

    2024年02月12日
    浏览(44)
  • Flutter:自定义组件的上下左右弹出层

    最近要使用Flutter实现一个下拉菜单,需求就是,在当前组件下点击,其下方弹出一个菜单选项,如下图所示: 实现起来,貌似没什么障碍,在Flutter中本身就提供了弹出层PopupMenuButton组件和showMenu方法,于是开搞,代码如下: 直接使用showMenu也行,代码如下: PopupMenuButton运行

    2024年02月10日
    浏览(58)
  • 滚动菜单 flutter

    想实现这个功能: 下面的代码可以实现:

    2024年02月09日
    浏览(30)
  • 03_Flutter自定义下拉菜单

    在Flutter的内置api中,可以使用showMenu实现类似下拉菜单的效果,或者使用PopupMenuButton组件,PopupMenuButton内部也是使用了showMenu这个api,但是使用showMenu时,下拉面板的显示已经被约定死了,只能放一个简单的列表,没有办法定制下来面板的ui,并且下拉面板的宽高需要通过指定

    2024年02月03日
    浏览(32)
  • flutter系列之:做一个会飞的菜单

    目录 简介 定义一个菜单项目 让menu动起来 添加菜单内部的动画 总结 flutter中自带了drawer组件,可以实现通用的菜单功能,那么有没有一种可能,我们可以通过自定义动画来实现一个别样的菜单呢? 答案是肯定的,一起来看看吧。 因为这里的主要目的是实现菜单的动画,所以

    2024年02月08日
    浏览(28)

觉得文章有用就打赏一下文章作者

支付宝扫一扫打赏

博客赞助

微信扫一扫打赏

请作者喝杯咖啡吧~博客赞助

支付宝扫一扫领取红包,优惠每天领

二维码1

领取红包

二维码2

领红包