如何实现Action菜单

文章目录

  • 1. 概念介绍
  • 2. 思路与方法
    • 2.1 实现思路
    • 2.2 实现方法
  • 3. 示例代码
  • 4. 内容总结

我们在上一章回中介绍了"自定义标题栏"相关的内容,本章回中将介绍自定义Action菜单.闲话休提,让我们一起Talk Flutter吧。

在这里插入图片描述

1. 概念介绍

我们在这里提到的Action菜单是指AppBar中actions属性对应的组件。它和上一章回中介绍的标题栏类似,都位于页面上方,它们都受AppBar组件的控制。一个完整
的AppBar包含导航(返回箭头),标题和Actcons.他们从左到右依次排列。这三个内容中导航是自动生成的,比如从A页面导航到B页面时会 在页面B上显示一个导航图标,
也就是我们常见的返回箭头。标题是页面必备的内容,主要用来显示当前页面的主题。Actions是可选择的内容,它通常用来在AppBar中添加一些附加功能,比如分享
或者下载。本章回中将介绍如何自定义Action菜单,进而打造出功能丰富的AppBar。

2. 思路与方法

2.1 实现思路

我们自定义Action菜单并不是重写相关的组件,而是使用把多个组件组合在一起的形成新的Actions。组合的内容依据自己的需求来制定,这点和上一章回中自定义标题
栏的思路相同。比如,我们对Actions的需求是:显示文本,点击文本后需要弹出功能菜单。有了这个需求后,我们就可以自定义Actions,文本通过TextButton组件
实现,它既可以显示文本内容,又可以响应点击事件。弹出功能菜单通过showMenu和PopupMenu一起实现。

2.2 实现方法

  • 创建TextButton组件,并且把它赋值给AppBar的Actions属性;
  • 创建popMenu,并且通过showMenu来显示,menu的内容可以自定义;
  • 把showMenu赋值给TextButton的onPress属性,用来响应按钮的点击事件;
  • 把TextButton组件赋值给Actions属性,它会显示在AppBar的最右侧;
    我们在上面步骤中使用了pupMenu功能,这里只是概要描述,具体的细节可以参考五十一回介绍相关内容.上面步骤中只是文本描述,内容比较抽象,不容易理解,我们将
    在接下来的小节中通过具体的示例代码来演示。

3. 示例代码

appBar: AppBar(title: Widget(), ///标题栏的内容省略,或者使用上一章回中的示例代码///Action的优先级大于Title,它会占用Title的空间,如果它的空间过大时会把Title覆盖掉///比如把action3-5打开后就会覆盖Title的内容.actions: [SizedBox(width: 80,child: TextButton(onPressed: (){showMenu(context:context,///这个坐标值不好调整,下面我的经验值,位置在手指点击点的左下方,想往左移动给110+数字 往下移动180加数字position: const RelativeRect.fromLTRB(170, 180, 110, 10),items: [///建议指定value属性PopupMenuItem<String>(value: 'one',onTap: ()=> debugPrint('tap one'),child: const Text('1'),),PopupMenuItem<String>(value:'two',onTap: ()=> debugPrint('tap two'),child: const Text('2'),),PopupMenuItem<String>(value:'three',onTap: ()=> debugPrint('tap three'),child: const Text('3'),),],);},child: const Text("action1")),),const SizedBox(width: 80,child: Text("action2"),),// const SizedBox(//   width: 80,//   child: Text("action3"),// ),// const SizedBox(//   width: 80,//   child: Text("action4"),// ),// const SizedBox(//   width: 60,//   child: Text("action5"),// ),],
),

上面的示例代码完全按照实现方法中的步骤来实现,代码中popMenu包含了三个选项,没有具体的功能,只是简单地打印一行日志。菜单的内容大家可以依据自身需求来决
定。代码中还省略了Scaffold以及其它的代码,只保留了AppBar相关的代码。编译并且运行上面的程序可以看到一个标题栏,标题左边是返回箭头,然后就是标题和我
们自定义的Actions菜单。我在这里就不演示程序的运行结果了,建议大家自己动手去实践。
此外,我们再补充一些Action的内容,Action可以包含多个组件,类似Row组件,也就是说可以在AppBar中的显示多个Action,我们在代码中尝试显示五个Action,
结果发现Action会占用Title的空间,如果它的空间过大时会把Title覆盖掉。因此我们推断:Action的优先级比标题(Title)高,当它的宽度过大时会覆盖标题。

4. 内容总结

我们在本章回中演示了如何自定义Acton菜单,并且通过一个需求:显示文本,点击文本后需要弹出功能菜单,介绍了自定义Action的思路和方法。大家可以结合自己在
项目中的需求来自定义Action,自定义的思路就是依据需求组合现有的组件形成新的组件。总之,只要是组件就可以,因为AppBar的actions属性是Widget类型,我
们只需要把自定义的Action值给该属性就可以实现自定义Acttion菜单的功能。
看官们,与"自定义Action菜单"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!

本文来自互联网用户投稿,该文观点仅代表作者本人,不代表本站立场。本站仅提供信息存储空间服务,不拥有所有权,不承担相关法律责任。如若转载,请注明出处:http://www.mzph.cn/bicheng/38762.shtml

如若内容造成侵权/违法违规/事实不符,请联系多彩编程网进行投诉反馈email:809451989@qq.com,一经查实,立即删除!

相关文章

机器人控制系列教程之并联机器人简介

背景 根据其构件的连接是否构成闭环形式&#xff0c;机器人可分为串联机器人和并联机器人两种。对于串联机器人&#xff0c;其所有的构件以串联的结构形式连接起来&#xff0c;在空间组成一种开环结构&#xff0c;因而具有工作空间大&#xff0c;灵活性好等优点&#xff0c;但…

【避雷实测】宠物空气净化器怎么选?希喂、小米、安德迈谁更值得入手!

不知道家里养猫的朋友们有没有注意到&#xff0c;每逢春夏季节&#xff0c;无论是户外还是室内&#xff0c;我们的鼻子常常感到痒痒的。户外的痒感往往是因为那些飘散的杨柳絮&#xff0c;而在室内&#xff0c;这种痒感很可能是由于猫主子的毛发飘浮在空气中所引起的。 为了能…

Qt:8.QWidget属性介绍(focuspolicy属性-控件焦点、stylesheet属性-为控件设置样式)

目录 一、focuspolicy属性-控件焦点&#xff1a; 1.1focuspolicy属性介绍&#xff1a; 1.2设置焦点策略——setFocusPolicy()&#xff1a; 1.3获取控件的焦点策略——focusPolicy()&#xff1a; 二、stylesheet属性——为控件设置样式&#xff1a; 2.1 stylesheet属性介绍…

Golang-map理解

golang-map语雀笔记整理 map的底层实现hmapbmap map是如何做到O(1)的复杂度的&#xff1f;map扩容策略 师兄问题回答 map的底层实现 hmap hmap的结构体核心字段有&#xff1a;buckets 桶数组地址&#xff0c; B 定位值&#xff0c;桶的数目是2^B个&#xff0c; count 当前map的…

黑马点评下订单-小程序下单没问题但是Postman发送请求失败了,返回401

经过多方探索&#xff0c;这个✓8错误就是由于黑马点评使用了拦截器&#xff0c;我们直接发送请求是会被拦截器拦截下来的&#xff0c;我给出的解决方案是通过配置Postman解决&#xff0c;方法很简单&#xff01; 解决方案 右边的value写上Redis里面登录所用token值就可以了…

使用zdppy_api+onlyoffice word文档在线共同编辑,附完整的vue3前端代码和python后端代码

参考文档&#xff1a; https://api.onlyoffice.com/zh/editors/basic https://api.onlyoffice.com/zh/editors/coedit 基本的架构思考&#xff1a; 文档表&#xff1a;记录的是文档信息 key&#xff1a;这个key可以标识唯一的一个文档&#xff0c;可以是文档的hash值fileType…

HttpServletResponse设置headers返回,发现headers中缺少“Content-Length“和“Content-Type“两个参数。

业务中需要将用httpUtils请求返回的headers全部返回&#xff0c;塞到HttpServletResponse中&#xff0c;代码如下&#xff1a; HttpServletResponse response;// 返回headers Arrays.stream(httpResponse.getHeaders()).forEach(header -> response.setHeader(header.getNa…

MySQL的简介和安装目录

今日总结到此结束&#xff0c;拜拜&#xff01;

写代码,为什么还需要作图?

引言 古人云 &#xff1a;一图胜千言&#xff0c;闲人说&#xff1a;无图无真相。 在日常的聊天工具当中&#xff0c;无论是使用微信&#xff0c;还是钉钉。使用图片或表情包的频次越来越高&#xff0c;那是为什么呢&#xff1f;其实在互联网没有那么发达的时候&#xff0c;我…

【Linux】:命令行参数

朋友们、伙计们&#xff0c;我们又见面了&#xff0c;本期来给大家解读一下有关Linux命令行参数的相关知识点&#xff0c;如果看完之后对你有一定的启发&#xff0c;那么请留下你的三连&#xff0c;祝大家心想事成&#xff01; C 语 言 专 栏&#xff1a;C语言&#xff1a;从入…

禹神electron学习~

最近时间比较富裕 咱们浅浅来学习下electron 视频在这禹神&#xff1a;一小时快速上手Electron&#xff0c;前端Electron开发教程_哔哩哔哩_bilibili 先看下流程模型 先决条件 首先第一步 查看你的node和npm版本 创建你的应用 创建一个文件夹 我创建的名称为my-electron-…

Transformer动画讲解 - 工作原理

Transformer模型在多模态数据处理中扮演着重要角色,其能够高效、准确地处理包含不同类型(如图像、文本、音频、视频等)的多模态数据。 Transformer工作原理四部曲:Embedding(向量化)、Attention(注意力机制)、MLPs(多层感知机)和Unembedding(模型输出)。 阶段一:…

机器人控制系列教程之任务空间运动控制器搭建(2)

Simulink中的实例 推文《机器人控制系列教程之任务空间运动控制器搭建(1)》中&#xff0c;我们详细的讲解了Simulink中的taskSpaceMotionModel模块&#xff0c;实现的方式可以按照如下的步骤。 可以控制器模型替换为taskSpaceMotionModel模块后&#xff0c;该模块的输入分别为…

501、二叉搜索树中的众数

给你一个含重复值的二叉搜索树&#xff08;BST&#xff09;的根节点 root &#xff0c;找出并返回 BST 中的所有 众数&#xff08;即&#xff0c;出现频率最高的元素&#xff09;。如果树中有不止一个众数&#xff0c;可以按 任意顺序 返回。 假定 BST 满足如下定义&#xff1…

解锁跨境电商新边界:Temu API接口深度解析引言

引言 在竞争激烈的跨境电商领域&#xff0c;高效、精准的数据获取成为商家制胜的关键。Temu&#xff08;拼多多跨境电商&#xff09;作为行业内的新秀&#xff0c;其API接口服务为商家提供了强大的数据交互能力&#xff0c;尤其是其获取商品详情的核心功能&#xff0c;更是为商…

Python 文件操作

文件编码 将文件的内容翻译为二进制 文件操作 打开文件 open函数 语法&#xff1a; open(name, mode, encoding)name&#xff1a;文件名的字符串&#xff0c;可以包含具体路径。若没有路径&#xff0c;则默认为与py文件位于同一层 mode&#xff1a;打开文件的模式&#xf…

新质生产力最新测算(Shp/dta/xcel格式,2012-2022年)

数据简介&#xff1a;参考学者蔡湘杰、贺正楚的做法、我们通过收集数据构建了如下所示的衡量新质生产力的指标体系&#xff0c;但部分数据由于收集难度以及未公布等问题&#xff0c;部分数据有缺少&#xff0c;下面展示了部分原始数据&#xff0c;便于大家进行分析。 数据来源…

RedHat9 | 内部YUM本地源服务器搭建

服务器参数 标识公司内部YUM服务器主机名yum-server网络信息192.168.37.1/24网络属性静态地址主要操作用户root 一、基础环境信息配置 修改主机名 [rootyum-server ~]# hostnamectl hostname yum-server添加网络信息 [rootyum-server ~]# nmcli connection modify ens160 …

Ansible 最佳实践:现代 IT 运维的利器

Ansible 最佳实践&#xff1a;现代 IT 运维的利器 Ansible 是一种开源的 IT 自动化工具&#xff0c;通过 SSH 协议实现远程节点和管理节点之间的通信&#xff0c;适用于配置管理、应用程序部署、任务自动化等多个场景。本文将介绍 Ansible 的基本架构、主要功能以及最佳实践&a…

免费开源的后端API服务-supabase安装和使用-简直是前端学习者福音

文章目录 它是什么安装和部署关于安装关于部署1、注册用户2、创建组织3、创建项目 创建数据库表&#xff08;填充内容&#xff09;填充数据库表 使用postman联调API 它是什么 一个开源免费的后端框架&#xff0c;firebase的替代品。可以简单理解类似于headless cms&#xff0c…