1# 菜单控制 2 3为组件绑定弹出式菜单，弹出式菜单以垂直列表形式显示菜单项，可通过长按、点击或鼠标右键触发。 4 5> **说明：** 6> 7> - 从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 8> 9> - CustomBuilder里不支持再使用bindMenu、bindContextMenu弹出菜单。多级菜单可使用[Menu组件](ts-basic-components-menu.md)。 10> 11> - 弹出菜单的文本内容不支持长按选中。 12> 13> - 当窗口大小发生变化时，菜单自动隐藏。 14> 15> - 若组件是可拖动节点，绑定bindContextMenu未指定preview时，菜单弹出会浮起拖拽预览图且菜单选项和预览图不会发生避让。对此，开发者可根据使用场景设置preview或者将目标节点设置成不可拖动节点。 16> 17> - 从API version 12开始，菜单支持长按500ms弹出子菜单，支持按压态跟随手指移动。 18> 19> 1. 仅支持使用[Menu组件](ts-basic-components-menu.md)且子组件包含[MenuItem](ts-basic-components-menuitem.md)或[MenuItemGroup](ts-basic-components-menuitemgroup.md)的场景。 20> 21> 2. 仅支持[MenuPreviewMode](#menupreviewmode11)为NONE的菜单。 22 23 24## bindMenu 25 26bindMenu(content: Array<MenuElement> | CustomBuilder, options?: MenuOptions) 27 28给组件绑定菜单，点击后弹出菜单。弹出菜单项支持图标+文本排列和自定义两种功能。 29 30**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 31 32**系统能力：** SystemCapability.ArkUI.ArkUI.Full 33 34**参数：** 35 36| 参数名 | 类型 | 必填 | 说明 | 37| ------- | ------------------------------------------------------------ | ---- | -------------------------------------------- | 38| content | Array<[MenuElement](#menuelement)> \| [CustomBuilder](ts-types.md#custombuilder8) | 是 | 配置菜单项图标和文本的数组，或者自定义组件。 | 39| options | [MenuOptions](#menuoptions10) | 否 | 配置弹出菜单的参数。 | 40 41## bindMenu<sup>11+</sup> 42 43bindMenu(isShow: boolean, content: Array<MenuElement> | CustomBuilder, options?: MenuOptions) 44 45给组件绑定菜单，点击后弹出菜单。弹出菜单项支持图标+文本排列和自定义两种功能。 46 47**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 48 49**系统能力：** SystemCapability.ArkUI.ArkUI.Full 50 51**参数：** 52 53| 参数名 | 类型 | 必填 | 说明 | 54| -------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 55| isShow<sup>11+</sup> | boolean | 是 | 支持开发者通过状态变量控制显隐，默认值为false，菜单必须等待页面全部构建才能展示，因此不能在页面构建中设置为true，否则会导致显示位置及形状错误，该参数从API version13开始支持[!!语法](../../../ui/state-management/arkts-new-binding.md#系统组件参数双向绑定)双向绑定变量。 | 56| content | Array<[MenuElement](#menuelement)> \| [CustomBuilder](ts-types.md#custombuilder8) | 是 | 配置菜单项图标和文本的数组，或者自定义组件。 | 57| options | [MenuOptions](#menuoptions10) | 否 | 配置弹出菜单的参数。 | 58 59## bindContextMenu<sup>8+</sup> 60 61bindContextMenu(content: CustomBuilder, responseType: ResponseType, options?: ContextMenuOptions) 62 63给组件绑定菜单，触发方式为长按或者右键点击，弹出菜单项需要自定义。 64 65**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 66 67**系统能力：** SystemCapability.ArkUI.ArkUI.Full 68 69**参数：** 70 71| 参数名 | 类型 | 必填 | 说明 | 72| ------------ | -------------------------------------------------- | ---- | -------------------------------- | 73| content | [CustomBuilder](ts-types.md#custombuilder8) | 是 | 自定义菜单内容构造器。 | 74| responseType | [ResponseType](ts-appendix-enums.md#responsetype8) | 是 | 菜单弹出条件，长按或者右键点击。不支持鼠标长按。 | 75| options | [ContextMenuOptions](#contextmenuoptions10) | 否 | 配置弹出菜单的参数。 | 76 77## bindContextMenu<sup>12+</sup> 78 79bindContextMenu(isShown: boolean, content: CustomBuilder, options?: ContextMenuOptions) 80 81给组件绑定菜单，触发方式为控制绑定的isShown。 82 83isShown为true，弹出菜单。isShown为false，隐藏菜单。弹出菜单项需要自定义。 84 85菜单弹出不跟随点击位置，只与placement设置有关。 86 87 88**系统能力：** SystemCapability.ArkUI.ArkUI.Full 89 90**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 91 92**参数：** 93 94| 参数名 | 类型 | 必填 | 说明 | 95| ------------ | -------------------------------------------------- | ---- | -------------------------------------------- | 96| isShown | boolean | 是 | 支持开发者通过状态变量控制显隐，默认值为false。菜单需要在页面全部构建完成后才能展示，如果在页面构建前或构建中设置为true，可能导致显示位置及形状错误、无法正常弹出显示等问题。不支持长按触发拖拽。该参数从API version13开始支持[!!语法](../../../ui/state-management/arkts-new-binding.md#系统组件参数双向绑定)双向绑定变量。 | 97| content | [CustomBuilder](ts-types.md#custombuilder8) | 是 | 自定义菜单内容构造器。 | 98| options | [ContextMenuOptions](#contextmenuoptions10) | 否 | 配置弹出菜单的参数。 | 99 100## MenuElement 101 102| 名称 | 类型 | 必填 | 说明 | 103| --------------------- | -------------------------------------- | ---- | ------------------------------------------------------------ | 104| value | [ResourceStr](ts-types.md#resourcestr) | 是 | 菜单项文本。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 105| icon<sup>10+</sup> | [ResourceStr](ts-types.md#resourcestr) | 否 | 菜单项图标。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 106| enabled<sup>11+</sup> | boolean | 否 | 菜单条目是否可进行交互。<br/>默认值：true，菜单条目可以进行交互。<br/>值为false时，菜单条目不可以进行交互。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 107| action | () => void | 是 | 点击菜单项的事件回调。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 108| symbolIcon<sup>12+</sup> | [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | 否 | 设置菜单项图标。通过Modifier配置菜单项图标，配置该项时，原icon图标不显示。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 109 110## MenuOptions<sup>10+</sup> 111 112继承自[ContextMenuOptions](#contextmenuoptions10)。 113 114| 名称 | 类型 | 必填 | 说明 | 115| ----------------------------- | -------------------------------------- | ---- | ------------------------------------------------------------ | 116| title | [ResourceStr](ts-types.md#resourcestr) | 否 | 菜单标题。<br>**说明：**<br/>仅在content设置为Array<[MenuElement](#menuelement)> 时生效。<br>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 117| showInSubWindow<sup>11+</sup> | boolean | 否 | 是否在子窗口显示菜单。<br/>默认值：true<br>**说明：** <br/>在bindMenu中，仅对2in1设备生效。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 118 119## ContextMenuOptions<sup>10+</sup> 120 121| 名称 | 类型 | 必填 | 说明 | 122| --------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 123| offset | [Position](ts-types.md#position) | 否 | 菜单弹出位置的偏移量，不会导致菜单显示超出屏幕范围。<br/>默认值：{ x: 0，y: 0 }，不支持设置百分比。<br/>**说明：** <br />菜单类型为相对⽗组件区域弹出时，⾃动根据菜单位置属性 (placement)将区域的宽或⾼计⼊偏移量中。<br/>当菜单相对父组件出现在上侧时（placement设置为Placement.TopLeft，Placement.Top，Placement.TopRight），x为正值，菜单相对组件向右进行偏移，y为正值，菜单相对组件向上进行偏移。<br/>当菜单相对父组件出现在下侧时（placement设置为Placement.BottomLeft，Placement.Bottom，Placement.BottomRight），x为正值，菜单相对组件向右进行偏移，y为正值，菜单相对组件向下进行偏移。<br/>当菜单相对父组件出现在左侧时（placement设置为Placement.LeftTop，Placement.Left，Placement.LeftBottom），x为正值，菜单相对组件向左进行偏移，y为正值，菜单相对组件向下进行偏移。<br/>当菜单相对父组件出现在右侧时（placement设置为Placement.RightTop，Placement.Right，Placement.RightBottom），x为正值，菜单相对组件向右进行偏移，y为正值，菜单相对组件向下进行偏移。<br/>如果菜单调整了显示位置（与placement初始值主方向不⼀致），则偏移值 (offset) 失效。<br />**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 124| placement | [Placement](ts-appendix-enums.md#placement8) | 否 | 菜单组件优先显示的位置，当前位置显示不下时，会自动调整位置。<br/>**说明：**<br />placement值设置为undefined、null或没有设置此选项时，按未设置placement处理，当使用[bindMenu](#bindmenu11)，按默认值：Placement.BottomLeft设置，当使用[bindContextMenu<sup>8+</sup>](#bindcontextmenu8)，菜单跟随点击位置弹出；当使用[bindContextMenu<sup>12+</sup>](#bindcontextmenu12)，按默认值：Placement.BottomLeft设置。<br />**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 125| enableArrow | boolean | 否 | 是否显示箭头。如果菜单的大小和位置不足以放置箭头时，不会显示箭头。 <br/>默认值：false，不显示箭头。<br/>**说明：**<br />enableArrow为true时，placement未设置或者值为非法值，默认在目标物上方显示，否则按照placement的位置优先显示。当前位置显示不下时，会自动调整位置，enableArrow为undefined时，不显示箭头。bindContextMenu从API version 10开始支持该属性；bindMenu从API version 12开始支持该属性。<br />**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 126| enableHoverMode<sup>18+</sup> | boolean | 否 | 菜单组件是否响应悬停态变化。如果菜单的点击位置在悬停态折痕区域，菜单组件不会响应悬停态。 <br/>默认值：false，菜单组件不响应悬停态变化。<br/>**说明：**<br />enableHoverMode为false、未设置或者值为非法值时，菜单组件不会响应悬停态，enableHoverMode为true时，响应悬停态。<br />**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 | 127| arrowOffset | [Length](ts-types.md#length) | 否 | 箭头在菜单处的偏移。偏移量必须合法且转换为具体数值时大于0才会生效，另外该值生效时不会导致箭头超出菜单四周的安全距离。<br/>默认值：0<br />单位：vp<br />**说明：**<br />箭头距菜单四周的安全距离为菜单圆角大小与箭头宽度的一半之和。<br />根据配置的placement来计算是在水平还是垂直方向上偏移。<br />箭头在菜单水平方向时，偏移量为箭头至最左侧箭头安全距离处的距离。箭头在菜单垂直方向时，偏移量为箭头至最上侧箭头安全距离处的距离。<br />根据配置的placement的不同，箭头展示的默认位置不同：<br />在菜单不发生避让的情况下，placement设置为Placement.Top、Placement.Bottom时，箭头显示在水平方向且默认居中；<br />placement设置为Placement.Left、Placement.Right时，箭头显示在垂直方向且默认居中；<br />placement设置为Placement.TopLeft、Placement.BottomLeft时，箭头默认显示在水平方向，且距离菜单左侧边缘距离为箭头安全距离；<br />placement设置为Placement.TopRight、Placement.BottomRight时，箭头默认显示在水平方向，且距离菜单右侧距离为箭头安全距离；<br />placement设置为Placement.LeftTop、Placement.RightTop时，箭头默认显示在垂直方向，且距离菜单上侧距离为箭头安全距离；<br />placement设置为Placement.LeftBottom、Placement.RightBottom时，箭头默认显示在垂直方向，且距离菜单下侧距离为箭头安全距离；<br /> bindContextMenu从API version 10开始支持该属性；bindMenu从API version 12开始支持该属性。<br />**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 128| preview<sup>11+</sup> | [MenuPreviewMode](#menupreviewmode11)\| [CustomBuilder](ts-types.md#custombuilder8) | 否 | 长按悬浮菜单或使用[bindContextMenu<sup>12+</sup>](#bindcontextmenu12)显示菜单的预览内容样式，可以为目标组件的截图，也可以为用户自定义的内容。<br/>默认值：MenuPreviewMode.NONE，无预览内容。<br/>**说明：**<br />- 不支持responseType为ResponseType.RightClick时触发，如果responseType为ResponseType.RightClick，则不会显示预览内容。<br />- 当未设置preview参数或preview参数设置为MenuPreviewMode.NONE时，enableArrow参数生效。<br />- 当preview参数设置为MenuPreviewMode.IMAGE或CustomBuilder时，enableArrow为true时也不显示箭头。<br />**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 129| previewAnimationOptions<sup>11+</sup> | [ContextMenuAnimationOptions](#contextmenuanimationoptions11) | 否 | 控制长按预览显示动画开始倍率和结束倍率（相对预览原图比例）。<br/>默认值：{ scale: [0.95, 1.1], transition: undefined, hoverScale: undefined }。<br/>**说明：**<br />倍率设置参数小于等于0时，不生效。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 130| onAppear | () => void | 否 | 菜单弹出时的事件回调。<br />**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 131| onDisappear | () => void | 否 | 菜单消失时的事件回调。<br />**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 132| aboutToAppear | () => void | 否 | 菜单显示动效前的事件回调。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 133| aboutToDisappear | () => void | 否 | 菜单退出动效前的事件回调。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 134| backgroundColor<sup>11+</sup> | [ResourceColor](ts-types.md#resourcecolor) | 否 | 菜单背板颜色。<br/>默认值：Color.Transparent。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 135| backgroundBlurStyle<sup>11+</sup> | [BlurStyle](ts-universal-attributes-background.md#blurstyle9) | 否 | 菜单背板模糊材质。<br/>默认值：BlurStyle.COMPONENT_ULTRA_THICK。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 136| transition<sup>12+</sup> | [TransitionEffect](ts-transition-animation-component.md#transitioneffect10对象说明) | 否 | 设置菜单显示和退出的过渡效果。<br/>**说明：**<br />菜单退出动效过程中，进行横竖屏切换，菜单会避让。二级菜单不继承自定义动效。弹出过程可以点击二级菜单，退出动效执行过程不允许点击二级菜单。<br />详细描述见[TransitionEffect](ts-transition-animation-component.md#transitioneffect10对象说明)对象说明。 <br/>动效曲线使用弹簧曲线，在动效退出时，由于弹簧曲线的回弹震荡，菜单消失后有较长的拖尾，使得其他事件无法响应。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 137| borderRadius<sup>12+</sup> | [Length](ts-types.md#length) \| [BorderRadiuses](ts-types.md#borderradiuses9) \| [LocalizedBorderRadiuses](ts-types.md#localizedborderradiuses12) | 否 | 设置菜单的边框圆角半径。<br/>默认值：2in1设备上默认值8vp，其他设备上默认值20vp。<br />**说明：** <br /> 支持百分比。<br />当水平方向两个圆角半径之和的最大值超出菜单宽度或垂直方向两个圆角半径之和的最大值超出菜单高度时，采用菜单默认圆角半径值。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 138| layoutRegionMargin<sup>13+</sup> | [Margin](ts-types.md#margin) | 否 | 设置预览图与菜单布局时距上下左右边界的最小边距。<br />**说明：** <br/> 仅支持vp、px、fp、lpx、百分比。<br/> 当margin设置异常值或负值时，按默认值处理。<br/> 若preview为CustomBuilder，设置margin.left或margin.right时，预览图取消最大栅格的宽度限制。<br/> 注意应避免设置过大的margin导致布局区域变小，使得预览图和菜单无法正常布局。<br />当水平方向上margin之和超过布局最大宽度时，margin.left和margin.right均不生效，按默认值处理。<br/> 当垂直方向上margin之和超过布局最大高度时，margin.top和margin.bottom均不生效，按默认值处理。<br/>**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 | 139| backgroundBlurStyleOptions<sup>18+</sup> | [BackgroundBlurStyleOptions](ts-universal-attributes-background.md#backgroundblurstyleoptions10对象说明) | 否 | 背景模糊效果。<br />**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 | 140| backgroundEffect<sup>18+</sup> | [BackgroundEffectOptions](ts-universal-attributes-background.md#backgroundeffectoptions11) | 否 | 背景效果参数。<br />**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 | 141| hapticFeedbackMode<sup>18+</sup> | [HapticFeedbackMode](#hapticfeedbackmode18) | 否 | 菜单弹出时振动效果。<br/>默认值：HapticFeedbackMode.DISABLED，菜单弹出时不振动。<br />**说明：**<br />只有一级菜单可配置弹出时振动效果。<br />仅当应用具备 ohos.permission.VIBRATE 权限，且用户启用了触感反馈时才会生效。<br />**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 | 142 143## MenuPreviewMode<sup>11+</sup> 144 145**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 146 147**系统能力：** SystemCapability.ArkUI.ArkUI.Full 148 149| 名称 | 值 | 说明 | 150| ----- | - | -------------------------------------- | 151| NONE | 0 | 不显示预览内容。 | 152| IMAGE | 1 | 预览内容为触发长按悬浮菜单组件的截图。 | 153 154## ContextMenuAnimationOptions<sup>11+</sup> 155 156**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 157 158**系统能力：** SystemCapability.ArkUI.ArkUI.Full 159 160| 名称 | 类型 | 必填 | 说明 | 161| ----- | ------------------------------------------ | ---- | ------------------------------------ | 162| scale | [AnimationRange](#animationrange11)\<number> | 否 | 动画开始和结束时相对预览原图缩放比例。<br/>**说明：** <br/>缩放比例需要根据实际开发场景设置，建议设置值为小于预览图宽度或布局的最大限制。 | 163| transition<sup>12+</sup> | [TransitionEffect](ts-transition-animation-component.md#transitioneffect10对象说明) | 否 | 设置菜单显示和退出的过渡效果。<br/>**说明：**<br />菜单退出动效过程中，进行横竖屏切换，菜单会避让。二级菜单不继承自定义动效。弹出过程可以点击二级菜单，退出动效执行过程不允许点击二级菜单。<br />详细描述见[TransitionEffect](ts-transition-animation-component.md#transitioneffect10对象说明)对象说明。 | 164| hoverScale<sup>12+</sup> | [AnimationRange](#animationrange11)\<number> | 否 | 设置预览自定义长按场景下，浮起原组件截图的缩放动画开始和结束时相对预览原图缩放比例，且有与预览图的切换的过渡动效。 <br/>**说明：**<br /> 倍率设置参数小于等于0时，不生效。<br />[bindContextMenu<sup>12+</sup>](#bindcontextmenu12)场景下，不生效。<br /> 设置transition接口时，不生效。<br /> 使用此接口且同时使用scale接口时，scale接口起始值不生效。<br /> 为保障最佳体验，最终预览图尺寸不建议小于原组件截图尺寸。当前预览动效宽高会受组件截图和自定义预览大小影响，请根据实际使用情况自行保障展示效果。| 165 166## AnimationRange<sup>11+</sup> 167 168type AnimationRange\<T>=[from: T, to: T] 169 170动画开始和结束时相对预览原图缩放比例。 171 172**系统能力：** SystemCapability.ArkUI.ArkUI.Full 173 174**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 175 176| 取值范围 | 说明 | 177| ---------------- | ------------------------------------------------------------------------------ | 178| [from: T, to: T] | from表示动画开始时相对预览原图缩放比例，to表示动画结束时相对预览原图缩放比例。 | 179 180## HapticFeedbackMode<sup>18+</sup> 181 182菜单弹出时振动效果。 183 184**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 185 186**系统能力：** SystemCapability.ArkUI.ArkUI.Full 187 188| 名称 | 值 | 说明 | 189| ----- | - | -------------------------------------- | 190| DISABLED | 0 | 菜单弹出时不振动。 | 191| ENABLED | 1 | 菜单弹出时振动。 | 192| AUTO | 2 | 菜单振动效果跟随系统，当前为菜单有蒙层时振动。 | 193 194## BorderRadiusType<sup>18+</sup> 195 196type BorderRadiusType = [Length](ts-types.md#length) | [BorderRadiuses](ts-types.md#borderradiuses9) | [LocalizedBorderRadiuses](ts-types.md#localizedborderradiuses12) 197 198圆角类型。 199 200**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 201 202**系统能力：** SystemCapability.ArkUI.ArkUI.Full 203 204| 类型 |说明 | 205| ----------------------| --------------------------------------------------| 206| [Length](ts-types.md#length) | 长度类型，用于描述尺寸单位。 | 207| [BorderRadiuses](ts-types.md#borderradiuses9) | 圆角类型，用于描述组件边框圆角半径。 | 208| [LocalizedBorderRadiuses](ts-types.md#localizedborderradiuses12) | 圆角类型，用于描述组件边框圆角半径。 | 209 210## 示例 211 212### 示例1（弹出普通菜单） 213 214该示例为bindMenu通过配置MenuElement弹出普通菜单。 215 216```ts 217// xxx.ets 218@Entry 219@Component 220struct MenuExample { 221 build() { 222 Column() { 223 Text('click for Menu') 224 .bindMenu([ 225 { 226 value: 'Menu1', 227 action: () => { 228 console.info('handle Menu1 select'); 229 } 230 }, 231 { 232 value: 'Menu2', 233 action: () => { 234 console.info('handle Menu2 select'); 235 } 236 }, 237 ]) 238 } 239 .width('100%') 240 .margin({ top: 5 }) 241 } 242} 243``` 244 245 246 247### 示例2（弹出自定义菜单） 248 249该示例为bindMenu通过配置CustomBuilder弹出自定义菜单。 250 251```ts 252@Entry 253@Component 254struct MenuExample { 255 @State listData: number[] = [0, 0, 0]; 256 257 @Builder MenuBuilder() { 258 Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { 259 ForEach(this.listData, (item:number, index) => { 260 Column() { 261 Row() { 262 Image($r("app.media.icon")).width(20).height(20).margin({ right: 5 }) 263 Text(`Menu${index as number + 1}`).fontSize(20) 264 } 265 .width('100%') 266 .height(30) 267 .justifyContent(FlexAlign.Center) 268 .align(Alignment.Center) 269 .onClick(() => { 270 console.info(`Menu${index as number + 1} Clicked!`); 271 }) 272 273 if (index != this.listData.length - 1) { 274 Divider().height(10).width('80%').color('#ccc') 275 } 276 }.padding(5).height(40) 277 }) 278 }.width(100) 279 } 280 281 build() { 282 Column() { 283 Text('click for menu') 284 .fontSize(20) 285 .margin({ top: 20 }) 286 .bindMenu(this.MenuBuilder) 287 } 288 .height('100%') 289 .width('100%') 290 .backgroundColor('#f0f0f0') 291 } 292} 293``` 294 295 296 297### 示例3（长按弹出菜单） 298 299该示例为bindContextMenu通过配置responseType.LongPress弹出菜单。 300 301```ts 302// xxx.ets 303@Entry 304@Component 305struct ContextMenuExample { 306 @Builder MenuBuilder() { 307 Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { 308 Text('Test menu item 1') 309 .fontSize(20) 310 .width(100) 311 .height(50) 312 .textAlign(TextAlign.Center) 313 Divider().height(10) 314 Text('Test menu item 2') 315 .fontSize(20) 316 .width(100) 317 .height(50) 318 .textAlign(TextAlign.Center) 319 }.width(100) 320 } 321 322 build() { 323 Column() { 324 Text('LongPress for menu') 325 } 326 .width('100%') 327 .margin({ top: 5 }) 328 .bindContextMenu(this.MenuBuilder, ResponseType.LongPress) 329 } 330} 331``` 332 333 334 335### 示例4（右键弹出指向型菜单） 336 337该示例为bindContextMenu通过配置responseType.RightClick、enableArrow弹出指向型菜单。 338 339```ts 340// xxx.ets 341@Entry 342@Component 343struct DirectiveMenuExample { 344 @Builder MenuBuilder() { 345 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 346 Text('Options') 347 Divider().strokeWidth(2).margin(5).color('#F0F0F0') 348 Text('Hide') 349 Divider().strokeWidth(2).margin(5).color('#F0F0F0') 350 Text('Exit') 351 } 352 .width(200) 353 } 354 355 build() { 356 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 357 Column() { 358 Text("DirectiveMenuExample") 359 .fontSize(20) 360 .width('100%') 361 .height("25%") 362 .backgroundColor('#F0F0F0') 363 .textAlign(TextAlign.Center) 364 .bindContextMenu(this.MenuBuilder, ResponseType.RightClick, { 365 enableArrow: true, 366 placement: Placement.Bottom 367 }) 368 } 369 } 370 .width('100%') 371 .height('100%') 372 } 373} 374``` 375 376 377 378### 示例5（长按弹出菜单的截图预览样式） 379 380该示例为bindContextMenu通过配置responseType.LongPress、preview的MenuPreviewMode类型弹出菜单预览样式。 381 382```ts 383// xxx.ets 384@Entry 385@Component 386struct Index { 387 private iconStr: ResourceStr = $r("app.media.icon"); 388 389 @Builder 390 MyMenu() { 391 Menu() { 392 MenuItem({ startIcon: this.iconStr, content: "菜单选项" }) 393 MenuItem({ startIcon: this.iconStr, content: "菜单选项" }) 394 MenuItem({ startIcon: this.iconStr, content: "菜单选项" }) 395 } 396 } 397 398 build() { 399 Column({ space: 50 }) { 400 Column() { 401 Column() { 402 Text('preview-image') 403 .width(200) 404 .height(100) 405 .textAlign(TextAlign.Center) 406 .margin(100) 407 .fontSize(30) 408 .bindContextMenu(this.MyMenu, ResponseType.LongPress, 409 { preview: MenuPreviewMode.IMAGE, 410 previewAnimationOptions: {scale: [0.8, 1.0]}, 411 }) 412 .backgroundColor("#ff3df2f5") 413 } 414 }.width('100%') 415 } 416 } 417} 418``` 419 420 421 422### 示例6（长按弹出菜单的自定义预览样式） 423 424该示例为bindContextMenu通过配置responseType.LongPress、preview的CustomBuilder类型弹出菜单自定义预览样式。 425 426```ts 427// xxx.ets 428@Entry 429@Component 430struct Index { 431 private iconStr: ResourceStr = $r("app.media.icon"); 432 433 @Builder 434 MyMenu() { 435 Menu() { 436 MenuItem({ startIcon: this.iconStr, content: "菜单选项" }) 437 MenuItem({ startIcon: this.iconStr, content: "菜单选项" }) 438 MenuItem({ startIcon: this.iconStr, content: "菜单选项" }) 439 } 440 } 441 442 @Builder 443 MyPreview() { 444 Column() { 445 Image($r('app.media.icon')) 446 .width(200) 447 .height(200) 448 } 449 } 450 451 build() { 452 Column({ space: 50 }) { 453 Column() { 454 Column() { 455 Text('preview-builder') 456 .width(200) 457 .height(100) 458 .textAlign(TextAlign.Center) 459 .margin(100) 460 .fontSize(30) 461 .bindContextMenu(this.MyMenu, ResponseType.LongPress, 462 { 463 preview: this.MyPreview 464 }) 465 } 466 }.width('100%') 467 } 468 } 469} 470``` 471 472 473 474### 示例7（设置状态变量弹出菜单） 475 476该示例为bindContextMenu通过配置isShown弹出菜单预览样式。 477 478```ts 479// xxx.ets 480@Entry 481@Component 482struct Index { 483 private iconStr: ResourceStr = $r("app.media.icon"); 484 @State isShown: boolean = false; 485 486 @Builder 487 MyMenu() { 488 Menu() { 489 MenuItem({ startIcon: this.iconStr, content: "菜单选项" }) 490 MenuItem({ startIcon: this.iconStr, content: "菜单选项" }) 491 MenuItem({ startIcon: this.iconStr, content: "菜单选项" }) 492 } 493 } 494 495 @Builder 496 MyPreview() { 497 Column() { 498 Image($r('app.media.icon')) 499 .width(200) 500 .height(200) 501 } 502 } 503 504 build() { 505 Column({ space: 50 }) { 506 Column() { 507 Column() { 508 Text('preview-builder') 509 .width(200) 510 .height(100) 511 .textAlign(TextAlign.Center) 512 .margin(100) 513 .fontSize(30) 514 .bindContextMenu(this.isShown, this.MyMenu, 515 { 516 preview: this.MyPreview, 517 aboutToDisappear: ()=>{ 518 this.isShown = false; 519 } 520 }) 521 Button('click') 522 .onClick(()=>{ 523 this.isShown = true; 524 }) 525 } 526 }.width('100%') 527 } 528 } 529} 530``` 531 532 533 534### 示例8（设置菜单和预览的动效） 535 536该示例为bindContextMenu通过配置transition，实现自定义菜单以及菜单预览时的显示和退出动效。 537 538```ts 539// xxx.ets 540@Entry 541@Component 542struct MenuExample { 543 @Builder MenuBuilder() { 544 Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { 545 Text('Test menu item 1') 546 .fontSize(12) 547 .width(200) 548 .height(30) 549 .textAlign(TextAlign.Center) 550 Divider().height(10) 551 Text('Test menu item 2') 552 .fontSize(12) 553 .width(100) 554 .height(30) 555 .textAlign(TextAlign.Center) 556 }.width(100) 557 } 558 @Builder 559 MyPreview() { 560 Column() { 561 Image($r('app.media.icon')) 562 .width(50) 563 .height(50) 564 } 565 } 566 @State isShow:boolean = false; 567 private iconStr: ResourceStr = $r("app.media.icon"); 568 569 @Builder 570 MyMenu() { 571 Menu() { 572 MenuItem({ startIcon: this.iconStr, content: "菜单选项" }) 573 MenuItem({ startIcon: this.iconStr, content: "菜单选项" }) 574 MenuItem({ startIcon: this.iconStr, content: "菜单选项" }) 575 } 576 } 577 build() { 578 Column() { 579 Button('LongPress bindContextMenu') 580 .margin({ top: 15 }) 581 .bindContextMenu( 582 this.MenuBuilder, 583 ResponseType.LongPress,{ 584 transition: TransitionEffect.OPACITY.animation({ duration: 4000, curve: Curve.Ease }).combine( 585 TransitionEffect.rotate({ z: 1, angle: 180 })), 586 preview: this.MyPreview, 587 previewAnimationOptions: { 588 scale: [0.8, 1.0], 589 transition: TransitionEffect.OPACITY.animation({ duration: 4000, curve: Curve.Ease }).combine( 590 TransitionEffect.rotate({ z: 1, angle: 180 })) 591 } 592 }) 593 } 594 .width('100%') 595 .margin({ top: 5 }) 596 } 597} 598``` 599 600 601 602### 示例9（设置symbol类型图标） 603 604该示例为bindMenu通过配置MenuElement的symbolIcon弹出菜单。 605 606```ts 607// xxx.ets 608import { SymbolGlyphModifier } from '@kit.ArkUI'; 609@Entry 610@Component 611struct MenuExample { 612 @State symbolIconModifier1: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ohos_photo')).fontSize('24vp'); 613 @State symbolIconModifier2: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ohos_photo')).fontSize('24vp'); 614 build() { 615 Column() { 616 Text('click for Menu') 617 } 618 .width('100%') 619 .margin({ top: 5 }) 620 .bindMenu([ 621 { 622 value: 'Menu1', 623 symbolIcon:this.symbolIconModifier1, 624 action: () => { 625 console.info('handle Menu1 select'); 626 } 627 }, 628 { 629 value: 'Menu2', 630 symbolIcon:this.symbolIconModifier2, 631 action: () => { 632 console.info('handle Menu2 select'); 633 } 634 }, 635 ]) 636 } 637} 638``` 639 640 641 642### 示例10（设置一镜到底动效） 643 644该示例为bindContextMenu通过配置preview中hoverScale，实现组件截图到自定义预览图的一镜到底过渡动效。 645 646```ts 647// xxx.ets 648@Entry 649@Component 650struct Index { 651 private iconStr: ResourceStr = $r("app.media.app_icon"); 652 653 @Builder 654 MyMenu() { 655 Menu() { 656 MenuItem({ startIcon: this.iconStr, content: "菜单选项" }) 657 MenuItem({ startIcon: this.iconStr, content: "菜单选项" }) 658 MenuItem({ startIcon: this.iconStr, content: "菜单选项" }) 659 } 660 } 661 662 @Builder 663 MyPreview() { 664 Column() { 665 Image($r('app.media.example')) 666 .width(200) 667 .height(200) 668 } 669 } 670 671 build() { 672 Column({ space: 50 }) { 673 Column() { 674 Column() { 675 Image($r('app.media.example')) 676 .width(100) 677 .height(100) 678 .margin(100) 679 .bindContextMenu(this.MyMenu, ResponseType.LongPress, 680 { 681 preview: this.MyPreview, 682 previewAnimationOptions: { 683 hoverScale: [1.0, 0.95] 684 } 685 }) 686 } 687 }.width('100%') 688 } 689 } 690} 691``` 692 693 694 695### 示例11（自定义背景模糊效果参数） 696 697该示例为bindMenu通过配置backgroundBlurStyleOptions，实现自定义菜单背景模糊效果。 698 699```ts 700// xxx.ets 701@Entry 702@Component 703struct MenuExample { 704 build() { 705 Stack() { 706 Image($r('app.media.bg')) 707 Column() { 708 Text('click for Menu') 709 .bindMenu([ 710 { 711 value: 'Menu1', 712 action: () => { 713 console.info('handle Menu1 select') 714 } 715 }, 716 { 717 value: 'Menu2', 718 action: () => { 719 console.info('handle Menu2 select') 720 } 721 }, 722 ], 723 { 724 backgroundBlurStyle: BlurStyle.BACKGROUND_THIN, 725 backgroundBlurStyleOptions: { 726 colorMode:ThemeColorMode.LIGHT, 727 blurOptions:{grayscale:[20,20]}, 728 policy: BlurStyleActivePolicy.ALWAYS_ACTIVE, 729 adaptiveColor: AdaptiveColor.AVERAGE, 730 scale: 1 731 }, 732 } 733 ) 734 } 735 .width('100%') 736 .margin({ top: 5 }) 737 } 738 } 739} 740``` 741 742 743 744### 示例12（自定义背景效果参数） 745 746该示例为bindMenu通过配置backgroundEffect，实现自定义菜单背景效果。 747 748```ts 749// xxx.ets 750@Entry 751@Component 752struct MenuExample { 753 build() { 754 Stack() { 755 Image($r('app.media.bg')) 756 Column() { 757 Text('click for Menu') 758 .bindMenu([ 759 { 760 value: 'Menu1', 761 action: () => { 762 console.info('handle Menu1 select'); 763 } 764 }, 765 { 766 value: 'Menu2', 767 action: () => { 768 console.info('handle Menu2 select'); 769 } 770 }, 771 ], 772 { 773 backgroundBlurStyle: BlurStyle.BACKGROUND_THIN, 774 backgroundEffect: { 775 radius: 60, 776 saturation: 10, 777 brightness: 1, 778 color: '#661A1A1A', 779 adaptiveColor: AdaptiveColor.AVERAGE, 780 blurOptions:{grayscale:[20,20]} 781 } 782 } 783 ) 784 } 785 .width('100%') 786 .margin({ top: 5 }) 787 } 788 } 789} 790``` 791 792
