1# 菜单控制 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @Armstrong15--> 5<!--Designer: @zhanghaibo0--> 6<!--Tester: @lxl007--> 7<!--Adviser: @HelloCrease--> 8 9为组件绑定弹出式菜单，支持长按、点击或鼠标右键来触发菜单的弹出，菜单项以垂直列表形式显示。 10 11> **说明：** 12> 13> - 从API version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 14> 15> - CustomBuilder不支持使用bindMenu和bindContextMenu弹出菜单。可以使用[Menu组件](ts-basic-components-menu.md)来实现多级菜单。 16> 17> - 弹出菜单的文本内容不支持长按选中。 18> 19> - 当窗口大小发生变化以及点击菜单内容区时，菜单自动隐藏。 20> 21> - 如果组件是可拖动节点且未指定bindContextMenu的preview，菜单弹出时会显示拖拽预览图，且菜单选项和预览图不会相互避让。开发者可根据使用场景设置preview或将目标节点设置为不可拖动。 22> 23> - 从API version 12开始，菜单支持长按500ms弹出子菜单，支持按压态跟随手指移动。 24> 25> 1. 仅支持使用[Menu组件](ts-basic-components-menu.md)且子组件包含[MenuItem](ts-basic-components-menuitem.md)或[MenuItemGroup](ts-basic-components-menuitemgroup.md)的场景。 26> 27> 2. 仅支持[MenuPreviewMode](#menupreviewmode11)设置为NONE的菜单。 28> - 菜单最大宽度受设备所占栅格限制，即使设置宽度100%，也不会占满屏幕。 29> 30> - 菜单绑定的组件对象销毁时，菜单消失。 31> 32> - [bindContextMenu](#bindcontextmenu8)仅支持在子窗中显示，[bindMenu](#bindmenu)可以通过配置[MenuOptions](#menuoptions10)中的showInSubWindow属性设置是否在子窗中显示。 33 34 35## bindMenu 36 37bindMenu(content: Array<MenuElement> | CustomBuilder, options?: MenuOptions): T 38 39给组件绑定菜单，点击后弹出菜单。弹出的菜单项支持图标+文本排列以及自定义组件两种功能。 40 41**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 42 43**系统能力：** SystemCapability.ArkUI.ArkUI.Full 44 45**参数：** 46 47| 参数名 | 类型 | 必填 | 说明 | 48| ------- | ------------------------------------------------------------ | ---- | -------------------------------------------- | 49| content | Array<[MenuElement](#menuelement)> \| [CustomBuilder](ts-types.md#custombuilder8) | 是 | 配置菜单项图标和文本的数组，或者自定义组件。 | 50| options | [MenuOptions](#menuoptions10) | 否 | 配置弹出菜单的参数。 | 51 52**返回值：** 53 54|类型|说明| 55|---|---| 56|T|返回当前组件。| 57 58## bindMenu<sup>11+</sup> 59 60bindMenu(isShow: boolean, content: Array<MenuElement> | CustomBuilder, options?: MenuOptions): T 61 62给组件绑定菜单，点击后弹出菜单。弹出的菜单项支持图标+文本排列以及自定义组件两种功能。 63 64**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 65 66**系统能力：** SystemCapability.ArkUI.ArkUI.Full 67 68**参数：** 69 70| 参数名 | 类型 | 必填 | 说明 | 71| ------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 72| isShow | boolean | 是 | 支持开发者通过状态变量控制显隐，值为true时弹出菜单，值为false时关闭菜单，默认值为false。菜单必须等待页面全部构建才能展示，因此不能在页面构建中设置为true，否则会导致显示位置及形状错误，该参数从API version 18开始支持[!!语法](../../../ui/state-management/arkts-new-binding.md#系统组件参数双向绑定)双向绑定变量。 | 73| content | Array<[MenuElement](#menuelement)> \| [CustomBuilder](ts-types.md#custombuilder8) | 是 | 配置菜单项图标和文本的数组，或者自定义组件。 | 74| options | [MenuOptions](#menuoptions10) | 否 | 配置弹出菜单的参数。 | 75 76**返回值：** 77 78|类型|说明| 79|---|---| 80|T|返回当前组件。| 81 82## bindContextMenu<sup>8+</sup> 83 84bindContextMenu(content: CustomBuilder, responseType: ResponseType, options?: ContextMenuOptions): T 85 86给组件绑定菜单，控制菜单显隐的触发方式为长按或右键点击，弹出的菜单项需自定义。若需通过代码逻辑控制菜单显隐，请使用[bindContextMenu<sup>12+</sup>](#bindcontextmenu12)。 87 88> **说明：** 89> 90> 不支持在输入法类型窗口中使用bindContextMenu(默认子窗实现)，详情见输入法框架的约束与限制说明[createPanel](../../apis-ime-kit/js-apis-inputmethodengine.md#createpanel10-1)。 91 92**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 93 94**系统能力：** SystemCapability.ArkUI.ArkUI.Full 95 96**参数：** 97 98| 参数名 | 类型 | 必填 | 说明 | 99| ------------ | -------------------------------------------------- | ---- | -------------------------------- | 100| content | [CustomBuilder](ts-types.md#custombuilder8) | 是 | 自定义菜单内容构造器。 | 101| responseType | [ResponseType](ts-appendix-enums.md#responsetype8) | 是 | 菜单弹出条件，长按或者右键点击。不支持鼠标长按。 | 102| options | [ContextMenuOptions](#contextmenuoptions10) | 否 | 配置弹出菜单的参数。 | 103 104**返回值：** 105 106|类型|说明| 107|---|---| 108|T|返回当前组件。| 109 110## bindContextMenu<sup>12+</sup> 111 112bindContextMenu(isShown: boolean, content: CustomBuilder, options?: ContextMenuOptions): T 113 114给组件绑定菜单，菜单的显隐通过控制绑定的isShown触发。 115 116当isShown为true时，弹出菜单；为false时，隐藏菜单。菜单项支持自定义。 117 118菜单弹出位置仅有placement设置决定，与点击位置无关。 119 120> **说明：** 121> 122> 不支持在输入法类型窗口中使用bindContextMenu(默认子窗实现)，详情见输入法框架的约束与限制说明[createPanel](../../apis-ime-kit/js-apis-inputmethodengine.md#createpanel10-1)。 123 124**系统能力：** SystemCapability.ArkUI.ArkUI.Full 125 126**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 127 128**参数：** 129 130| 参数名 | 类型 | 必填 | 说明 | 131| ------------ | -------------------------------------------------- | ---- | -------------------------------------------- | 132| isShown | boolean | 是 | 支持开发者通过状态变量控制显隐，值为true时弹出菜单，值为false时关闭菜单，默认值为false。菜单必须等待页面全部构建完成后才能展示，如果在页面构建前或构建中设置为true，可能导致显示位置及形状错误、无法正常弹出显示等问题。不支持长按触发拖拽。该参数从API version 18开始支持[!!语法](../../../ui/state-management/arkts-new-binding.md#系统组件参数双向绑定)双向绑定变量。 | 133| content | [CustomBuilder](ts-types.md#custombuilder8) | 是 | 自定义菜单内容构造器。 | 134| options | [ContextMenuOptions](#contextmenuoptions10) | 否 | 配置弹出菜单的参数。 | 135 136**返回值：** 137 138|类型|说明| 139|---|---| 140|T|返回当前组件。| 141 142## MenuElement 143 144菜单项的图标、文本和交互信息。 145 146**系统能力：** SystemCapability.ArkUI.ArkUI.Full 147 148| 名称 | 类型 | 只读 | 可选 | 说明 | 149| ------------------------ | ------------------------------------------------------------ | ---- | ---- | ------------------------------------------------------------ | 150| value | [ResourceStr](ts-types.md#resourcestr) | 否 | 否 | 菜单项文本。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 151| icon<sup>10+</sup> | [ResourceStr](ts-types.md#resourcestr) | 否 | 是 | 菜单项图标。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 152| enabled<sup>11+</sup> | boolean | 否 | 是 | 菜单条目是否可进行交互。<br/>默认值：true，菜单条目可以进行交互。<br/>值为false时，菜单条目不可以进行交互。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 153| action | () => void | 否 | 否 | 点击菜单项的事件回调。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 154| symbolIcon<sup>12+</sup> | [SymbolGlyphModifier](ts-universal-attributes-text-style.md#symbolglyphmodifier12) | 否 | 是 | 设置菜单项图标。通过Modifier配置菜单项图标，若同时配置symbolIcon和icon的情况下，icon图标不显示。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 155 156## MenuOptions<sup>10+</sup> 157 158继承自[ContextMenuOptions](#contextmenuoptions10)。 159 160**系统能力：** SystemCapability.ArkUI.ArkUI.Full 161 162| 名称 | 类型 | 只读 | 可选 | 说明 | 163| ----------------------------- | -------------------------------------- | ---- | ---- | ------------------------------------------------------------ | 164| title | [ResourceStr](ts-types.md#resourcestr) | 否 | 是 | 菜单标题。<br>**说明：**<br/>仅在content设置为Array<[MenuElement](#menuelement)> 时生效。<br>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 165| showInSubWindow<sup>11+</sup> | boolean | 否 | 是 | 是否在子窗口显示菜单。值为true表示在子窗口显示菜单，值为false表示不在子窗显示菜单。<br/>默认值：2in1设备上为true，其他设备为false。<br>**说明：** <br/>仅对2in1设备生效。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 166 167## ContextMenuOptions<sup>10+</sup> 168 169菜单项的信息。 170 171**系统能力：** SystemCapability.ArkUI.ArkUI.Full 172 173| 名称 | 类型 | 只读 | 可选 | 说明 | 174| --------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | ------------------------------------------------------------ | 175| 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/>未设置、异常值或者undefined时按默认{ x: 0, y: 0 }处理。若传入偏移量超出屏幕范围外，则会就近约束到屏幕范围内。<br/>如果菜单调整了显示位置（与placement初始值主方向不⼀致），则偏移值 (offset) 失效。<br />**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 176| 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开始，该接口支持在原子化服务中使用。 | 177| 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开始，该接口支持在原子化服务中使用。 | 178| enableHoverMode<sup>18+</sup> | boolean | 否 | 是 | 菜单组件是否响应悬停态（半折叠状态）变化，即在悬停态下是否触发避让折痕区域。<br/>默认值：false，2in1设备默认为true。未设置或者值为非法值时，生效默认值。<br/>**说明：** <br/>1. 如果菜单的弹出位置在悬停态折痕区域，菜单组件不会响应悬停态。<br/>2. 2in1设备从API version 20开始生效。<br/>3. 2in1设备仅在窗口瀑布模式下生效。<br />**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 | 179| 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开始，该接口支持在原子化服务中使用。 | 180| 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开始，该接口支持在原子化服务中使用。 | 181| previewAnimationOptions<sup>11+</sup> | [ContextMenuAnimationOptions](#contextmenuanimationoptions11) | 否 | 是 | 控制长按预览的显示效果。<br/>默认值：{ scale: [0.95, 1.1], transition: undefined, hoverScale: undefined }。<br/>**说明：**<br />倍率设置参数小于等于0时，不生效。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 182| onAppear | () => void | 否 | 是 | 菜单弹出时的事件回调。<br />**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 183| onDisappear | () => void | 否 | 是 | 菜单消失时的事件回调。<br />**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 184| aboutToAppear<sup>11+</sup> | () => void | 否 | 是 | 菜单显示动效前的事件回调。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 185| aboutToDisappear<sup>11+</sup> | () => void | 否 | 是 | 菜单退出动效前的事件回调。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 186| backgroundColor<sup>11+</sup> | [ResourceColor](ts-types.md#resourcecolor) | 否 | 是 | 菜单背板颜色。<br/>默认值：Color.Transparent。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 187| backgroundBlurStyle<sup>11+</sup> | [BlurStyle](ts-universal-attributes-background.md#blurstyle9) | 否 | 是 | 菜单背板模糊材质。<br/>默认值：BlurStyle.COMPONENT_ULTRA_THICK。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 188| 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开始，该接口支持在原子化服务中使用。 | 189| 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/>当设置Length类型且传参为异常值时，菜单圆角取默认值。<br/>当设置BorderRadiuses或LocalizedBorderRadiuses类型且传参为异常值时，菜单默认没有圆角。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 190| previewBorderRadius<sup>19+</sup> | [BorderRadiusType](#borderradiustype19) | 否 | 是 | 设置预览图边框圆角半径。<br/>默认值：16vp <br />**说明：** <br /> 当水平方向上两个圆角半径之和的最大值超过预览图的宽度，或者垂直方向上两个圆角半径之和的最大值超过预览图的高度时，应采用预览图所能允许的最大圆角半径值。<br/>圆角设置越大，圆角动画变化越快。<br/>**原子化服务API：** 从API version 19开始，该接口支持在原子化服务中使用。 | 191| 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/>距左右和上下的最小边距默认分别为12vp和16vp。<br/>**原子化服务API：** 从API version 13开始，该接口支持在原子化服务中使用。 | 192| backgroundBlurStyleOptions<sup>18+</sup> | [BackgroundBlurStyleOptions](ts-universal-attributes-background.md#backgroundblurstyleoptions10对象说明) | 否 | 是 | 背景模糊效果。<br />**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 | 193| backgroundEffect<sup>18+</sup> | [BackgroundEffectOptions](ts-universal-attributes-background.md#backgroundeffectoptions11) | 否 | 是 | 背景效果参数。<br />**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 | 194| hapticFeedbackMode<sup>18+</sup> | [HapticFeedbackMode](#hapticfeedbackmode18) | 否 | 是 | 菜单弹出时振动效果。<br/>默认值：HapticFeedbackMode.DISABLED，菜单弹出时不振动。<br />**说明：**<br />只有一级菜单可配置弹出时振动效果。<br />仅当用户启用系统触感反馈且在工程的[module.json5](../../../quick-start/module-configuration-file.md)中配置requestPermissions字段开启ohos.permission.VIBRATE振动权限时，方可生效。配置如下：<br/><br/>**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 | 195| outlineWidth<sup>20+</sup> | [Dimension](ts-types.md#dimension10) \| [EdgeOutlineWidths](ts-types.md#edgeoutlinewidths11对象说明) | 否 | 是 | 设置菜单边框外描边宽度。<br />默认值：0vp<br />**说明：**<br />不支持百分比，若需要外描边效果outlineWidth为必填项。<br />**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 | 196| outlineColor<sup>20+</sup> | [ResourceColor](ts-types.md#resourcecolor) \| [EdgeColors](ts-types.md#edgecolors9) | 否 | 是 | 设置菜单边框外描边颜色。<br />**说明：**<br />默认值：'#19ffffff'<br />**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 | 197| mask<sup>20+</sup> | boolean \| [MenuMaskType](#menumasktype20类型说明) | 否 | 是 | 设置菜单是否有蒙层及蒙层样式。如果设置为false，则没有蒙层；如果设置为true，则有蒙层；如果设置为MenuMaskType，则自定义蒙层的样式。<br/>默认值：菜单有预览图时默认显示蒙层，否则不显示。<br>**说明：** <br/>当设备配置不显示菜单蒙层时，该接口不生效。如当前在2in1设备上该接口不生效。<br />**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 | 198| modalMode<sup>20+</sup> | [ModalMode](#modalmode20枚举说明) | 否 | 是 | 设置菜单的模态模式。<br />**说明：**<br />默认值：ModalMode.AUTO<br />**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 | 199| anchorPosition<sup>20+</sup> | [Position](ts-types.md#position) | 否 | 是 | 通过设定水平与垂直偏移量，控制菜单相对于绑定组件左上角的弹出位置，与单独使用offset接口不同的是可以覆盖显示在绑定组件上。<br/>默认值：{ x: 0, y: 0 }，不支持设置百分比。<br/>**说明：**<br />1. 当菜单处于预览状态时，设定的定位偏移量将无法生效。<br/>2. 预设的placement对齐参数将不再生效。<br/>3. 叠加offset参数的偏移量，最终确定菜单的精确显示位置。<br/>4.当水平与垂直偏移量均设为负值时，菜单以绑定组件左下角为基准点进行显示。<br/>5.当水平或垂直偏移量存在负值时，组件将以绑定组件的左上角为定位基准点，通过叠加偏移量参数实现反向偏移。<br/>**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 | 200| onWillAppear<sup>20+</sup> | [Callback<void>](ts-types.md#callback12) | 否 | 是 | 菜单显示动效前的事件回调。<br />**说明：**<br />1. 正常时序依次为：aboutToAppear>>onWillAppear>>onAppear>>onDidAppear>>aboutToDisappear>>onWillDisappear>>onDisappear>>onDidDisappear。<br/>2. aboutToAppear是初始化时触发调用，onWillAppear是在动画执行前触发调用，onWillAppear在aboutToAppear之后执行。<br/>**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。| 201| onDidAppear<sup>20+</sup> | [Callback<void>](ts-types.md#callback12) | 否 | 是 | 菜单弹出时的事件回调。<br />**说明：**<br />1. 正常时序依次为：aboutToAppear>>onWillAppear>>onAppear>>onDidAppear>>aboutToDisappear>>onWillDisappear>>onDisappear>>onDidDisappear。<br />2. 快速点击弹出，消失菜单时，存在onWillDisappear在onDidAppear前生效。<br />3. 当菜单入场动效未完成时关闭菜单，该回调不会触发。<br/>4.onAppear和onDidAppear触发时机相同，onDidAppear在onAppear后生效。<br/>**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 | 202| onWillDisappear<sup>20+</sup> | [Callback<void>](ts-types.md#callback12) | 否 | 是 | 菜单退出动效前的事件回调。<br />**说明：**<br />1. 正常时序依次为：aboutToAppear>>onWillAppear>>onAppear>>onDidAppear>>aboutToDisappear>>onWillDisappear>>onDisappear>>onDidDisappear。<br />2. 快速点击弹出，消失菜单时，存在onWillDisappear在onDidAppear前生效。<br/>3. aboutToDisappear和onWillDisappear触发时机相同，onWillDisappear在aboutToDisappear后生效。<br/>**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。| 203| onDidDisappear<sup>20+</sup> | [Callback<void>](ts-types.md#callback12) | 否 | 是 | 菜单消失时的事件回调。<br />**说明：**<br />1. 正常时序依次为：aboutToAppear>>onWillAppear>>onAppear>>onDidAppear>>aboutToDisappear>>onWillDisappear>>onDisappear>>onDidDisappear。<br/>2. onDisappear和onDidDisappear触发时机相同，onDidDisappear在onDisappear后生效。<br/>**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 | 204| previewScaleMode<sup>20+</sup> | [PreviewScaleMode](#previewscalemode20枚举说明) | 否 | 是 | 预览图缩放方式。<br />默认值：PreviewScaleMode.AUTO<br />**说明：**<br />布局空间不足时，控制预览图的缩放方式。未设置或设置undefined按照PreviewScaleMode.AUTO处理。当设置成PreviewScaleMode.CONSTANT时，如果预览图过大，剩余的空间不足以放置菜单时，菜单将重叠显示在预览图之下。<br />预览图的最大宽高不会超过预览图最大可布局区域（窗口大小减去上下左右的安全边距）。<br />**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 | 205| availableLayoutArea<sup>20+</sup> | [AvailableLayoutArea](#availablelayoutarea20枚举说明) | 否 | 是 | 设置预览图宽高的可布局区域，预览图的百分比依据此设置计算，最终可能因安全区限制而被压缩或裁剪。<br /> **说明：** <br />未设置或设置为undefined时，百分比依据窗口大小计算。若设置为AvailableLayoutArea.SAFE_AREA，预览图的可布局区域为窗口大小减去上下左右的安全边距。<br />**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 | 206 207## MenuPreviewMode<sup>11+</sup> 208 209菜单的预览样式。 210 211**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 212 213**系统能力：** SystemCapability.ArkUI.ArkUI.Full 214 215| 名称 | 值 | 说明 | 216| ----- | - | -------------------------------------- | 217| NONE | 0 | 不显示预览内容。 | 218| IMAGE | 1 | 预览内容为触发长按悬浮菜单组件的截图。 | 219 220## ContextMenuAnimationOptions<sup>11+</sup> 221 222长按预览时显示的样式信息。 223 224**系统能力：** SystemCapability.ArkUI.ArkUI.Full 225 226| 名称 | 类型 | 只读 | 可选 | 说明 | 227| ----- | ------------------------------------------ | ---- | ------------------------------------ | ------------------------------------ | 228| scale | [AnimationRange](#animationrange11)\<number> | 否 | 是 | 动画开始和结束时相对预览原图缩放比例。<br/>默认值：[0.95, 1.1]<br/>**说明：** <br/>缩放比例需要根据实际开发场景设置，建议设置值为小于预览图宽度或布局的最大限制。<br/> **原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 229| transition<sup>12+</sup> | [TransitionEffect](ts-transition-animation-component.md#transitioneffect10对象说明) | 否 | 是 | 设置菜单显示和退出的过渡效果。<br/>**说明：** <br/>在菜单退出动效过程中，横竖屏切换时，菜单会避让。二级菜单不继承自定义动效。弹出过程中可以点击二级菜单，但在退出动效执行过程中不允许点击二级菜单。<br />详细描述见[TransitionEffect](ts-transition-animation-component.md#transitioneffect10对象说明)对象说明。 <br/> **原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。| 230| hoverScale<sup>12+</sup> | [AnimationRange](#animationrange11)\<number> | 否 | 是 | 设置预览自定义长按场景下，浮起原组件截图的缩放动画开始和结束时相对预览原图缩放比例，且有与预览图的切换的过渡动效。 <br/>**说明：**<br /> 倍率设置参数小于等于0时，不生效。<br />[bindContextMenu<sup>12+</sup>](#bindcontextmenu12)场景下，不生效。<br /> 设置transition接口时，不生效。<br /> 使用此接口且同时使用scale接口时，scale接口起始值不生效。<br /> 为保障最佳体验，最终预览图尺寸不建议小于原组件截图尺寸。当前预览动效宽高会受组件截图和自定义预览大小影响，请根据实际使用情况自行保障展示效果。<br/> **原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。| 231| hoverScaleInterruption<sup>20+</sup> | boolean | 否 | 是 | 设置预览自定义长按场景且hoverScale为true时，在触发拖拽效果前抬起手是否允许取消预览菜单弹出。true表示允许取消预览菜单弹出，false表示不允许取消预览菜单弹出。<br/>默认值：false <br/>**说明：** <br />未设置hoverScale接口或设置了transition接口时，该参数不生效。长按时长不足以触发拖拽效果时抬起手，预览菜单hoverScale效果回退，预览菜单不弹出，并可触发原组件上绑定的click等手势事件。长按时长足以触发拖拽效果后抬起手，预览菜单正常弹出，并不再触发原组件上绑定的click等手势事件。 <br />**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。| 232 233## AnimationRange<sup>11+</sup> 234 235type AnimationRange\<T>=[from: T, to: T] 236 237动画开始和结束时相对预览原图缩放比例。 238 239**系统能力：** SystemCapability.ArkUI.ArkUI.Full 240 241**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 242 243| 类型 | 说明 | 244| ---------------- | ------------------------------------------------------------ | 245| [from: T, to: T] | from表示动画开始时相对预览原图缩放比例，to表示动画结束时相对预览原图缩放比例。 | 246 247## HapticFeedbackMode<sup>18+</sup> 248 249菜单弹出时振动效果。 250 251**原子化服务API：** 从API version 18开始，该接口支持在原子化服务中使用。 252 253**系统能力：** SystemCapability.ArkUI.ArkUI.Full 254 255| 名称 | 值 | 说明 | 256| ----- | - | -------------------------------------- | 257| DISABLED | 0 | 菜单弹出时不振动。 | 258| ENABLED | 1 | 菜单弹出时振动。 | 259| AUTO | 2 | 菜单振动效果跟随系统，当前为菜单有蒙层时振动。 | 260 261## BorderRadiusType<sup>19+</sup> 262 263type BorderRadiusType = [Length](ts-types.md#length) | [BorderRadiuses](ts-types.md#borderradiuses9) | [LocalizedBorderRadiuses](ts-types.md#localizedborderradiuses12) 264 265圆角类型。 266 267**原子化服务API：** 从API version 19开始，该接口支持在原子化服务中使用。 268 269**系统能力：** SystemCapability.ArkUI.ArkUI.Full 270 271| 类型 |说明 | 272| ----------------------| --------------------------------------------------| 273| [Length](ts-types.md#length) | 长度类型，用于描述尺寸单位。 | 274| [BorderRadiuses](ts-types.md#borderradiuses9) | 圆角类型，用于描述组件边框圆角半径。 | 275| [LocalizedBorderRadiuses](ts-types.md#localizedborderradiuses12) | 圆角类型，用于描述组件边框圆角半径。 | 276 277## MenuMaskType<sup>20+</sup>类型说明 278 279设置蒙层样式。 280 281**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 282 283**系统能力：** SystemCapability.ArkUI.ArkUI.Full 284 285| 名称 | 类型 | 只读 | 可选 | 说明 | 286| --------- | ------------------------------------------ | ---- | ------------------------------------------------------------ | ------------------------------------------------------------ | 287| color | [ResourceColor](ts-types.md#resourcecolor) | 否 | 是 | 设置蒙层颜色。<br/>默认值：$r('sys.color.ohos_id_color_mask_thin') | 288| backgroundBlurStyle | [BlurStyle](ts-universal-attributes-background.md#blurstyle9) | 否 | 是 | 设置蒙层模糊材质。<br/>默认值：BlurStyle.BACKGROUND_THIN | 289 290## ModalMode<sup>20+</sup>枚举说明 291 292子窗菜单的模态模式。 293 294**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 295 296**系统能力：** SystemCapability.ArkUI.ArkUI.Full 297 298| 名称 | 值 | 说明 | 299| ----- | - | --------------------------------------| 300| AUTO | 0 | 自动模式，菜单组件在当前设备的默认行为。当前版本在所有设备上的效果等同于ModalMode.NONE。| 301| NONE | 1 | 除菜单自身区域外，其他区域均可传递事件，下层控件可响应事件。| 302| TARGET_WINDOW | 2 | 菜单所在应用的窗口与菜单区域不可传递事件，其他区域可传递事件。| 303 304## PreviewScaleMode<sup>20+</sup>枚举说明 305 306预览图的缩放方式。 307 308**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 309 310**系统能力：** SystemCapability.ArkUI.ArkUI.Full 311 312| 名称 | 值 | 说明 | 313| ----- | - | --------------------------------------| 314| AUTO | 0 | 预览图根据[Placement](ts-appendix-enums.md#placement8)自动调整预览图宽高及缩放。| 315| CONSTANT | 1 | 预览图不缩放，大小保持不变。最终仍会受到安全区的限制而出现压缩、裁剪。| 316| MAINTAIN | 2 | 预览图缩放时保持宽高比。| 317 318## AvailableLayoutArea<sup>20+</sup>枚举说明 319 320预览图宽高设置为百分比时的参考可布局区域大小。 321 322**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 323 324**系统能力：** SystemCapability.ArkUI.ArkUI.Full 325 326| 名称 | 值 | 说明 | 327| ----- | - | --------------------------------------| 328| SAFE_AREA | 0 | 参考可布局区域大小为窗口大小减去上下左右安全边距。 | 329 330## 示例 331 332### 示例1（弹出普通菜单） 333 334从API version 7开始，该示例为bindMenu通过配置MenuElement弹出普通菜单。 335 336```ts 337// xxx.ets 338@Entry 339@Component 340struct MenuExample { 341 build() { 342 Column() { 343 Text('click for Menu') 344 .bindMenu([ 345 { 346 value: 'Menu1', 347 action: () => { 348 console.info('handle Menu1 select'); 349 } 350 }, 351 { 352 value: 'Menu2', 353 action: () => { 354 console.info('handle Menu2 select'); 355 } 356 }, 357 ]) 358 } 359 .width('100%') 360 .margin({ top: 5 }) 361 } 362} 363``` 364 365 366 367### 示例2（弹出自定义菜单） 368 369该示例为bindMenu通过配置CustomBuilder弹出自定义菜单。同时，通过配置hapticFeedbackMode实现弹出时的振动效果。 370 371```ts 372@Entry 373@Component 374struct MenuExample { 375 @State listData: number[] = [0, 0, 0]; 376 377 @Builder MenuBuilder() { 378 Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { 379 ForEach(this.listData, (item:number, index) => { 380 Column() { 381 Row() { 382 // $r('app.media.icon')需要替换为开发者所需的图像资源文件。 383 Image($r("app.media.icon")).width(20).height(20).margin({ right: 5 }) 384 Text(`Menu${index as number + 1}`).fontSize(20) 385 } 386 .width('100%') 387 .height(30) 388 .justifyContent(FlexAlign.Center) 389 .align(Alignment.Center) 390 .onClick(() => { 391 console.info(`Menu${index as number + 1} Clicked!`); 392 }) 393 394 if (index != this.listData.length - 1) { 395 Divider().height(10).width('80%').color('#ccc') 396 } 397 }.padding(5).height(40) 398 }) 399 }.width(100) 400 } 401 402 build() { 403 Column() { 404 Text('click for menu') 405 .fontSize(20) 406 .margin({ top: 20 }) 407 .bindMenu(this.MenuBuilder, { hapticFeedbackMode: HapticFeedbackMode.ENABLED }) 408 } 409 .height('100%') 410 .width('100%') 411 .backgroundColor('#f0f0f0') 412 } 413} 414``` 415 416 417 418### 示例3（长按弹出菜单） 419 420该示例为bindContextMenu通过配置responseType.LongPress弹出菜单。 421 422```ts 423// xxx.ets 424@Entry 425@Component 426struct ContextMenuExample { 427 @Builder MenuBuilder() { 428 Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { 429 Text('Test menu item 1') 430 .fontSize(20) 431 .width(100) 432 .height(50) 433 .textAlign(TextAlign.Center) 434 Divider().height(10) 435 Text('Test menu item 2') 436 .fontSize(20) 437 .width(100) 438 .height(50) 439 .textAlign(TextAlign.Center) 440 }.width(100) 441 } 442 443 build() { 444 Column() { 445 Text('LongPress for menu') 446 } 447 .width('100%') 448 .margin({ top: 5 }) 449 .bindContextMenu(this.MenuBuilder, ResponseType.LongPress) 450 } 451} 452``` 453 454 455 456### 示例4（右键弹出指向型菜单） 457 458该示例为bindContextMenu通过配置responseType.RightClick、enableArrow弹出指向型菜单。同时，通过配置hapticFeedbackMode实现弹出时的振动效果。 459 460```ts 461// xxx.ets 462@Entry 463@Component 464struct DirectiveMenuExample { 465 @Builder MenuBuilder() { 466 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 467 Text('Options') 468 Divider().strokeWidth(2).margin(5).color('#F0F0F0') 469 Text('Hide') 470 Divider().strokeWidth(2).margin(5).color('#F0F0F0') 471 Text('Exit') 472 } 473 .width(200) 474 } 475 476 build() { 477 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 478 Column() { 479 Text("DirectiveMenuExample") 480 .fontSize(20) 481 .width('100%') 482 .height("25%") 483 .backgroundColor('#F0F0F0') 484 .textAlign(TextAlign.Center) 485 .bindContextMenu(this.MenuBuilder, ResponseType.RightClick, { 486 enableArrow: true, 487 placement: Placement.Bottom, 488 hapticFeedbackMode: HapticFeedbackMode.ENABLED 489 }) 490 } 491 } 492 .width('100%') 493 .height('100%') 494 } 495} 496``` 497 498 499 500### 示例5（长按弹出菜单的截图预览样式） 501 502该示例为bindContextMenu通过配置responseType.LongPress、preview的MenuPreviewMode类型弹出菜单预览样式。 503 504```ts 505// xxx.ets 506@Entry 507@Component 508struct Index { 509 // $r('app.media.icon')需要替换为开发者所需的图像资源文件。 510 private iconStr: ResourceStr = $r("app.media.icon"); 511 512 @Builder 513 MyMenu() { 514 Menu() { 515 MenuItem({ startIcon: this.iconStr, content: "菜单选项" }) 516 MenuItem({ startIcon: this.iconStr, content: "菜单选项" }) 517 MenuItem({ startIcon: this.iconStr, content: "菜单选项" }) 518 } 519 } 520 521 build() { 522 Column({ space: 50 }) { 523 Column() { 524 Column() { 525 Text('preview-image') 526 .width(200) 527 .height(100) 528 .textAlign(TextAlign.Center) 529 .margin(100) 530 .fontSize(30) 531 .bindContextMenu(this.MyMenu, ResponseType.LongPress, 532 { preview: MenuPreviewMode.IMAGE, 533 previewAnimationOptions: {scale: [0.8, 1.0]}, 534 }) 535 .backgroundColor("#ff3df2f5") 536 } 537 }.width('100%') 538 } 539 } 540} 541``` 542 543 544 545### 示例6（长按弹出菜单的自定义预览样式） 546 547该示例为bindContextMenu通过配置responseType.LongPress、preview的CustomBuilder类型弹出菜单自定义预览样式。 548 549```ts 550// xxx.ets 551@Entry 552@Component 553struct Index { 554 // $r('app.media.icon')需要替换为开发者所需的图像资源文件。 555 private iconStr: ResourceStr = $r("app.media.icon"); 556 557 @Builder 558 MyMenu() { 559 Menu() { 560 MenuItem({ startIcon: this.iconStr, content: "菜单选项" }) 561 MenuItem({ startIcon: this.iconStr, content: "菜单选项" }) 562 MenuItem({ startIcon: this.iconStr, content: "菜单选项" }) 563 } 564 } 565 566 @Builder 567 MyPreview() { 568 Column() { 569 Image($r('app.media.icon')) 570 .width(200) 571 .height(200) 572 } 573 } 574 575 build() { 576 Column({ space: 50 }) { 577 Column() { 578 Column() { 579 Text('preview-builder') 580 .width(200) 581 .height(100) 582 .textAlign(TextAlign.Center) 583 .margin(100) 584 .fontSize(30) 585 .bindContextMenu(this.MyMenu, ResponseType.LongPress, 586 { 587 preview: this.MyPreview 588 }) 589 } 590 }.width('100%') 591 } 592 } 593} 594``` 595 596 597 598### 示例7（设置状态变量弹出菜单） 599 600该示例为bindContextMenu通过配置isShown弹出菜单预览样式。 601 602```ts 603// xxx.ets 604@Entry 605@Component 606struct Index { 607 // $r('app.media.icon')需要替换为开发者所需的图像资源文件。 608 private iconStr: ResourceStr = $r("app.media.icon"); 609 @State isShown: boolean = false; 610 611 @Builder 612 MyMenu() { 613 Menu() { 614 MenuItem({ startIcon: this.iconStr, content: "菜单选项" }) 615 MenuItem({ startIcon: this.iconStr, content: "菜单选项" }) 616 MenuItem({ startIcon: this.iconStr, content: "菜单选项" }) 617 } 618 } 619 620 @Builder 621 MyPreview() { 622 Column() { 623 Image($r('app.media.icon')) 624 .width(200) 625 .height(200) 626 } 627 } 628 629 build() { 630 Column({ space: 50 }) { 631 Column() { 632 Column() { 633 Text('preview-builder') 634 .width(200) 635 .height(100) 636 .textAlign(TextAlign.Center) 637 .margin(100) 638 .fontSize(30) 639 .bindContextMenu(this.isShown, this.MyMenu, 640 { 641 preview: this.MyPreview, 642 aboutToDisappear: ()=>{ 643 this.isShown = false; 644 } 645 }) 646 Button('click') 647 .onClick(()=>{ 648 this.isShown = true; 649 }) 650 } 651 }.width('100%') 652 } 653 } 654} 655``` 656 657 658 659### 示例8（设置菜单和预览的动效） 660 661该示例为bindContextMenu通过配置transition，实现自定义菜单以及菜单预览时的显示和退出动效。 662 663```ts 664// xxx.ets 665@Entry 666@Component 667struct MenuExample { 668 @Builder 669 MenuBuilder() { 670 Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { 671 Text('Menu item 1') 672 .fontSize(12) 673 .width(200) 674 .height(30) 675 .textAlign(TextAlign.Center) 676 Divider().height(10) 677 Text('Menu item 2') 678 .fontSize(12) 679 .width(100) 680 .height(30) 681 .textAlign(TextAlign.Center) 682 }.width(100) 683 } 684 685 @Builder 686 MyPreview() { 687 Column() { 688 // $r('app.media.startIcon')需要替换为开发者所需的图像资源文件。 689 Image($r('app.media.startIcon')) 690 .width(50) 691 .height(50) 692 } 693 } 694 695 @State isShow: boolean = false; 696 private iconStr: ResourceStr = $r("app.media.startIcon"); 697 698 @Builder 699 MyMenu() { 700 Menu() { 701 MenuItem({ startIcon: this.iconStr, content: "菜单选项" }) 702 MenuItem({ startIcon: this.iconStr, content: "菜单选项" }) 703 MenuItem({ startIcon: this.iconStr, content: "菜单选项" }) 704 } 705 } 706 707 build() { 708 Column() { 709 Button('LongPress bindContextMenu') 710 .margin({ top: 15 }) 711 .bindContextMenu( 712 this.MenuBuilder, 713 ResponseType.LongPress, { 714 transition: TransitionEffect.OPACITY.animation({ duration: 4000, curve: Curve.Ease }).combine( 715 TransitionEffect.rotate({ z: 1, angle: 180 })), 716 preview: this.MyPreview, 717 previewAnimationOptions: { 718 scale: [0.8, 1.0], 719 transition: TransitionEffect.OPACITY.animation({ duration: 4000, curve: Curve.Ease }).combine( 720 TransitionEffect.rotate({ z: 1, angle: 180 })) 721 } 722 }) 723 } 724 .width('100%') 725 .margin({ top: 5 }) 726 } 727} 728``` 729 730 731 732### 示例9（设置symbol类型图标） 733 734该示例为bindMenu通过配置MenuElement的symbolIcon弹出菜单。 735 736```ts 737// xxx.ets 738import { SymbolGlyphModifier } from '@kit.ArkUI'; 739@Entry 740@Component 741struct MenuExample { 742 @State symbolIconModifier1: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ohos_photo')).fontSize('24vp'); 743 @State symbolIconModifier2: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ohos_photo')).fontSize('24vp'); 744 build() { 745 Column() { 746 Text('click for Menu') 747 } 748 .width('100%') 749 .margin({ top: 5 }) 750 .bindMenu([ 751 { 752 value: 'Menu1', 753 symbolIcon:this.symbolIconModifier1, 754 action: () => { 755 console.info('handle Menu1 select'); 756 } 757 }, 758 { 759 value: 'Menu2', 760 symbolIcon:this.symbolIconModifier2, 761 action: () => { 762 console.info('handle Menu2 select'); 763 } 764 }, 765 ]) 766 } 767} 768``` 769 770 771 772### 示例10（设置一镜到底动效） 773 774该示例为bindContextMenu通过配置preview中hoverScale，实现组件截图到自定义预览图的一镜到底过渡动效。 775 776```ts 777// xxx.ets 778@Entry 779@Component 780struct Index { 781 // $r('app.media.xxx')需要替换为开发者所需的图像资源文件。 782 private iconStr: ResourceStr = $r("app.media.app_icon"); 783 784 @Builder 785 MyMenu() { 786 Menu() { 787 MenuItem({ startIcon: this.iconStr, content: "菜单选项" }) 788 MenuItem({ startIcon: this.iconStr, content: "菜单选项" }) 789 MenuItem({ startIcon: this.iconStr, content: "菜单选项" }) 790 } 791 } 792 793 @Builder 794 MyPreview() { 795 Column() { 796 Image($r('app.media.example')) 797 .width(200) 798 .height(200) 799 } 800 } 801 802 build() { 803 Column({ space: 50 }) { 804 Column() { 805 Column() { 806 Image($r('app.media.example')) 807 .width(100) 808 .height(100) 809 .margin(100) 810 .bindContextMenu(this.MyMenu, ResponseType.LongPress, 811 { 812 preview: this.MyPreview, 813 previewAnimationOptions: { 814 hoverScale: [1.0, 0.95] 815 } 816 }) 817 } 818 }.width('100%') 819 } 820 } 821} 822``` 823 824 825 826### 示例11（自定义背景模糊效果参数） 827 828该示例为bindMenu通过配置backgroundBlurStyleOptions，实现自定义菜单背景模糊效果。 829 830```ts 831// xxx.ets 832@Entry 833@Component 834struct MenuExample { 835 build() { 836 Stack() { 837 // $r('app.media.bg')需要替换为开发者所需的图像资源文件。 838 Image($r('app.media.bg')) 839 Column() { 840 Text('click for Menu') 841 .bindMenu([ 842 { 843 value: 'Menu1', 844 action: () => { 845 console.info('handle Menu1 select') 846 } 847 }, 848 { 849 value: 'Menu2', 850 action: () => { 851 console.info('handle Menu2 select') 852 } 853 }, 854 ], 855 { 856 backgroundBlurStyle: BlurStyle.BACKGROUND_THIN, 857 backgroundBlurStyleOptions: { 858 colorMode:ThemeColorMode.LIGHT, 859 blurOptions:{grayscale:[20,20]}, 860 policy: BlurStyleActivePolicy.ALWAYS_ACTIVE, 861 adaptiveColor: AdaptiveColor.AVERAGE, 862 scale: 1 863 }, 864 } 865 ) 866 } 867 .width('100%') 868 .margin({ top: 5 }) 869 } 870 } 871} 872``` 873 874 875 876### 示例12（自定义背景效果参数） 877 878该示例为bindMenu通过配置backgroundEffect，实现自定义菜单背景效果。 879 880```ts 881// xxx.ets 882@Entry 883@Component 884struct MenuExample { 885 build() { 886 Stack() { 887 // $r('app.media.bg')需要替换为开发者所需的图像资源文件。 888 Image($r('app.media.bg')) 889 Column() { 890 Text('click for Menu') 891 .bindMenu([ 892 { 893 value: 'Menu1', 894 action: () => { 895 console.info('handle Menu1 select'); 896 } 897 }, 898 { 899 value: 'Menu2', 900 action: () => { 901 console.info('handle Menu2 select'); 902 } 903 }, 904 ], 905 { 906 backgroundBlurStyle: BlurStyle.BACKGROUND_THIN, 907 backgroundEffect: { 908 radius: 60, 909 saturation: 10, 910 brightness: 1, 911 color: '#661A1A1A', 912 adaptiveColor: AdaptiveColor.AVERAGE, 913 blurOptions:{grayscale:[20,20]} 914 } 915 } 916 ) 917 } 918 .width('100%') 919 .margin({ top: 5 }) 920 } 921 } 922} 923``` 924 925 926 927 ### 示例13（设置一镜到底动效支持抬手打断） 928 929该示例为bindContextMenu通过配置preview中hoverScale实现一镜到底过渡动效的基础上, 再配置hoverScaleInterruption控制是否允许长按抬手取消菜单弹出。 930 931 ```ts 932 // xxx.ets 933@Entry 934@Component 935struct Index { 936 // $r('app.media.xxx')需要替换为开发者所需的图像资源文件。 937 private iconStr: ResourceStr = $r("app.media.app_icon"); 938 939 @Builder 940 MyMenu() { 941 Menu() { 942 MenuItem({ startIcon: this.iconStr, content: "菜单选项" }) 943 MenuItem({ startIcon: this.iconStr, content: "菜单选项" }) 944 MenuItem({ startIcon: this.iconStr, content: "菜单选项" }) 945 } 946 } 947 948 @Builder 949 MyPreview() { 950 Column() { 951 Image($r('app.media.example')) 952 .width(300) 953 .height(200) 954 } 955 } 956 957 build() { 958 Column({ space: 50 }) { 959 Column() { 960 Column() { 961 Image($r('app.media.example')) 962 .width(100) 963 .height(100) 964 .margin(100) 965 .bindContextMenu(this.MyMenu, ResponseType.LongPress, 966 { 967 preview: this.MyPreview, 968 previewAnimationOptions: { 969 hoverScale: [1.0, 0.8], 970 hoverScaleInterruption: true 971 } 972 }) 973 .onClick(() => { 974 console.info('trigger onClick') 975 }) 976 } 977 }.width('100%') 978 } 979 } 980} 981 ``` 982 983 984 985### 示例14（设置预览图边框圆角半径） 986 987该示例为bindContextMenu通过配置responseType.LongPress、preview的MenuPreviewMode类型弹出菜单预览样式、previewBorderRadius设置预览图边框圆角半径。 988 989```ts 990// xxx.ets 991@Entry 992@Component 993struct Index { 994 // $r('app.media.startIcon')需要替换为开发者所需的图像资源文件。 995 private iconStr: ResourceStr = $r("app.media.startIcon"); 996 997 @Builder 998 MyMenu() { 999 Menu() { 1000 MenuItem({ startIcon: this.iconStr, content: "菜单选项" }) 1001 MenuItem({ startIcon: this.iconStr, content: "菜单选项" }) 1002 MenuItem({ startIcon: this.iconStr, content: "菜单选项" }) 1003 } 1004 } 1005 1006 build() { 1007 Column({ space: 50 }) { 1008 Column() { 1009 Column() { 1010 Text('preview-image') 1011 .width(200) 1012 .height(100) 1013 .textAlign(TextAlign.Center) 1014 .margin(100) 1015 .fontSize(30) 1016 .bindContextMenu(this.MyMenu, ResponseType.LongPress, 1017 { 1018 preview: MenuPreviewMode.IMAGE, 1019 previewBorderRadius: 50 1020 }) 1021 .backgroundColor("#ff7fcdff") 1022 } 1023 }.width('100%') 1024 } 1025 } 1026} 1027``` 1028 1029 1030 1031### 示例15（bindMenu配置生命周期回调） 1032 1033该示例为bindMenu配置生命周期回调。 1034 1035```ts 1036// xxx.ets 1037@Entry 1038@Component 1039struct Index { 1040 // $r('app.media.startIcon')需要替换为开发者所需的图像资源文件。 1041 private iconStr: ResourceStr = $r("app.media.startIcon") 1042 @State isShown: boolean = false 1043 @State textColor: Color = Color.Black 1044 @State blueColor: Color = Color.Blue 1045 1046 @State onWillAppear: boolean = false 1047 @State onDidAppear: boolean = false 1048 @State onWillDisappear: boolean = false 1049 @State onDidDisappear: boolean = false 1050 @Builder 1051 MyMenu() { 1052 Menu() { 1053 MenuItem({ startIcon: this.iconStr, content: "菜单选项" }) 1054 MenuItem({ startIcon: this.iconStr, content: "菜单选项" }) 1055 MenuItem({ startIcon: this.iconStr, content: "菜单选项" }) 1056 } 1057 } 1058 1059 build() { 1060 Column() { 1061 Column({ space: 30 }) { 1062 Text('onWillAppear').fontColor(this.onWillAppear ? this.blueColor : this.textColor) 1063 Text('onDidAppear').fontColor(this.onDidAppear ? this.blueColor : this.textColor) 1064 Text('onWillDisappear').fontColor(this.onWillDisappear ? this.blueColor : this.textColor) 1065 Text('onDidDisappear').fontColor(this.onDidDisappear ? this.blueColor : this.textColor) 1066 Button('click') 1067 .onClick(() => { 1068 this.isShown = true; 1069 }) 1070 .width(100) 1071 .height(50) 1072 Text('callback') 1073 .width(200) 1074 .height(100) 1075 .textAlign(TextAlign.Center) 1076 .fontSize(20) 1077 .fontColor(this.textColor) 1078 .bindMenu(this.isShown, this.MyMenu, 1079 { 1080 onWillAppear:() => { 1081 console.info("menu cycle life onWillAppear"); 1082 this.onWillAppear = true; 1083 }, 1084 onDidAppear:() => { 1085 console.info("menu cycle life onDidAppear"); 1086 this.onDidAppear = true; 1087 }, 1088 onWillDisappear:() => { 1089 this.isShown = false; 1090 console.info("menu cycle life onWillDisappear"); 1091 this.onWillDisappear = true; 1092 }, 1093 onDidDisappear:() => { 1094 console.info("menu cycle life onDidDisappear"); 1095 this.onDidDisappear = true; 1096 } 1097 }) 1098 } 1099 }.width('100%') 1100 } 1101} 1102``` 1103 1104 1105 1106### 示例16（设置菜单蒙层） 1107 1108该示例为bindMenu通过配置mask属性设置菜单蒙层。 1109 1110```ts 1111import { SymbolGlyphModifier } from '@kit.ArkUI'; 1112 1113@Entry 1114@Component 1115struct Index { 1116 @State startIconModifier: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ohos_star')) 1117 @State isShow: boolean = false; 1118 1119 @Builder 1120 MyMenu() { 1121 Menu() { 1122 MenuItem({ 1123 symbolStartIcon: this.startIconModifier, 1124 content: "新建文件夹", 1125 }) 1126 MenuItem({ 1127 symbolStartIcon: this.startIconModifier, 1128 content: "排序方式", 1129 }) 1130 MenuItem({ 1131 symbolStartIcon: this.startIconModifier, 1132 content: "查看方式", 1133 }) 1134 } 1135 } 1136 1137 build() { 1138 Button('bindMenu') 1139 .position({ top: 80, left: 80 }) 1140 .onClick(() => { 1141 this.isShow = !this.isShow; 1142 }) 1143 .bindMenu(this.isShow, this.MyMenu, { 1144 mask: { color: 'rgba(23,169,141,0.5)', backgroundBlurStyle: BlurStyle.Thin } 1145 }) 1146 } 1147} 1148``` 1149 1150 1151 1152### 示例17（bindMenu设置下拉菜单外描边样式） 1153 1154该示例为bindMenu通过配置outlineWidth和outlineColor属性设置下拉菜单外描边样式。 1155 1156```ts 1157// xxx.ets 1158@Entry 1159@Component 1160struct Index { 1161 @Builder 1162 MyMenu() { 1163 Menu() { 1164 MenuItem({ content: "菜单选项" }) 1165 MenuItem({ content: "菜单选项" }) 1166 MenuItem({ content: "菜单选项" }) 1167 }.width(200) 1168 } 1169 1170 build() { 1171 Column({ space: 50 }) { 1172 Column() { 1173 Column() { 1174 Text('click for Menu') 1175 .width(200) 1176 .height(100) 1177 .textAlign(TextAlign.Center) 1178 .margin(100) 1179 .fontSize(30) 1180 .bindMenu(this.MyMenu, 1181 { 1182 outlineWidth: '5vp', 1183 outlineColor: Color.Blue 1184 }) 1185 } 1186 } 1187 .width('100%') 1188 .height('100%') 1189 .backgroundColor('#F0F2F5') 1190 } 1191 } 1192} 1193 1194``` 1195 1196 1197 1198### 示例18 （bindMenu传入带参数的CustomBuilder） 1199 1200该示例通过在bindMenu中传入带参数的CustomBuilder来配置菜单的具体属性。 1201 1202```ts 1203// xxx.ets 1204@Entry 1205@Component 1206struct Index { 1207 @State menuItermList: string[] = ['新建', '历史', '书签', '设置'] 1208 1209 @Builder 1210 MenuBuilder(itemList: string[]) { 1211 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center }) { 1212 ForEach(itemList, (item: string, index) => { 1213 Row() { 1214 Text(item) 1215 .width('100%') 1216 .height(32) 1217 .fontWeight(400) 1218 .fontSize(14) 1219 .fontColor(Color.Black) 1220 .textAlign(TextAlign.Center) 1221 } 1222 .onClick(() => { 1223 console.info('handle' + item + 'Clicked!') 1224 }) 1225 if (index != itemList.length - 1) { 1226 Divider().height(10).width('80%').color('#ccc') 1227 } 1228 }) 1229 } 1230 .width(100) 1231 } 1232 1233 build() { 1234 Column() { 1235 Text('click for Menu') 1236 .bindMenu(this.MenuBuilder(this.menuItermList)) 1237 } 1238 .height('100%') 1239 .width('100%') 1240 .backgroundColor('#f0f0f0') 1241 } 1242} 1243 1244``` 1245 1246 1247
