首页 > 其他分享 >如何实现Action菜单

如何实现Action菜单

时间:2024-07-01 23:29:19浏览次数:16  
标签:菜单 const 自定义 AppBar 如何 组件 Action

文章目录


我们在上一章回中介绍了"自定义标题栏"相关的内容,本章回中将介绍自定义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菜单"相关的内容就介绍到这里,欢迎大家在评论区交流与讨论!

标签:菜单,const,自定义,AppBar,如何,组件,Action
From: https://blog.csdn.net/talk_8/article/details/140111824

相关文章

  • STM32串口如何输出中文
    当你想在串口调试助手实现换行功能时却不行时,试一试将\n改为\r\n因为我用的是XCOM串口调试助手,就遇到了这样的问题而当你加入intfputc(intch,FILE*f)函数却实现不了printf,putchar调用时需要加入#include<stdio.h>并勾选魔术棒中的UseMicroLIBintfputc(intch,FILE*f)......
  • 高考报志愿,如何知道自己适合什么专业?
    选择专业是高考之后人生的又一重要步骤,选择适合自己的专业,有利于未来的就业和生活。对于专业选择问题,很多人也表现的格外的慎重,也综合了多方面因素进行考虑,但始终对自己筛选下来的专业并不满意,那么哪些举措能让我们知道自己适合什么专业呢?一、做好人生规划高考是一次人才分流......
  • 如何使用C++进行文件读写操作
    在C++中,我们可以使用标准库中的 <fstream>(文件流)来进行文件的读写操作。以下是一些基本的文件读写操作的示例。读取文件cpp复制代码#include<fstream>#include<iostream>#include<string>intmain(){std::ifstreamfile("example.txt");//打开文件以进行读取操......
  • C++11中如何创建线程
    在C++11中,创建线程变得非常简单和标准化,因为C++11引入了线程库(<thread>)。这个库提供了std::thread类,使得创建和管理线程变得更加直接和方便。以下是如何在C++11中创建线程的基本步骤:包含线程库:首先,你需要包含<thread>头文件,以便使用std::thread。定义线程将要执行的函数或可......
  • 【git】github如何上传超过100MB大小的单个文件
    在使用GitHub进行版本控制时,默认情况下,单个文件的大小限制为100MB。如果你需要上传超过这个大小的文件,可以使用GitLFS(LargeFileStorage)。GitLFS是一种Git扩展,专门用于处理大文件,它将大文件替换为轻量级的指针,并将实际的文件内容存储在远程服务器上。1.安装从Git2......
  • iPhone苹果手机iOS18如何隐藏打开APP怎么找出来恢复隐藏APP?
    iPhone苹果手机如何隐藏APP?1、iPhone苹果手机上一些APP不想让别人看到可以设置为隐藏APP,请长按要设置隐藏的APP,选择需要面容ID;2、然后再接着选择隐藏并需要面容ID,选择后手机桌面将不在显示该APP;iPhone苹果手机隐藏APP怎么打开?1、滑动苹果iPhone手机到最后一屏的APP......
  • 为PPT加密:如何设置和管理“打开密码”?
    在保护演示文稿的内容时,给PPT文件设置“打开密码”是一个简单而有效的方法。今天一起来看看如何设置和管理PPT文件的“打开密码”吧!一、设置PPT“打开密码” 首先,打开需要加密的PPT文件,点击左上角的“文件”选项卡,在“信息”页面中,选择“保护演示文稿”选项,然后点击“用密码......
  • WordPress 5.5+ 如何自定义XML 站点地图功能
    关键要点在WordPress5.5中,WordPress将导出一个站点地图索引文件/wp-sitemap.xml。这是主要的XML文件,其中包含WordPress网站公开的所有站点地图页面的列表。该站点地图索引最多可容纳50000个站点地图,单个站点地图最多可容纳2000个条目(可过滤)。默认情况下,将为所有公开和可公开查......
  • 测试人员如何高效规避冗余测试
    在软件开发过程中,测试是确保产品质量的关键环节。然而,冗余测试不仅浪费时间和资源,还可能导致测试结果的不准确和效率低下。如何高效地规避冗余测试,成为每个测试人员面临的重要课题。那么,测试人员应如何高效规避冗余测试?有哪些方法和策略能够帮助我们优化测试流程,提升测试效率?......
  • 如何读论文
    论文的结构标题摘要引言算法实验结论读论文的方法第1遍(海选):用十几分钟事件读标题、摘要、结论以及算法和实验中的图表,判断论文质量与方向第2遍(精选):如果文章是需要读的,从头开始往下看,重点看图表,圈出文献,知道论文解决什么问题,用了什么方法第3遍(重点研读):如果文章很好的话,......