本文主要带大家了解OpenHarmony/Harmony最新组件菜单Menu
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类型说明
代码语言：javascript复制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。
