OpenHarmony/Harmony最新组件菜单Menu

本文主要带大家了解OpenHarmony/Harmony最新组件菜单Menu

作者：坚果

团队：坚果组织

公众号："大前端之旅"

润开鸿技术专家，华为HDE，InfoQ签约作者，OpenHarmony布道师，擅长HarmonyOS应用开发、跨平台Flutter开发、熟悉服务卡片开发、小程序开发、GO的相关开发。开源项目gin-vue-admin成员之一，先后在CSDN等平台分享了多篇技术文章，在“战码先锋”活动中作为大队长，累计培养三个小队长，带领100+队员完成Pr的提交合入。

Menu

以垂直列表形式显示的菜单。

演示：

image-20230321135608932

子组件

包含MenuItem、MenuItemGroup子组件。

接口

Menu()

作为菜单的固定容器，无参数。

属性

除支持通用属性外，还支持以下属性:

• fontsize:Length类型，统一设置Menu中所有文本的尺寸，Length为number类型时，使用fp单位。

MenuItem

用来展示菜单Menu中具体的item菜单项。

接口

MenuItem(value?: MenuItemOptions| CustomBuilder)

参数：

• value：MenuItemOptions|CustomBuilder类型，表示包含设置MenuItem的各项信息。

MenuItemOptions类型说明

• startIcon：表示item中显示在左侧的图标信息路径。
• content：item的内容信息。
• endIcon：item中显示在右侧的图标信息路径。
• labelInfo：定义结束标签信息，如快捷方式Ctrl+C等。
• builder：CustomBuilder类型，用于构建二级菜单。注意CustomBuilder类型，组件属性方法参数可使用CustomBuilder类型来自定义UI描述。

declare interface MenuItemOptions {
  startIcon?: ResourceStr;

  content?: ResourceStr;
  endIcon?: ResourceStr;
  labelInfo?: ResourceStr;
  builder?: CustomBuilder;
}

属性

除支持通用属性外，还支持以下属性:

• selected  ：设置菜单项是否选中。默认值：false
• selectIcon： 当菜单项被选中时，是否显示被选中的图标。

事件

• onChange：(selected: boolean) => void 。当选中状态发生变化时，触发该回调。只有手动触发且MenuItem状态改变时才会触发onChange回调。- value为true时，表示已选中。- value为false时，表示未选中。

MenuItemGroup

该组件用来展示菜单MenuItem的分组。

子组件

包含MenuItem子组件。

接口

MenuItemGroup(value?: MenuItemGroupOptions)

参数：

• value：MenuItemGroupOptions类型。包含设置MenuItemGroup的标题和尾部显示信息。

MenuItemGroupOptions类型说明

declare interface MenuItemGroupOptions {
   header?: ResourceStr | CustomBuilder;
   footer?: ResourceStr | CustomBuilder;
 }

• header：设置对应group的标题显示信息。
• footer：设置对应group的尾部显示信息。

资料

Length

长度类型，用于描述尺寸单位。

类型	说明
string	需要显式指定像素单位，如'10px'，也可设置百分比字符串，如'100%'。
number	默认单位vp。
Resource	资源引用类型，引入系统资源或者应用资源中的尺寸。

Resource

资源引用类型，用于设置组件属性的值。

可以通过rawfile创建Resource类型对象，不可以修改Resource中的各属性的值。

• $r('belonging.type.name')

  belonging：系统资源或者应用资源，相应的取值为'sys'和'app'；

  type：资源类型，支持'color'、'float'、'string'、'media'等；

  name：资源名称，在资源定义时确定。

• $rawfile('filename')

  filename：工程中resources/rawfile目录下的文件名称。

  说明：在引用资源类型时，注意其数据类型要与属性方法本身的类型一致，例如某个属性方法支持设置string | Resource，那么在使用Resource引用类型时，其数据类型也应当为string。

CustomBuilder

组件属性方法参数可使用CustomBuilder类型来自定义UI描述。

• CustomBuilder：() => any：该方法类型必须使用@Builder装饰器修饰。具体用法见@Builder。