首页 > 其他分享 >鸿蒙HarmonyOS NEXT开发:菜单控制(ArkTS通用属性)

鸿蒙HarmonyOS NEXT开发:菜单控制(ArkTS通用属性)

时间:2024-08-09 17:27:02浏览次数:14  
标签:ArkTS 菜单 Placement version width NEXT HarmonyOS 原子化 API

菜单控制

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

说明:

  • 从API Version 7开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。

  • CustomBuilder里不支持再使用bindMenu、bindContextMenu弹出菜单。多级菜单可使用Menu组件

  • 弹出菜单的文本内容不支持长按选中。

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配置弹出菜单的参数。
名称类型必填描述
valueResourceStr菜单项文本。
原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。
icon10+ResourceStr菜单项图标。
原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。
enabled11+boolean菜单条目是否可进行交互。
默认值:true, 菜单条目可以进行交互。
原子化服务API: 从API version 12开始,该接口支持在原子化服务中使用。
action() => void点击菜单项的事件回调。
原子化服务API: 从API version 11开始,该接口支持在原子化服务中使用。

继承自ContextMenuOptions

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

ContextMenuOptions10+

名称类型必填描述
offsetPosition菜单弹出位置的偏移量,不会导致菜单显示超出屏幕范围。
说明:
菜单类型为相对⽗组件区域弹出时,⾃动根据菜单位置属性 (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处理,当使用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才会生效,另外该值生效时不会导致箭头超出菜单四周的安全距离。
说明:
箭头距菜单四周的安全距离为菜单圆角大小与箭头宽度的一半之和。
根据配置的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+MenuPreviewModeCustomBuilder长按悬浮菜单或使用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]}。
说明:
倍率设置参数小于等于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对象说明。
borderRadius12+Length | BorderRadiuses设置菜单的边框圆角半径。
说明:
不支持百分比。
当水平方向两个圆角半径之和的最大值超出菜单宽度或垂直方向两个圆角半径之和的最大值超出菜单高度时,采用菜单默认圆角半径值。

ContextMenuAnimationOptions11+

名称类型必填描述
scaleAnimationRange<number>动画开始和结束时相对预览原图缩放比例。
原子化服务API: 从API version 12开始,该接口支持在原子化服务中使用。
transition12+TransitionEffect设置菜单显示和退出的过渡效果。
说明:
菜单退出动效过程中,进行横竖屏切换,菜单会避让。二级菜单不继承自定义动效。弹出过程可以点击二级菜单,退出动效执行过程不允许点击二级菜单。
详细描述见TransitionEffect对象说明。

AnimationRange11+

表示动画开始和结束时相对预览原图缩放比例。

系统能力:SystemCapability.ArkUI.ArkUI.Full

原子化服务API: 从API version 12开始,该接口支持在原子化服务中使用。

取值范围说明
[from: T, to: T]from表示动画开始时相对预览原图缩放比例,to表示动画结束时相对预览原图缩放比例。

示例

示例1

普通菜单

// xxx.ets
@Entry
@Component
struct MenuExample {
  build() {
    Column() {
      Text('click for Menu')
        .bindMenu([
          {
            value: 'Menu1',
            action: () => {
              console.info('handle Menu1 select')
            }
          },
          {
            value: 'Menu2',
            action: () => {
              console.info('handle Menu2 select')
            }
          },
        ])
    }
    .width('100%')
    .margin({ top: 5 })
  }
}
ts

示例2

自定义内容菜单

@Entry
@Component
struct MenuExample {
  @State listData: number[] = [0, 0, 0]

  @Builder MenuBuilder() {
    Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
      ForEach(this.listData, (item:number, index) => {
        Column() {
          Row() {
            Image($r("app.media.icon")).width(20).height(20).margin({ right: 5 })
            Text(`Menu${index as number + 1}`).fontSize(20)
          }
          .width('100%')
          .height(30)
          .justifyContent(FlexAlign.Center)
          .align(Alignment.Center)
          .onClick(() => {
            console.info(`Menu${index as number + 1} Clicked!`)
          })

          if (index != this.listData.length - 1) {
            Divider().height(10).width('80%').color('#ccc')
          }
        }.padding(5).height(40)
      })
    }.width(100)
  }

  build() {
    Column() {
      Text('click for menu')
        .fontSize(20)
        .margin({ top: 20 })
        .bindMenu(this.MenuBuilder)
    }
    .height('100%')
    .width('100%')
    .backgroundColor('#f0f0f0')
  }
}
ts

示例3

菜单(长按触发显示)

// xxx.ets
@Entry
@Component
struct ContextMenuExample {
  @Builder MenuBuilder() {
    Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
      Text('Test menu item 1')
        .fontSize(20)
        .width(100)
        .height(50)
        .textAlign(TextAlign.Center)
      Divider().height(10)
      Text('Test menu item 2')
        .fontSize(20)
        .width(100)
        .height(50)
        .textAlign(TextAlign.Center)
    }.width(100)
  }

  build() {
    Column() {
      Text('LongPress for menu')
    }
    .width('100%')
    .margin({ top: 5 })
    .bindContextMenu(this.MenuBuilder, ResponseType.LongPress)
  }
}
ts

示例4

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

// xxx.ets
@Entry
@Component
struct DirectiveMenuExample {
  @Builder MenuBuilder() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Text('Options')
      Divider().strokeWidth(2).margin(5).color('#F0F0F0')
      Text('Hide')
      Divider().strokeWidth(2).margin(5).color('#F0F0F0')
      Text('Exit')
    }
    .width(200)
  }

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Column() {
        Text("DirectiveMenuExample")
          .fontSize(20)
          .width('100%')
          .height("25%")
          .backgroundColor('#F0F0F0')
          .textAlign(TextAlign.Center)
          .bindContextMenu(this.MenuBuilder, ResponseType.RightClick, {
            enableArrow: true,
            placement: Placement.Bottom
          })
      }
    }
    .width('100%')
    .height('100%')
  }
}
ts

示例5

长按悬浮菜单(预览内容为截图形式)

// xxx.ets
@Entry
@Component
struct Index {
  private iconStr: ResourceStr = $r("app.media.icon")

  @Builder
  MyMenu() {
    Menu() {
      MenuItem({ startIcon: this.iconStr, content: "菜单选项" })
      MenuItem({ startIcon: this.iconStr, content: "菜单选项" })
      MenuItem({ startIcon: this.iconStr, content: "菜单选项" })
    }
  }

  build() {
    Column({ space: 50 }) {
      Column() {
        Column() {
          Text('preview-image')
            .width(200)
            .height(100)
            .textAlign(TextAlign.Center)
            .margin(100)
            .fontSize(30)
            .bindContextMenu(this.MyMenu, ResponseType.LongPress,
              { preview: MenuPreviewMode.IMAGE,
                previewAnimationOptions: {scale: [0.8, 1.0]},
              })
            .backgroundColor("#ff3df2f5")
        }
      }.width('100%')
    }
  }
}
ts

示例6

长按悬浮菜单(自定义预览内容)

// xxx.ets
@Entry
@Component
struct Index {
  private iconStr: ResourceStr = $r("app.media.icon")

  @Builder
  MyMenu() {
    Menu() {
      MenuItem({ startIcon: this.iconStr, content: "菜单选项" })
      MenuItem({ startIcon: this.iconStr, content: "菜单选项" })
      MenuItem({ startIcon: this.iconStr, content: "菜单选项" })
    }
  }

  @Builder
  MyPreview() {
    Column() {
      Image($r('app.media.icon'))
        .width(200)
        .height(200)
    }
  }

  build() {
    Column({ space: 50 }) {
      Column() {
        Column() {
          Text('preview-builder')
            .width(200)
            .height(100)
            .textAlign(TextAlign.Center)
            .margin(100)
            .fontSize(30)
            .bindContextMenu(this.MyMenu, ResponseType.LongPress,
              {
                preview: this.MyPreview
              })
        }
      }.width('100%')
    }
  }
}
ts

示例7

通过绑定isShown控制菜单(自定义预览内容)

// xxx.ets
@Entry
@Component
struct Index {
  private iconStr: ResourceStr = $r("app.media.icon")
  @State isShown: boolean = false

  @Builder
  MyMenu() {
    Menu() {
      MenuItem({ startIcon: this.iconStr, content: "菜单选项" })
      MenuItem({ startIcon: this.iconStr, content: "菜单选项" })
      MenuItem({ startIcon: this.iconStr, content: "菜单选项" })
    }
  }

  @Builder
  MyPreview() {
    Column() {
      Image($r('app.media.icon'))
        .width(200)
        .height(200)
    }
  }

  build() {
    Column({ space: 50 }) {
      Column() {
        Column() {
          Text('preview-builder')
            .width(200)
            .height(100)
            .textAlign(TextAlign.Center)
            .margin(100)
            .fontSize(30)
            .bindContextMenu(this.isShown, this.MyMenu,
              {
                preview: this.MyPreview,
                onDisappear: ()=>{
                    this.isShown = false;
                }
              })
          Button('click')
            .onClick(()=>{
                this.isShown = true;
             })
        }
      }.width('100%')
    }
  }
}
ts

示例8

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

// xxx.ets
@Entry
@Component
struct MenuExample {
  @Builder MenuBuilder() {
    Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
      Text('Test menu item 1')
        .fontSize(12)
        .width(200)
        .height(30)
        .textAlign(TextAlign.Center)
      Divider().height(10)
      Text('Test menu item 2')
        .fontSize(12)
        .width(100)
        .height(30)
        .textAlign(TextAlign.Center)
    }.width(100)
  }
  @Builder
  MyPreview() {
    Column() {
      Image($r('app.media.icon'))
        .width(50)
        .height(50)
    }
  }
  @State isShow:boolean = false
  private iconStr: ResourceStr = $r("app.media.icon")

  @Builder
  MyMenu() {
    Menu() {
      MenuItem({ startIcon: this.iconStr, content: "菜单选项" })
      MenuItem({ startIcon: this.iconStr, content: "菜单选项" })
      MenuItem({ startIcon: this.iconStr, content: "菜单选项" })
    }
  }
  build() {
    Column() {
      Button('LongPress bindContextMenu')
        .margin({ top: 15 })
        .bindContextMenu(
          this.MenuBuilder,
          ResponseType.LongPress,{
          transition: TransitionEffect.OPACITY.animation({ duration: 4000, curve: Curve.Ease }).combine(
            TransitionEffect.rotate({ z: 1, angle: 180 })),
          preview: this.MyPreview,
          previewAnimationOptions: {
            scale: [0.8, 1.0],
            transition: TransitionEffect.OPACITY.animation({ duration: 4000, curve: Curve.Ease }).combine(
              TransitionEffect.rotate({ z: 1, angle: 180 }))
          }
        })
    }
    .width('100%')
    .margin({ top: 5 })
  }
}
ts

 

标签:ArkTS,菜单,Placement,version,width,NEXT,HarmonyOS,原子化,API
From: https://blog.csdn.net/shudaoshanBBQ/article/details/141064318

相关文章

  • 鸿蒙HarmonyOS NEXT开发:悬浮态效果(ArkTS通用属性)
    悬浮态效果设置组件的鼠标悬浮态显示效果。说明:从APIVersion8开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。hoverEffecthoverEffect(value:HoverEffect)设置组件的鼠标悬浮态显示效果。原子化服务API: 从APIversion11开始,该接口支持在......
  • 鸿蒙(Harmony) NEXT - AlphabetIndexer实现联系人字母索引
    鸿蒙(Harmony)NEXT9月份就要正式上架了,并且不会再兼容安卓平台,于是我也赶紧给App开发鸿蒙版本,接下来会写一系列的Harmony开发教程。今天使用AlphabetIndexer实现联系人字母索引,AlphabetIndexer是官方封装好的组件咱们实现后的效果图:代码实现首先在aboutToAppear方法中初始......
  • 鸿蒙HarmonyOS开发:常用布局及实用技巧
    文章目录一、概述二、盒子模型三、线性布局(Column/Row)1、space属性2、justifyContent属性3、alignItems属性四、实用技巧1、Blank组件的使用2、layoutWeight属性的使用一、概述布局是指对页面组件进行排列和定位的过程,其目的是有效地组织和展示页面内容,会涉及到......
  • HarmonyOS应用开发知识地图
    HarmonyOS应用开发旅程HarmonyOS应用开发旅程PS:Xmind原文件可以直接跳转官方具体文档地址,如需要原文件请联系:DYZZ19801.准备与学习学习HarmonyOS的基本概念和架构,搭建好所需的开发工具和环境,了解开发规范和最佳实践了解HarmonyOSHarmonyOS介绍HarmonyOS......
  • HarmonyOS 私仓搭建实战
    HarmonyOS私仓搭建实战背景在Android和iOS开发中很多时候都以以二进制的产物的方式进行依赖和协作,Android基于Mave为仓库,iOS有Pod为仓库,我们可以在官方提供的的平台使用别人开放的库,极大的提高了大家的开发效率。但是有些公司业务相关的库并不想被外部人员使用,上传到外部......
  • HarmonyOS 音视频之音频采集实战
    HarmonyOS音视频之音频采集实战背景应用开发过程中很多场景都有音频采集需求,比如聊天功能的发送语音功能,实时语音转文本功能,实时语音通话,实时视频通话等。在Android和iOS端,系统提供了两种形式:实时音频流采集音频文件录制系统还提供了不同形式的API,比如Android:AudioRec......
  • 【Harmony Next】七夕前学会创建开屏动画拿下女同事的芳心
    【HarmonyNext】七夕前学会创建开屏动画拿下女同事的芳心一个优秀的项目需要一个*格够高的动画来开启,下面教你用三步快速实现鸿蒙应用的开屏动画1.创建窗口使用windowStage.createSubWindow("splash_window")创建窗口对窗口进行管理,实现加载开屏动画在UIAbility的生命周期......
  • HarmonyOS DevEco Studio彻底修改工程名称
    关闭项目将项目文件夹替换为新的名称后重新打开项目将AppScope/app.json5中的bundleName改为新的包名{"app":{"bundleName":"com.example.newname",//改为新的包名"vendor":"example","versionCode":1000000,"......
  • nextjs14 跨域该如何处理
    nextjs官方地址next.config.js和next.config.mjs他有什么区别next.config.js:使用的是CommonJS模块系统。这是Next.js默认的配置文件格式,也是大多数情况下使用的格式。使用require语法导入模块,使用module.exports导出对象。next.config.mjs:使用的是ESMod......
  • HarmonyOS SDK助力美团单车提供便捷流畅扫码新体验
    背景在使用美团单车前,用户需要进行一系列的操作------打开美团App,点击"骑车"进入界面后,再点击"扫码用车",完成扫码后点击"确认开锁",才能最终完成单车开锁。一个简单的动作涉及5个步骤,在远距离或光线过暗等情况下,甚至还需要进行多次扫码才能开锁。策略作为国内头部的科技零售企业......