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