首页 > 其他分享 >鸿蒙UI系统组件10——菜单(Menu)

鸿蒙UI系统组件10——菜单(Menu)

时间:2024-07-26 22:54:20浏览次数:17  
标签:10 菜单 media app content UI Menu MenuItem

果你也对鸿蒙开发感兴趣,加入“Harmony自习室”吧!扫描下面名片,关注公众号。

Menu是菜单接口,一般用于鼠标右键弹窗、点击弹窗等。

1、创建默认样式的菜单

菜单需要调用bindMenu接口来实现。bindMenu响应绑定组件的点击事件,绑定组件后手势点击对应组件后即可弹出。

Button('click for Menu')  .bindMenu([  {    value: 'Menu1',    action: () => {      console.info('handle Menu1 select')    }  }       ])

图片

2、创建自定义样式的菜单

当默认样式不满足开发需求时,可使用@Builder自定义菜单内容。可通过bindMenu接口进行菜单的自定义。

step1: @Builder开发菜单内的内容​​​​​​​

@State select: boolean = trueprivate iconStr: ResourceStr = $r("app.media.view_list_filled")private iconStr2: ResourceStr = $r("app.media.view_list_filled")@BuilderSubMenu() {  Menu() {    MenuItem({ content: "复制", labelInfo: "Ctrl+C" })    MenuItem({ content: "粘贴", labelInfo: "Ctrl+V" })  }}@BuilderMyMenu(){  Menu() {    MenuItem({ startIcon: $r("app.media.icon"), content: "菜单选项" })    MenuItem({ startIcon: $r("app.media.icon"), content: "菜单选项" }).enabled(false)    MenuItem({      startIcon: this.iconStr,      content: "菜单选项",      endIcon: $r("app.media.arrow_right_filled"),      // 当builder参数进行配置时,表示与menuItem项绑定了子菜单。鼠标hover在该菜单项时,会显示子菜单。      builder: this.SubMenu,    })    MenuItemGroup({ header: '小标题' }) {      MenuItem({ content: "菜单选项" })        .selectIcon(true)        .selected(this.select)        .onChange((selected) => {       console.info("menuItem select" + selected);       this.iconStr2 = $r("app.media.icon");        })      MenuItem({        startIcon: $r("app.media.view_list_filled"),        content: "菜单选项",        endIcon: $r("app.media.arrow_right_filled"),        builder: this.SubMenu.bind(this)      })    }    MenuItem({      startIcon: this.iconStr2,      content: "菜单选项",      endIcon: $r("app.media.arrow_right_filled")    })  }}  

step2:bindMenu属性绑定组件​​​​​​​

Button('click for Menu')  .bindMenu(this.MyMenu)

菜单案例如下:

图片

3、创建支持右键或长按的菜单

通过bindContextMenu接口进行菜单的自定义及菜单弹出的触发方式:右键或长按。使用bindContextMenu弹出的菜单项是在独立子窗口内的,可显示在应用窗口外部。

  • @Builder开发菜单内的内容与上文写法相同。

        确认菜单的弹出方式,使用bindContextMenu属性绑定组件。示例中为右键弹出菜单。

Button('click for Menu')  .bindContextMenu(this.MyMenu, ResponseType.RightClick)

标签:10,菜单,media,app,content,UI,Menu,MenuItem
From: https://blog.csdn.net/harmonyClassRoom/article/details/140726363

相关文章

  • imgui中文字体库导入乱码问题
    1.中文字体库导入乱码问题1.修改clion中的文件编码配置2.按住Ctrl+Shift+Alt+/,选中Registry…,然后取消run.processes.with.pty3.cmakelist.txt导入字体文件,注意不要加u8了,不然会乱码#字体文件include_directories(${PROJECT_SOURCE_DIR}/include/fonts)然后mai......
  • DAY10 栈与队列part01
     理论基础文章讲解:https://programmercarl.com/%E6%A0%88%E4%B8%8E%E9%98%9F%E5%88%97%E7%90%86%E8%AE%BA%E5%9F%BA%E7%A1%80.html232.用栈实现队列 注意为什么要用两个栈题目链接/文章讲解/视频讲解:https://programmercarl.com/0232.%E7%94%A8%E6%A0%88%E5%AE%9E%E7%8E%......
  • ios CCUIImage.m
    ////CCUIImage.h//CCFC_IPHONE////#ifndefCC_UI_IMAGE_H#defineCC_UI_IMAGE_H#ifdef__OBJC__#import"CCConfig.h"#defineCREATE_UIIMAGE(imgPath)[UIImageimageNamed:(imgPath)]#defineCREATE_UIIMAGEVIEW(imgPath)[[......
  • 【深海王国】小学生都能玩的单片机!番外1:Arduino家族Uno-Mega-Nano-Pro Mini-ATtiny85
    Hi٩(๑^o^๑)۶,各位深海王国的同志们,早上下午晚上凌晨好呀~辛勤工作的你今天也辛苦啦(o゜▽゜)o☆今天大都督继续为大家带来单片机的番外系列——小学生都能玩的单片机!番外1带你快速学习认识Arduino家族:Uno、Mega、Nano、ProMini、ATtiny85,了解它们的使用场景与优......
  • 数学建模竞赛中应掌握的10类算法
    数学建模竞赛中应掌握的10类算法这篇文章是搬运自2004年发表在MATHEMATICALMODELING即《数模》上的一篇文章,作者是董乘宇,曾任SHUMO.COM论坛“编程交流”版版主,获2002年全国大学生数学建模竞赛一等奖。尽管这篇文章至今已经有了整整20年的时间,但考虑到在数学建模领域或者......
  • 【待做】【AI+安全】数据集:图像分类数据集-1000
    图像分类数据集-1000Sort_1000pics数据集包含了1000张图片,总共分为10大类,分别是人(第0类)、沙滩(第1类)、建筑(第2类)、大卡车(第3类)、恐龙(第4类)、大象(第5类)、花朵(第6类)、马(第7类)、山峰(第8类)和食品(第9类),每类100张。内容类型:图像样本使用范围:图像分类、恶意家族分类推荐理由:个人感......
  • P10218-魔法手杖
    题面\(O(nk^2)\)我们考虑如果确定了\(ans\),如何判断是否合法?考虑从高到低逐位确定\(x\)。设\(ans\)和\(x\)的第\(i\)位为\(ans_i,x_i\)。分类讨论一波:如果\(ans_i\)为:0:无论\(x_i\)取什么,总有一边在异或\(x\)后第\(i\)位为1。\(x_i=0\),那么右子树一定......
  • YOLOv10改进 | 独家创新- 注意力篇 | YOLOv10引入结合ECA和NRMS形成全新的ERMS注意力
    1. ERMS介绍     (1).整合通道和空间注意力机制:     ECA模块专注于通道间的交互,通过全局平均池化提取每个通道的全局信息,然后通过一维卷积生成每个通道的权重,最终使用Sigmoid激活函数得到通道注意力权重,从而增强重要通道的特征。然而,ECA模块没有考虑到......
  • 【待做】【AI+安全】数据集:HTTP DATASET CSIC 2010
    HTTPDATASETCSIC2010HTTPDATASETCSIC2010包含已经标注过的针对Web服务的请求。该数据集由西班牙最高科研理事会CSIC在论文ApplicationoftheGenericFeatureSelectionMeasureinDetectionofWebAttacks中作为附件给出的,是一个电子商务网站的访问日志,包含36000......
  • 限时10分钟,你会怎么实现这段async/await代码?
    ......