鸿蒙5.0版开发：ArkTS组件通用属性-菜单控制

往期鸿蒙全套实战文章必看：

• 鸿蒙开发焦点知识点，看这篇文章就够了
  
• 最新版！鸿蒙HarmonyOS Next应用开发实战学习门路
  
• 鸿蒙HarmonyOS NEXT开发技能最全学习门路指南
  
• 鸿蒙应用开发实战项目，看这一篇文章就够了（部分项目附源码）
  

---

菜单控制

为组件绑定弹出式菜单，弹出式菜单以垂直列表情势显示菜单项，可通过长按、点击或鼠标右键触发。
   阐明：
  

• 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
  
• CustomBuilder里不支持再使用bindMenu、bindContextMenu弹出菜单。多级菜单可使用Menu组件。
  
• 弹出菜单的文本内容不支持长按选中。
  
• 当窗口大小发生变革时，菜单自动隐蔽。
  
• 动效曲线使用弹簧曲线，在动效退出时，由于弹簧曲线的回弹震荡，菜单消失后有较长的拖尾，使得其他变乱无法响应。
  
• 若组件是可拖动节点，绑定bindContextMenu未指定preview时，菜单弹出会浮起拖拽预览图且菜单选项和预览图不会发生避让。对此，开发者可根据使用场景设置preview或者将目标节点设置成不可拖动节点。
  
• 从API Version 12开始，菜单支持长按500ms弹出子菜单。
  
• 从API Version 12开始，菜单支持按压态跟随手指移动。
  
  
  
  • 仅支持使用Menu组件且子组件包罗MenuItem或MenuItemGroup的场景。
    
  • 仅支持MenuPreviewMode为NONE的菜单。
    
  
  

  bindMenu

bindMenu(content: Array<MenuElement> | CustomBuilder, options?: MenuOptions)
给组件绑定菜单，点击后弹出菜单。弹出菜单项支持图标+文本排列和自定义两种功能。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
体系能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填阐明contentArray<MenuElement> | CustomBuilder是设置菜单项图标和文本的数组，或者自定义组件。optionsMenuOptions否设置弹出菜单的参数。 bindMenu11+

bindMenu(isShow: boolean, content: Array<MenuElement> | CustomBuilder, options?: MenuOptions)
给组件绑定菜单，点击后弹出菜单。弹出菜单项支持图标+文本排列和自定义两种功能。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
体系能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填阐明isShow11+boolean是支持开发者通过状态变量控制显隐，默认值为false，menu弹窗必须等待页面全部构建才气展示，因此不能在页面构建中设置为true，否则会导致显示位置及外形错误，当前不支持双向绑定。contentArray<MenuElement> | CustomBuilder是设置菜单项图标和文本的数组，或者自定义组件。optionsMenuOptions否设置弹出菜单的参数。 bindContextMenu8+

bindContextMenu(content: CustomBuilder, responseType: ResponseType, options?: ContextMenuOptions)
给组件绑定菜单，触发方式为长按或者右键点击，弹出菜单项需要自定义。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
体系能力： SystemCapability.ArkUI.ArkUI.Full
参数：
参数名类型必填阐明contentCustomBuilder是自定义菜单内容构造器。responseTypeResponseType是菜单弹出条件，长按或者右键点击。不支持鼠标长按。optionsContextMenuOptions否设置弹出菜单的参数。 bindContextMenu12+

bindContextMenu(isShown: boolean, content: CustomBuilder, options?: ContextMenuOptions)
给组件绑定菜单，触发方式为控制绑定的isShown。
isShown为true，弹出菜单。isShown为false，隐蔽菜单。弹出菜单项需要自定义。
菜单弹出不跟随点击位置，只与placement设置有关。
体系能力： SystemCapability.ArkUI.ArkUI.Full
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。
参数：
参数名类型必填阐明isShownboolean是支持开发者通过状态变量控制显隐，默认值为false。menu需要在页面全部构建完成后才气弹窗展示，假如在页面构建前或构建中设置为true，可能导致显示位置及外形错误、无法正常弹出显示等题目。当前不支持双向绑定，不支持长按触发拖拽。contentCustomBuilder是自定义菜单内容构造器。optionsContextMenuOptions否设置弹出菜单的参数。 MenuElement

名称类型必填描述valueResourceStr是菜单项文本。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。icon10+ResourceStr否菜单项图标。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。enabled11+boolean否菜单条目是否可进行交互。
默认值：true, 菜单条目可以进行交互。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。action() => void是点击菜单项的变乱回调。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。symbolIcon12+SymbolGlyphModifier否设置菜单项图标。通过Modifier设置菜单项图标，设置该项时，原icon图标不显示。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。 MenuOptions10+

继承自ContextMenuOptions。
名称类型必填描述titleResourceStr否菜单标题。
阐明：
仅在content设置为Array<MenuElement> 时生效。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。showInSubWindow11+boolean否是否在子窗口显示菜单。
默认值：2in1设备为true，其他设备为false。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。 ContextMenuOptions10+

名称类型必填描述offsetPosition否菜单弹出位置的偏移量，不会导致菜单显示超出屏幕范围。
默认值：{ x: 0, y: 0 }
阐明：
菜单类型为相对⽗组件地域弹出时，⾃动根据菜单位置属性 (placement)将地域的宽或⾼计⼊偏移量中。
当菜单相对父组件出现在上侧时（placement设置为Placement.TopLeft，Placement.Top，Placement.TopRight），x为正值，菜单相对组件向右进行偏移，y为正值，菜单相对组件向上进行偏移。
当菜单相对父组件出现在下侧时（placement设置为Placement.BottomLeft，Placement.Bottom，Placement.BottomRight），x为正值，菜单相对组件向右进行偏移，y为正值，菜单相对组件向下进行偏移。
当菜单相对父组件出现在左侧时（placement设置为Placement.LeftTop，Placement.Left，Placement.LeftBottom），x为正值，菜单相对组件向左进行偏移，y为正值，菜单相对组件向下进行偏移。
当菜单相对父组件出现在右侧时（placement设置为Placement.RightTop，Placement.Right，Placement.RightBottom），x为正值，菜单相对组件向右进行偏移，y为正值，菜单相对组件向下进行偏移。
假如菜单调整了显示位置（与placement初始值主方向不⼀致），则偏移值 (offset) 失效。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。placementPlacement否菜单组件优先显示的位置，当前位置显示不下时，会自动调整位置。
阐明：
placement值设置为undefined、null或没有设置此选项时，按未设置placement处理惩罚，当使用bindMenu，按默认值：Placement.BottomLeft设置，当使用bindContextMenu8+，菜单跟随点击位置弹出；当使用bindContextMenu12+，按默认值：Placement.BottomLeft设置。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。enableArrowboolean否是否显示箭头。假如菜单的大小和位置不足以放置箭头时，不会显示箭头。
默认值：false, 不显示箭头。
阐明：
enableArrow为true时，placement未设置或者值为非法值，默认在目标物上方显示，否则按照placement的位置优先显示。当前位置显示不下时，会自动调整位置，enableArrow为undefined时，不显示箭头。bindContextMenu从API version 10开始支持该属性；bindMenu从API version 12开始支持该属性。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。arrowOffsetLength否箭头在菜单处的偏移。偏移量必须合法且转换为具体数值时大于0才会生效，另外该值生效时不会导致箭头超出菜单四周的安全距离。
默认值：0
单位：vp
阐明：
箭头距菜单四周的安全距离为菜单圆角大小与箭头宽度的一半之和。
根据设置的placement来计算是在水平还是垂直方向上偏移。
箭头在菜单水平方向时，偏移量为箭头至最左侧箭头安全距离处的距离。箭头在菜单垂直方向时，偏移量为箭头至最上侧箭头安全距离处的距离。
根据设置的placement的不同，箭头展示的默认位置不同：
在菜单不发生避让的环境下，placement设置为Placement.Top、Placement.Bottom时，箭头显示在水平方向且默认居中；
placement设置为Placement.Left、Placement.Right时，箭头显示在垂直方向且默认居中；
placement设置为Placement.TopLeft、Placement.BottomLeft时，箭头默认显示在水平方向，且距离菜单左侧边缘距离为箭头安全距离；
placement设置为Placement.TopRight、Placement.BottomRight时，箭头默认显示在水平方向，且距离菜单右侧距离为箭头安全距离；
placement设置为Placement.LeftTop、Placement.RightTop时，箭头默认显示在垂直方向，且距离菜单上侧距离为箭头安全距离；
placement设置为Placement.LeftBottom、Placement.RightBottom时，箭头默认显示在垂直方向，且距离菜单下侧距离为箭头安全距离；
bindContextMenu从API version 10开始支持该属性；bindMenu从API version 12开始支持该属性。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。preview11+MenuPreviewMode| CustomBuilder否长按悬浮菜单或使用bindContextMenu12+显示菜单的预览内容样式，可以为目标组件的截图，也可以为用户自定义的内容。
默认值：MenuPreviewMode.NONE, 无预览内容。
阐明：
- 不支持responseType为ResponseType.RightClick时触发，假如responseType为ResponseType.RightClick，则不会显示预览内容。
- 当未设置preview参数或preview参数设置为MenuPreviewMode.NONE时，enableArrow参数生效。
- 当preview参数设置为MenuPreviewMode.IMAGE或CustomBuilder时，enableArrow为true时也不显示箭头。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。previewAnimationOptions11+ContextMenuAnimationOptions否控制长按预览显示动画开始倍率和竣事倍率（相对预览原图比例）。
默认值：{ scale: [0.95, 1.1], transition: undefined, hoverScale: undefined }。
阐明：
倍率设置参数小于等于0时，不生效。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。onAppear() => void否菜单弹出时的变乱回调。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。onDisappear() => void否菜单消失时的变乱回调。
原子化服务API： 从API version 11开始，该接口支持在原子化服务中使用。aboutToAppear() => void否菜单显示动效前的变乱回调。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。aboutToDisappear() => void否菜单退出动效前的变乱回调。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。backgroundColor11+ResourceColor否弹窗背板颜色。
默认值：Color.Transparent。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。backgroundBlurStyle11+BlurStyle否弹窗背板含糊材质。
默认值：BlurStyle.COMPONENT_ULTRA_THICK。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。transition12+TransitionEffect否设置菜单显示和退出的过渡效果。
阐明：
菜单退出动效过程中，进行横竖屏切换，菜单会避让。二级菜单不继承自定义动效。弹出过程可以点击二级菜单，退出动效执行过程不允许点击二级菜单。
详细描述见TransitionEffect对象阐明。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。borderRadius12+Length | BorderRadiuses | LocalizedBorderRadiuses否设置菜单的边框圆角半径。
默认值：2in1设备上默认值8vp，其他设备上默认值20vp。
阐明：
支持百分比。
当水平方向两个圆角半径之和的最大值超出菜单宽度或垂直方向两个圆角半径之和的最大值超出菜单高度时，采用菜单默认圆角半径值。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。 MenuPreviewMode11+

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
体系能力： SystemCapability.ArkUI.ArkUI.Full
名称描述NONE不显示预览内容。IMAGE预览内容为触发长按悬浮菜单组件的截图。 ContextMenuAnimationOptions11+

原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
名称类型必填描述scaleAnimationRange<number>否动画开始和竣事时相对预览原图缩放比例。
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。transition12+TransitionEffect否设置菜单显示和退出的过渡效果。
阐明：
菜单退出动效过程中，进行横竖屏切换，菜单会避让。二级菜单不继承自定义动效。弹出过程可以点击二级菜单，退出动效执行过程不允许点击二级菜单。
详细描述见TransitionEffect对象阐明。hoverScale12+AnimationRange<number>否设置预览自定义长按场景下，浮起原组件截图的缩放动画开始和竣事时相对预览原图缩放比例，且有与预览图的切换的过渡动效。
阐明：
倍率设置参数小于等于0时，不生效。
bindContextMenu12+场景下，不生效。
设置transition接口时，不生效。
使用此接口且同时使用scale接口时，scale接口起始值不生效。
为保障最佳体验，终极预览图尺寸不发起小于原组件截图尺寸。当前预览动效宽高会受组件截图和自定义预览大小影响，请根据实际使用环境自行保障展示效果。 AnimationRange11+

表示动画开始和竣事时相对预览原图缩放比例。
体系能力：SystemCapability.ArkUI.ArkUI.Full
原子化服务API： 从API version 12开始，该接口支持在原子化服务中使用。
取值范围阐明[from: T, to: T]from表示动画开始时相对预览原图缩放比例，to表示动画竣事时相对预览原图缩放比例。 示例

示例1

普通菜单

1. // xxx.ets
2. @Entry
3. @Component
4. struct MenuExample {
5.   build() {
6.     Column() {
7.       Text('click for Menu')
8.         .bindMenu([
9.           {
10.             value: 'Menu1',
11.             action: () => {
12.               console.info('handle Menu1 select')
13.             }
14.           },
15.           {
16.             value: 'Menu2',
17.             action: () => {
18.               console.info('handle Menu2 select')
19.             }
20.           },
21.         ])
22.     }
23.     .width('100%')
24.     .margin({ top: 5 })
25.   }
26. }

复制代码

示例2

自定义内容菜单

1. @Entry
2. @Component
3. struct MenuExample {
4.   @State listData: number[] = [0, 0, 0]
6.   @Builder MenuBuilder() {
7.     Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
8.       ForEach(this.listData, (item:number, index) => {
9.         Column() {
10.           Row() {
11.             Image($r("app.media.icon")).width(20).height(20).margin({ right: 5 })
12.             Text(`Menu${index as number + 1}`).fontSize(20)
13.           }
14.           .width('100%')
15.           .height(30)
16.           .justifyContent(FlexAlign.Center)
17.           .align(Alignment.Center)
18.           .onClick(() => {
19.             console.info(`Menu${index as number + 1} Clicked!`)
20.           })
22.           if (index != this.listData.length - 1) {
23.             Divider().height(10).width('80%').color('#ccc')
24.           }
25.         }.padding(5).height(40)
26.       })
27.     }.width(100)
28.   }
30.   build() {
31.     Column() {
32.       Text('click for menu')
33.         .fontSize(20)
34.         .margin({ top: 20 })
35.         .bindMenu(this.MenuBuilder)
36.     }
37.     .height('100%')
38.     .width('100%')
39.     .backgroundColor('#f0f0f0')
40.   }
41. }

复制代码

示例3

菜单(长按触发显示)

1. // xxx.ets
2. @Entry
3. @Component
4. struct ContextMenuExample {
5.   @Builder MenuBuilder() {
6.     Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
7.       Text('Test menu item 1')
8.         .fontSize(20)
9.         .width(100)
10.         .height(50)
11.         .textAlign(TextAlign.Center)
12.       Divider().height(10)
13.       Text('Test menu item 2')
14.         .fontSize(20)
15.         .width(100)
16.         .height(50)
17.         .textAlign(TextAlign.Center)
18.     }.width(100)
19.   }
21.   build() {
22.     Column() {
23.       Text('LongPress for menu')
24.     }
25.     .width('100%')
26.     .margin({ top: 5 })
27.     .bindContextMenu(this.MenuBuilder, ResponseType.LongPress)
28.   }
29. }

复制代码

示例4

指向性菜单(右键触发显示)

1. // xxx.ets
2. @Entry
3. @Component
4. struct DirectiveMenuExample {
5.   @Builder MenuBuilder() {
6.     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
7.       Text('Options')
8.       Divider().strokeWidth(2).margin(5).color('#F0F0F0')
9.       Text('Hide')
10.       Divider().strokeWidth(2).margin(5).color('#F0F0F0')
11.       Text('Exit')
12.     }
13.     .width(200)
14.   }
16.   build() {
17.     Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
18.       Column() {
19.         Text("DirectiveMenuExample")
20.           .fontSize(20)
21.           .width('100%')
22.           .height("25%")
23.           .backgroundColor('#F0F0F0')
24.           .textAlign(TextAlign.Center)
25.           .bindContextMenu(this.MenuBuilder, ResponseType.RightClick, {
26.             enableArrow: true,
27.             placement: Placement.Bottom
28.           })
29.       }
30.     }
31.     .width('100%')
32.     .height('100%')
33.   }
34. }

复制代码

示例5

长按悬浮菜单（预览内容为截图情势）

1. // xxx.ets
2. @Entry
3. @Component
4. struct Index {
5.   private iconStr: ResourceStr = $r("app.media.icon")
7.   @Builder
8.   MyMenu() {
9.     Menu() {
10.       MenuItem({ startIcon: this.iconStr, content: "菜单选项" })
11.       MenuItem({ startIcon: this.iconStr, content: "菜单选项" })
12.       MenuItem({ startIcon: this.iconStr, content: "菜单选项" })
13.     }
14.   }
16.   build() {
17.     Column({ space: 50 }) {
18.       Column() {
19.         Column() {
20.           Text('preview-image')
21.             .width(200)
22.             .height(100)
23.             .textAlign(TextAlign.Center)
24.             .margin(100)
25.             .fontSize(30)
26.             .bindContextMenu(this.MyMenu, ResponseType.LongPress,
27.               { preview: MenuPreviewMode.IMAGE,
28.                 previewAnimationOptions: {scale: [0.8, 1.0]},
29.               })
30.             .backgroundColor("#ff3df2f5")
31.         }
32.       }.width('100%')
33.     }
34.   }
35. }

复制代码

示例6

长按悬浮菜单（自定义预览内容）

1. // xxx.ets
2. @Entry
3. @Component
4. struct Index {
5.   private iconStr: ResourceStr = $r("app.media.icon")
7.   @Builder
8.   MyMenu() {
9.     Menu() {
10.       MenuItem({ startIcon: this.iconStr, content: "菜单选项" })
11.       MenuItem({ startIcon: this.iconStr, content: "菜单选项" })
12.       MenuItem({ startIcon: this.iconStr, content: "菜单选项" })
13.     }
14.   }
16.   @Builder
17.   MyPreview() {
18.     Column() {
19.       Image($r('app.media.icon'))
20.         .width(200)
21.         .height(200)
22.     }
23.   }
25.   build() {
26.     Column({ space: 50 }) {
27.       Column() {
28.         Column() {
29.           Text('preview-builder')
30.             .width(200)
31.             .height(100)
32.             .textAlign(TextAlign.Center)
33.             .margin(100)
34.             .fontSize(30)
35.             .bindContextMenu(this.MyMenu, ResponseType.LongPress,
36.               {
37.                 preview: this.MyPreview
38.               })
39.         }
40.       }.width('100%')
41.     }
42.   }
43. }

复制代码

示例7

通过绑定isShown控制菜单（自定义预览内容）

1. // xxx.ets
2. @Entry
3. @Component
4. struct Index {
5.   private iconStr: ResourceStr = $r("app.media.icon")
6.   @State isShown: boolean = false
8.   @Builder
9.   MyMenu() {
10.     Menu() {
11.       MenuItem({ startIcon: this.iconStr, content: "菜单选项" })
12.       MenuItem({ startIcon: this.iconStr, content: "菜单选项" })
13.       MenuItem({ startIcon: this.iconStr, content: "菜单选项" })
14.     }
15.   }
17.   @Builder
18.   MyPreview() {
19.     Column() {
20.       Image($r('app.media.icon'))
21.         .width(200)
22.         .height(200)
23.     }
24.   }
26.   build() {
27.     Column({ space: 50 }) {
28.       Column() {
29.         Column() {
30.           Text('preview-builder')
31.             .width(200)
32.             .height(100)
33.             .textAlign(TextAlign.Center)
34.             .margin(100)
35.             .fontSize(30)
36.             .bindContextMenu(this.isShown, this.MyMenu,
37.               {
38.                 preview: this.MyPreview,
39.                 onDisappear: ()=>{
40.                     this.isShown = false;
41.                 }
42.               })
43.           Button('click')
44.             .onClick(()=>{
45.                 this.isShown = true;
46.              })
47.         }
48.       }.width('100%')
49.     }
50.   }
51. }

复制代码

示例8

通过transition自定义菜单和预览的显示/退出动效属性

1. // xxx.ets
2. @Entry
3. @Component
4. struct MenuExample {
5.   @Builder MenuBuilder() {
6.     Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
7.       Text('Test menu item 1')
8.         .fontSize(12)
9.         .width(200)
10.         .height(30)
11.         .textAlign(TextAlign.Center)
12.       Divider().height(10)
13.       Text('Test menu item 2')
14.         .fontSize(12)
15.         .width(100)
16.         .height(30)
17.         .textAlign(TextAlign.Center)
18.     }.width(100)
19.   }
20.   @Builder
21.   MyPreview() {
22.     Column() {
23.       Image($r('app.media.icon'))
24.         .width(50)
25.         .height(50)
26.     }
27.   }
28.   @State isShow:boolean = false
29.   private iconStr: ResourceStr = $r("app.media.icon")
31.   @Builder
32.   MyMenu() {
33.     Menu() {
34.       MenuItem({ startIcon: this.iconStr, content: "菜单选项" })
35.       MenuItem({ startIcon: this.iconStr, content: "菜单选项" })
36.       MenuItem({ startIcon: this.iconStr, content: "菜单选项" })
37.     }
38.   }
39.   build() {
40.     Column() {
41.       Button('LongPress bindContextMenu')
42.         .margin({ top: 15 })
43.         .bindContextMenu(
44.           this.MenuBuilder,
45.           ResponseType.LongPress,{
46.           transition: TransitionEffect.OPACITY.animation({ duration: 4000, curve: Curve.Ease }).combine(
47.             TransitionEffect.rotate({ z: 1, angle: 180 })),
48.           preview: this.MyPreview,
49.           previewAnimationOptions: {
50.             scale: [0.8, 1.0],
51.             transition: TransitionEffect.OPACITY.animation({ duration: 4000, curve: Curve.Ease }).combine(
52.               TransitionEffect.rotate({ z: 1, angle: 180 }))
53.           }
54.         })
55.     }
56.     .width('100%')
57.     .margin({ top: 5 })
58.   }
59. }

复制代码

示例9

普通菜单(使用symbol类型图标)

1. // xxx.ets
2. import { SymbolGlyphModifier } from '@kit.ArkUI';
3. @Entry
4. @Component
5. struct MenuExample {
6.   @State symbolIconModifier1: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ohos_photo')).fontSize('24vp');
7.   @State symbolIconModifier2: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ohos_photo')).fontSize('24vp');
8.   build() {
9.     Column() {
10.       Text('click for Menu')
11.     }
12.     .width('100%')
13.     .margin({ top: 5 })
14.     .bindMenu([
15.       {
16.         value: 'Menu1',
17.         symbolIcon:this.symbolIconModifier1,
18.         action: () => {
19.           console.info('handle Menu1 select')
20.         }
21.       },
22.       {
23.         value: 'Menu2',
24.         symbolIcon:this.symbolIconModifier2,
25.         action: () => {
26.           console.info('handle Menu2 select')
27.         }
28.       },
29.     ])
30.   }
31. }

复制代码

示例10

通过hoverScale实现组件截图到自定义预览图的一镜到底过渡动效

1. // xxx.ets
2. @Entry
3. @Component
4. struct Index {
5.   private iconStr: ResourceStr = $r("app.media.app_icon")
7.   @Builder
8.   MyMenu() {
9.     Menu() {
10.       MenuItem({ startIcon: this.iconStr, content: "菜单选项" })
11.       MenuItem({ startIcon: this.iconStr, content: "菜单选项" })
12.       MenuItem({ startIcon: this.iconStr, content: "菜单选项" })
13.     }
14.   }
16.   @Builder
17.   MyPreview() {
18.     Column() {
19.       Image($r('app.media.example'))
20.         .width(200)
21.         .height(200)
22.     }
23.   }
25.   build() {
26.     Column({ space: 50 }) {
27.       Column() {
28.         Column() {
29.           Image($r('app.media.example'))
30.             .width(100)
31.             .height(100)
32.             .margin(100)
33.             .bindContextMenu(this.MyMenu, ResponseType.LongPress,
34.               {
35.                 preview: this.MyPreview,
36.                 previewAnimationOptions: {
37.                   hoverScale: [1.0, 0.95]
38.                 }
39.               })
40.         }
41.       }.width('100%')
42.     }
43.   }
44. }

复制代码

免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！更多信息从访问主页：qidao123.com:ToB企服之家，中国第一个企服评测及商务社交产业平台。