鸿蒙界面开发——组件（5）：菜单Menu 绑定菜单

news2024/12/26 10:39:21

菜单组件Menu

Menu组件需和bindMenu或bindContextMenu方法配合使用，不支持作为普通组件单独使用。
Menu 以垂直列表形式显示的菜单。包含MenuItem、MenuItemGroup子组件。

Menu()作为菜单的固定容器，无参数。
MenuItem(value?: MenuItemOptions| CustomBuilder)
MenuItemGroup(value?: MenuItemGroupOptions)

Menu() {
  MenuItem({....})
  MenuItemGroup({ header: '小标题' }) {
    MenuItem({...})
    MenuItem({...})
    ...
  }
}

菜单和菜单项宽度计算规则：
布局过程中，期望每个菜单项的宽度一致。
若子组件设置了宽度，则以尺寸计算规则为准。
不设置宽度的情况：菜单组件会对子组件MenuItem、MenuItemGroup设置默认2栅格的宽度，若菜单项内容区比2栅格宽，则会自适应撑开。
设置宽度的情况：菜单组件会对子组件MenuItem、MenuItemGroup设置减去padding后的固定宽度。

MenuItem参数MenuItemOptions枚举说明
startIcon ResourceStr 否 item中显示在左侧的图标信息路径。
content ResourceStr 否 item的内容信息。
endIcon ResourceStr 否 item中显示在右侧的图标信息路径。
labelInfo ResourceStr 否定义结束标签信息，如快捷方式Ctrl+C等。
builder CustomBuilder 否用于构建二级菜单。
symbolStartIcon SymbolGlyphModifier 否 item中显示在左侧的HMSymbol图标信息路径。配置该项时，原先startIcon图标不显示。
symbolEndIcon SymbolGlyphModifier 否 item中显示在右侧的HMSymbol图标信息路径。配置该项时，原先endIcon图标不显示。

MenuItemGroup参数MenuItemGroupOptions对象说明
header ResourceStr | CustomBuilder 否设置对应group的标题显示信息。
footer ResourceStr | CustomBuilder 否设置对应group的尾部显示信息。

Menu 属性

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

font(value: Font) 统一设置Menu中所有文本的尺寸。
fontColor(value: ResourceColor)统一设置Menu中所有文本的颜色。
radius(value: Dimension | BorderRadiuses)设置Menu边框圆角半径。默认值：2in1设备上默认值为8vp，其他设备上默认值为20vp。
从API version 12开始，当水平方向两个圆角半径之和的最大值大于菜单宽度，或垂直方向两个圆角半径之和的最大值大于菜单高度时，菜单四个圆角均采用菜单默认圆角半径值。
width(value: Length)设置Menu边框宽度，支持设置的最小宽度为64vp。
menuItemDivider(options: DividerStyleOptions | undefined)设置menuItem分割线样式, 不设置该属性则不展示分割线。
startMargin + endMargin 超过组件宽度后startMargin和endMargin会被置0。
-strokeWidth:分割线的线宽。
-color：分割线的颜色。
-startMargin：分割线与menuItem侧边起端的距离。
-endMargin：分割线与menuItem侧边结束端的距离。
menuItemGroupDivider(options: DividerStyleOptions | undefined)
设置menuItemGroup上下分割线的样式, 不设置该属性则默认展示分割线。
subMenuExpandingMode(mode: SubMenuExpandingMode)
设置Menu子菜单展开样式。
SIDE_EXPAND 默认展开样式, 子菜单位于同一平面侧边展开。
EMBEDDED_EXPAND 直接展开样式, 子菜单嵌于主菜单内展开。
STACK_EXPAND 堆叠样式, 子菜单浮于主菜单上方展开。

MenuItem属性

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

selected(value: boolean) 设置菜单项是否选中。
selectIcon(value: boolean | ResourceStr | SymbolGlyphModifier)设置当菜单项被选中时，是否显示被选中的图标。
contentFont(value: Font)设置菜单项中内容信息的字体样式。
contentFontColor(value: ResourceColor)设置菜单项中内容信息的字体颜色。
labelFont(value: Font)设置菜单项中标签信息的字体样式。
labelFontColor(value: ResourceColor)设置菜单项中标签信息的字体颜色。

事件
onChange(callback: (selected: boolean) => void)当选中状态发生变化时，触发该回调。只有手动触发且MenuItem状态改变时才会触发onChange回调。

菜单控制——为组件绑定弹出式菜单

为组件绑定弹出式菜单，弹出式菜单以垂直列表形式显示菜单项，可通过长按、点击或鼠标右键触发。
在这里插入图片描述

bindMenu

给组件绑定菜单，点击后弹出菜单。弹出菜单项支持图标+文本排列和自定义两种功能。

bindMenu(content: Array<MenuElement> | CustomBuilder, options?: MenuOptions)
bindMenu(isShow: boolean, content: Array<MenuElement> | CustomBuilder, options?: MenuOptions)

isShow(11+) boolean 是支持开发者通过状态变量控制显隐，默认值为false，menu弹窗必须等待页面全部构建才能展示，因此不能在页面构建中设置为true，否则会导致显示位置及形状错误，当前不支持双向绑定。
content Array | CustomBuilder 是配置菜单项图标和文本的数组，或者自定义组件。
options MenuOptions 否配置弹出菜单的参数。

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

MenuElement包含
value ResourceStr 是菜单项文本。
icon ResourceStr 否菜单项图标。
enabled boolean 否菜单条目是否可进行交互。默认值：true, 菜单条目可以进行交互。
action () => void 是点击菜单项的事件回调。
symbolIcon SymbolGlyphModifier 否设置菜单项图标。通过Modifier配置菜单项图标，配置该项时，原icon图标不显示。

MenuOptions继承自ContextMenuOptions。
title ResourceStr 否菜单标题。仅在content设置为Array 时生效。
showInSubWindow boolean 否是否在子窗口显示菜单。默认值：2in1设备为true，其他设备为false。

bindContextMenu

给组件绑定菜单，触发方式为长按或者右键点击，弹出菜单项需要自定义。

bindContextMenu(content: CustomBuilder, responseType: ResponseType, options?: ContextMenuOptions)
bindContextMenu(isShown: boolean, content: CustomBuilder, options?: ContextMenuOptions)

content CustomBuilder 是自定义菜单内容构造器。
responseType ResponseType 是菜单弹出条件，长按或者右键点击。不支持鼠标长按。
options ContextMenuOptions 否配置弹出菜单的参数。
isShown boolean 是支持开发者通过状态变量控制显隐，默认值为false。menu需要在页面全部构建完成后才能弹窗展示，如果在页面构建前或构建中设置为true，可能导致显示位置及形状错误、无法正常弹出显示等问题。当前不支持双向绑定，不支持长按触发拖拽。
sShown为true，弹出菜单。isShown为false，隐藏菜单。弹出菜单项需要自定义。

ContextMenu.close关闭菜单

static close()可以通过该方法在页面范围内关闭通过bindContextMenu给组件绑定的菜单。

 .bindContextMenu(this.MenuBuilder, ResponseType.LongPress)
 .onDragStart(()=>{
   // 拖拽时关闭菜单
   ContextMenu.close()
 })