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> - 动效曲线使用弹簧曲线，在动效退出时，由于弹簧曲线的回弹震荡，菜单消失后有较长的拖尾，使得其他事件无法响应。 16> 17> - 若组件是可拖动节点，绑定bindContextMenu未指定preview时，菜单弹出会浮起拖拽预览图且菜单选项和预览图不会发生避让。对此，开发者可根据使用场景设置preview或者将目标节点设置成不可拖动节点。 18> 19> - 从API Version 12开始，菜单支持长按500ms弹出子菜单，支持按压态跟随手指移动。 20> 21> 1. 仅支持使用[Menu组件](ts-basic-components-menu.md)且子组件包含[MenuItem](ts-basic-components-menuitem.md)或[MenuItemGroup](ts-basic-components-menuitemgroup.md)的场景。 22> 23> 2. 仅支持[MenuPreviewMode](#menupreviewmode11)为NONE的菜单。 24 25 26## bindMenu 27 28bindMenu(content: Array<MenuElement> | CustomBuilder, options?: MenuOptions) 29 30给组件绑定菜单，点击后弹出菜单。弹出菜单项支持图标+文本排列和自定义两种功能。 31 32**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 33 34**系统能力：** SystemCapability.ArkUI.ArkUI.Full 35 36**参数：** 37 38| 参数名 | 类型 | 必填 | 说明 | 39| ------- | ------------------------------------------------------------ | ---- | -------------------------------------------- | 40| content | Array<[MenuElement](#menuelement)> \| [CustomBuilder](ts-types.md#custombuilder8) | 是 | 配置菜单项图标和文本的数组，或者自定义组件。 | 41| options | [MenuOptions](#menuoptions10) | 否 | 配置弹出菜单的参数。 | 42 43## bindMenu<sup>11+</sup> 44 45bindMenu(isShow: boolean, content: Array<MenuElement> | CustomBuilder, options?: MenuOptions) 46 47给组件绑定菜单，点击后弹出菜单。弹出菜单项支持图标+文本排列和自定义两种功能。 48 49**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 50 51**系统能力：** SystemCapability.ArkUI.ArkUI.Full 52 53**参数：** 54 55| 参数名 | 类型 | 必填 | 说明 | 56| -------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 57| isShow<sup>11+</sup> | boolean | 是 | 支持开发者通过状态变量控制显隐，默认值为false，menu弹窗必须等待页面全部构建才能展示，因此不能在页面构建中设置为true，否则会导致显示位置及形状错误，该参数支持[!!语法](../../../quick-start/arkts-new-binding.md#组件参数双向绑定)双向绑定变量。 | 58| content | Array<[MenuElement](#menuelement)> \| [CustomBuilder](ts-types.md#custombuilder8) | 是 | 配置菜单项图标和文本的数组，或者自定义组件。 | 59| options | [MenuOptions](#menuoptions10) | 否 | 配置弹出菜单的参数。 | 60 61## bindContextMenu<sup>8+</sup> 62 63bindContextMenu(content: CustomBuilder, responseType: ResponseType, options?: ContextMenuOptions) 64 65给组件绑定菜单，触发方式为长按或者右键点击，弹出菜单项需要自定义。 66 67**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 68 69**系统能力：** SystemCapability.ArkUI.ArkUI.Full 70 71**参数：** 72 73| 参数名 | 类型 | 必填 | 说明 | 74| ------------ | -------------------------------------------------- | ---- | -------------------------------- | 75| content | [CustomBuilder](ts-types.md#custombuilder8) | 是 | 自定义菜单内容构造器。 | 76| responseType | [ResponseType](ts-appendix-enums.md#responsetype8) | 是 | 菜单弹出条件，长按或者右键点击。不支持鼠标长按。 | 77| options | [ContextMenuOptions](#contextmenuoptions10) | 否 | 配置弹出菜单的参数。 | 78 79## bindContextMenu<sup>12+</sup> 80 81bindContextMenu(isShown: boolean, content: CustomBuilder, options?: ContextMenuOptions) 82 83给组件绑定菜单，触发方式为控制绑定的isShown。 84 85isShown为true，弹出菜单。isShown为false，隐藏菜单。弹出菜单项需要自定义。 86 87菜单弹出不跟随点击位置，只与placement设置有关。 88 89 90**系统能力：** SystemCapability.ArkUI.ArkUI.Full 91 92**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 93 94**参数：** 95 96| 参数名 | 类型 | 必填 | 说明 | 97| ------------ | -------------------------------------------------- | ---- | -------------------------------------------- | 98| isShown | boolean | 是 | 支持开发者通过状态变量控制显隐，默认值为false。menu需要在页面全部构建完成后才能弹窗展示，如果在页面构建前或构建中设置为true，可能导致显示位置及形状错误、无法正常弹出显示等问题。不支持长按触发拖拽。该参数支持[!!语法](../../../quick-start/arkts-new-binding.md#组件参数双向绑定)双向绑定变量。 | 99| content | [CustomBuilder](ts-types.md#custombuilder8) | 是 | 自定义菜单内容构造器。 | 100| options | [ContextMenuOptions](#contextmenuoptions10) | 否 | 配置弹出菜单的参数。 | 101 102## MenuElement 103 104| 名称 | 类型 | 必填 | 描述 | 105| --------------------- | -------------------------------------- | ---- | ------------------------------------------------------------ | 106| value | [ResourceStr](ts-types.md#resourcestr) | 是 | 菜单项文本。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 107| icon<sup>10+</sup> | [ResourceStr](ts-types.md#resourcestr) | 否 | 菜单项图标。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 108| enabled<sup>11+</sup> | boolean | 否 | 菜单条目是否可进行交互。<br/>默认值：true, 菜单条目可以进行交互。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 109| action | () => void | 是 | 点击菜单项的事件回调。<br/>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 110| symbolIcon<sup>12+</sup> | [SymbolGlyphModifier](ts-universal-attributes-attribute-modifier.md) | 否 | 设置菜单项图标。通过Modifier配置菜单项图标，配置该项时，原icon图标不显示。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 111 112## MenuOptions<sup>10+</sup> 113 114继承自[ContextMenuOptions](#contextmenuoptions10)。 115 116| 名称 | 类型 | 必填 | 描述 | 117| ----------------------------- | -------------------------------------- | ---- | ------------------------------------------------------------ | 118| title | [ResourceStr](ts-types.md#resourcestr) | 否 | 菜单标题。<br>**说明：**<br/>仅在content设置为Array<[MenuElement](#menuelement)> 时生效。<br>**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 119| showInSubWindow<sup>11+</sup> | boolean | 否 | 是否在子窗口显示菜单。<br/>默认值：2in1设备为true，其他设备为false。<br>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 120 121## ContextMenuOptions<sup>10+</sup> 122 123| 名称 | 类型 | 必填 | 描述 | 124| --------------------- | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 125| 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开始，该接口支持在原子化服务中使用。 | 126| 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开始，该接口支持在原子化服务中使用。 | 127| 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开始，该接口支持在原子化服务中使用。 | 128| 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开始，该接口支持在原子化服务中使用。 | 129| 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开始，该接口支持在原子化服务中使用。 | 130| previewAnimationOptions<sup>11+</sup> | [ContextMenuAnimationOptions](#contextmenuanimationoptions11) | 否 | 控制长按预览显示动画开始倍率和结束倍率（相对预览原图比例）。<br/>默认值：{ scale: [0.95, 1.1], transition: undefined, hoverScale: undefined }。<br/>**说明：**<br />倍率设置参数小于等于0时，不生效。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 131| onAppear | () => void | 否 | 菜单弹出时的事件回调。<br />**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 132| onDisappear | () => void | 否 | 菜单消失时的事件回调。<br />**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 | 133| aboutToAppear | () => void | 否 | 菜单显示动效前的事件回调。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 134| aboutToDisappear | () => void | 否 | 菜单退出动效前的事件回调。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 135| backgroundColor<sup>11+</sup> | [ResourceColor](ts-types.md#resourcecolor) | 否 | 弹窗背板颜色。<br/>默认值：Color.Transparent。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 136| backgroundBlurStyle<sup>11+</sup> | [BlurStyle](ts-universal-attributes-background.md#blurstyle9) | 否 | 弹窗背板模糊材质。<br/>默认值：BlurStyle.COMPONENT_ULTRA_THICK。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 137| 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开始，该接口支持在原子化服务中使用。| 138| 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开始，该接口支持在原子化服务中使用。 | 139| 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开始，该接口支持在原子化服务中使用。 | 140 141## MenuPreviewMode<sup>11+</sup> 142 143**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 144 145**系统能力：** SystemCapability.ArkUI.ArkUI.Full 146 147| 名称 | 描述 | 148| ----- | -------------------------------------- | 149| NONE | 不显示预览内容。 | 150| IMAGE | 预览内容为触发长按悬浮菜单组件的截图。 | 151 152## ContextMenuAnimationOptions<sup>11+</sup> 153 154**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 155 156| 名称 | 类型 | 必填 | 描述 | 157| ----- | ------------------------------------------ | ---- | ------------------------------------ | 158| scale | [AnimationRange](#animationrange11)\<number> | 否 | 动画开始和结束时相对预览原图缩放比例。<br/>**说明：** <br/>缩放比例需要根据实际开发场景设置，建议设置值为小于预览图宽度或布局的最大限制。<br/>**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 | 159| transition<sup>12+</sup> | [TransitionEffect](ts-transition-animation-component.md#transitioneffect10对象说明) | 否 | 设置菜单显示和退出的过渡效果。<br/>**说明：**<br />菜单退出动效过程中，进行横竖屏切换，菜单会避让。二级菜单不继承自定义动效。弹出过程可以点击二级菜单，退出动效执行过程不允许点击二级菜单。<br />详细描述见[TransitionEffect](ts-transition-animation-component.md#transitioneffect10对象说明)对象说明。 | 160| hoverScale<sup>12+</sup> | [AnimationRange](#animationrange11)\<number> | 否 | 设置预览自定义长按场景下，浮起原组件截图的缩放动画开始和结束时相对预览原图缩放比例，且有与预览图的切换的过渡动效。 <br/>**说明：**<br /> 倍率设置参数小于等于0时，不生效。<br />[bindContextMenu<sup>12+</sup>](#bindcontextmenu12)场景下，不生效。<br /> 设置transition接口时，不生效。<br /> 使用此接口且同时使用scale接口时，scale接口起始值不生效。<br /> 为保障最佳体验，最终预览图尺寸不建议小于原组件截图尺寸。当前预览动效宽高会受组件截图和自定义预览大小影响，请根据实际使用情况自行保障展示效果。| 161 162## AnimationRange<sup>11+</sup> 163 164表示动画开始和结束时相对预览原图缩放比例。 165 166系统能力：SystemCapability.ArkUI.ArkUI.Full 167 168**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 169 170| 取值范围 | 说明 | 171| ---------------- | ------------------------------------------------------------------------------ | 172| [from: T, to: T] | from表示动画开始时相对预览原图缩放比例，to表示动画结束时相对预览原图缩放比例。 | 173 174## 示例 175 176### 示例1（弹出普通菜单） 177 178该示例为bindMenu通过配置MenuElement弹出普通菜单。 179 180```ts 181// xxx.ets 182@Entry 183@Component 184struct MenuExample { 185 build() { 186 Column() { 187 Text('click for Menu') 188 .bindMenu([ 189 { 190 value: 'Menu1', 191 action: () => { 192 console.info('handle Menu1 select') 193 } 194 }, 195 { 196 value: 'Menu2', 197 action: () => { 198 console.info('handle Menu2 select') 199 } 200 }, 201 ]) 202 } 203 .width('100%') 204 .margin({ top: 5 }) 205 } 206} 207``` 208 209 210 211### 示例2（弹出自定义菜单） 212 213该示例为bindMenu通过配置CustomBuilder弹出自定义菜单。 214 215```ts 216@Entry 217@Component 218struct MenuExample { 219 @State listData: number[] = [0, 0, 0] 220 221 @Builder MenuBuilder() { 222 Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { 223 ForEach(this.listData, (item:number, index) => { 224 Column() { 225 Row() { 226 Image($r("app.media.icon")).width(20).height(20).margin({ right: 5 }) 227 Text(`Menu${index as number + 1}`).fontSize(20) 228 } 229 .width('100%') 230 .height(30) 231 .justifyContent(FlexAlign.Center) 232 .align(Alignment.Center) 233 .onClick(() => { 234 console.info(`Menu${index as number + 1} Clicked!`) 235 }) 236 237 if (index != this.listData.length - 1) { 238 Divider().height(10).width('80%').color('#ccc') 239 } 240 }.padding(5).height(40) 241 }) 242 }.width(100) 243 } 244 245 build() { 246 Column() { 247 Text('click for menu') 248 .fontSize(20) 249 .margin({ top: 20 }) 250 .bindMenu(this.MenuBuilder) 251 } 252 .height('100%') 253 .width('100%') 254 .backgroundColor('#f0f0f0') 255 } 256} 257``` 258 259 260 261### 示例3（长按弹出菜单） 262 263该示例为bindContextMenu通过配置responseType.LongPress弹出菜单。 264 265```ts 266// xxx.ets 267@Entry 268@Component 269struct ContextMenuExample { 270 @Builder MenuBuilder() { 271 Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { 272 Text('Test menu item 1') 273 .fontSize(20) 274 .width(100) 275 .height(50) 276 .textAlign(TextAlign.Center) 277 Divider().height(10) 278 Text('Test menu item 2') 279 .fontSize(20) 280 .width(100) 281 .height(50) 282 .textAlign(TextAlign.Center) 283 }.width(100) 284 } 285 286 build() { 287 Column() { 288 Text('LongPress for menu') 289 } 290 .width('100%') 291 .margin({ top: 5 }) 292 .bindContextMenu(this.MenuBuilder, ResponseType.LongPress) 293 } 294} 295``` 296 297 298 299### 示例4（右键弹出指向型菜单） 300 301该示例为bindContextMenu通过配置responseType.RightClick、enableArrow弹出指向型菜单。 302 303```ts 304// xxx.ets 305@Entry 306@Component 307struct DirectiveMenuExample { 308 @Builder MenuBuilder() { 309 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 310 Text('Options') 311 Divider().strokeWidth(2).margin(5).color('#F0F0F0') 312 Text('Hide') 313 Divider().strokeWidth(2).margin(5).color('#F0F0F0') 314 Text('Exit') 315 } 316 .width(200) 317 } 318 319 build() { 320 Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) { 321 Column() { 322 Text("DirectiveMenuExample") 323 .fontSize(20) 324 .width('100%') 325 .height("25%") 326 .backgroundColor('#F0F0F0') 327 .textAlign(TextAlign.Center) 328 .bindContextMenu(this.MenuBuilder, ResponseType.RightClick, { 329 enableArrow: true, 330 placement: Placement.Bottom 331 }) 332 } 333 } 334 .width('100%') 335 .height('100%') 336 } 337} 338``` 339 340 341 342### 示例5（长按弹出菜单的截图预览样式） 343 344该示例为bindContextMenu通过配置responseType.LongPress、preview的MenuPreviewMode类型弹出菜单预览样式。 345 346```ts 347// xxx.ets 348@Entry 349@Component 350struct Index { 351 private iconStr: ResourceStr = $r("app.media.icon") 352 353 @Builder 354 MyMenu() { 355 Menu() { 356 MenuItem({ startIcon: this.iconStr, content: "菜单选项" }) 357 MenuItem({ startIcon: this.iconStr, content: "菜单选项" }) 358 MenuItem({ startIcon: this.iconStr, content: "菜单选项" }) 359 } 360 } 361 362 build() { 363 Column({ space: 50 }) { 364 Column() { 365 Column() { 366 Text('preview-image') 367 .width(200) 368 .height(100) 369 .textAlign(TextAlign.Center) 370 .margin(100) 371 .fontSize(30) 372 .bindContextMenu(this.MyMenu, ResponseType.LongPress, 373 { preview: MenuPreviewMode.IMAGE, 374 previewAnimationOptions: {scale: [0.8, 1.0]}, 375 }) 376 .backgroundColor("#ff3df2f5") 377 } 378 }.width('100%') 379 } 380 } 381} 382``` 383 384 385 386### 示例6（长按弹出菜单的自定义预览样式） 387 388该示例为bindContextMenu通过配置responseType.LongPress、preview的CustomBuilder类型弹出菜单自定义预览样式。 389 390```ts 391// xxx.ets 392@Entry 393@Component 394struct Index { 395 private iconStr: ResourceStr = $r("app.media.icon") 396 397 @Builder 398 MyMenu() { 399 Menu() { 400 MenuItem({ startIcon: this.iconStr, content: "菜单选项" }) 401 MenuItem({ startIcon: this.iconStr, content: "菜单选项" }) 402 MenuItem({ startIcon: this.iconStr, content: "菜单选项" }) 403 } 404 } 405 406 @Builder 407 MyPreview() { 408 Column() { 409 Image($r('app.media.icon')) 410 .width(200) 411 .height(200) 412 } 413 } 414 415 build() { 416 Column({ space: 50 }) { 417 Column() { 418 Column() { 419 Text('preview-builder') 420 .width(200) 421 .height(100) 422 .textAlign(TextAlign.Center) 423 .margin(100) 424 .fontSize(30) 425 .bindContextMenu(this.MyMenu, ResponseType.LongPress, 426 { 427 preview: this.MyPreview 428 }) 429 } 430 }.width('100%') 431 } 432 } 433} 434``` 435 436 437 438### 示例7（设置状态变量弹出菜单） 439 440该示例为bindContextMenu通过配置isShown弹出菜单预览样式。 441 442```ts 443// xxx.ets 444@Entry 445@Component 446struct Index { 447 private iconStr: ResourceStr = $r("app.media.icon") 448 @State isShown: boolean = false 449 450 @Builder 451 MyMenu() { 452 Menu() { 453 MenuItem({ startIcon: this.iconStr, content: "菜单选项" }) 454 MenuItem({ startIcon: this.iconStr, content: "菜单选项" }) 455 MenuItem({ startIcon: this.iconStr, content: "菜单选项" }) 456 } 457 } 458 459 @Builder 460 MyPreview() { 461 Column() { 462 Image($r('app.media.icon')) 463 .width(200) 464 .height(200) 465 } 466 } 467 468 build() { 469 Column({ space: 50 }) { 470 Column() { 471 Column() { 472 Text('preview-builder') 473 .width(200) 474 .height(100) 475 .textAlign(TextAlign.Center) 476 .margin(100) 477 .fontSize(30) 478 .bindContextMenu(this.isShown, this.MyMenu, 479 { 480 preview: this.MyPreview, 481 onDisappear: ()=>{ 482 this.isShown = false; 483 } 484 }) 485 Button('click') 486 .onClick(()=>{ 487 this.isShown = true; 488 }) 489 } 490 }.width('100%') 491 } 492 } 493} 494``` 495 496### 示例8（设置菜单和预览的动效） 497 498该示例为bindContextMenu通过配置transition，实现自定义菜单以及菜单预览时的显示和退出动效。 499 500```ts 501// xxx.ets 502@Entry 503@Component 504struct MenuExample { 505 @Builder MenuBuilder() { 506 Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) { 507 Text('Test menu item 1') 508 .fontSize(12) 509 .width(200) 510 .height(30) 511 .textAlign(TextAlign.Center) 512 Divider().height(10) 513 Text('Test menu item 2') 514 .fontSize(12) 515 .width(100) 516 .height(30) 517 .textAlign(TextAlign.Center) 518 }.width(100) 519 } 520 @Builder 521 MyPreview() { 522 Column() { 523 Image($r('app.media.icon')) 524 .width(50) 525 .height(50) 526 } 527 } 528 @State isShow:boolean = false 529 private iconStr: ResourceStr = $r("app.media.icon") 530 531 @Builder 532 MyMenu() { 533 Menu() { 534 MenuItem({ startIcon: this.iconStr, content: "菜单选项" }) 535 MenuItem({ startIcon: this.iconStr, content: "菜单选项" }) 536 MenuItem({ startIcon: this.iconStr, content: "菜单选项" }) 537 } 538 } 539 build() { 540 Column() { 541 Button('LongPress bindContextMenu') 542 .margin({ top: 15 }) 543 .bindContextMenu( 544 this.MenuBuilder, 545 ResponseType.LongPress,{ 546 transition: TransitionEffect.OPACITY.animation({ duration: 4000, curve: Curve.Ease }).combine( 547 TransitionEffect.rotate({ z: 1, angle: 180 })), 548 preview: this.MyPreview, 549 previewAnimationOptions: { 550 scale: [0.8, 1.0], 551 transition: TransitionEffect.OPACITY.animation({ duration: 4000, curve: Curve.Ease }).combine( 552 TransitionEffect.rotate({ z: 1, angle: 180 })) 553 } 554 }) 555 } 556 .width('100%') 557 .margin({ top: 5 }) 558 } 559} 560``` 561 562 563 564### 示例9（设置symbol类型图标） 565 566该示例为bindMenu通过配置MenuElement的symbolIcon弹出菜单。 567 568```ts 569// xxx.ets 570import { SymbolGlyphModifier } from '@kit.ArkUI'; 571@Entry 572@Component 573struct MenuExample { 574 @State symbolIconModifier1: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ohos_photo')).fontSize('24vp'); 575 @State symbolIconModifier2: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ohos_photo')).fontSize('24vp'); 576 build() { 577 Column() { 578 Text('click for Menu') 579 } 580 .width('100%') 581 .margin({ top: 5 }) 582 .bindMenu([ 583 { 584 value: 'Menu1', 585 symbolIcon:this.symbolIconModifier1, 586 action: () => { 587 console.info('handle Menu1 select') 588 } 589 }, 590 { 591 value: 'Menu2', 592 symbolIcon:this.symbolIconModifier2, 593 action: () => { 594 console.info('handle Menu2 select') 595 } 596 }, 597 ]) 598 } 599} 600``` 601 602 603 604### 示例10（设置一镜到底动效） 605 606该示例为bindContextMenu通过配置preview中hoverScale，实现组件截图到自定义预览图的一镜到底过渡动效。 607 608```ts 609// xxx.ets 610@Entry 611@Component 612struct Index { 613 private iconStr: ResourceStr = $r("app.media.app_icon") 614 615 @Builder 616 MyMenu() { 617 Menu() { 618 MenuItem({ startIcon: this.iconStr, content: "菜单选项" }) 619 MenuItem({ startIcon: this.iconStr, content: "菜单选项" }) 620 MenuItem({ startIcon: this.iconStr, content: "菜单选项" }) 621 } 622 } 623 624 @Builder 625 MyPreview() { 626 Column() { 627 Image($r('app.media.example')) 628 .width(200) 629 .height(200) 630 } 631 } 632 633 build() { 634 Column({ space: 50 }) { 635 Column() { 636 Column() { 637 Image($r('app.media.example')) 638 .width(100) 639 .height(100) 640 .margin(100) 641 .bindContextMenu(this.MyMenu, ResponseType.LongPress, 642 { 643 preview: this.MyPreview, 644 previewAnimationOptions: { 645 hoverScale: [1.0, 0.95] 646 } 647 }) 648 } 649 }.width('100%') 650 } 651 } 652} 653``` 654 655 656
