HarmonyOS Next应用开发——菜单的显示

【高心星出品】

菜单的显示

普通菜单的显示

bindMenu用于显示弹出菜单。

开发方法

bindMenu(content: Array<MenuElement> | CustomBuilder, options?: MenuOptions)

参数名	类型	必填	说明
content	Array<MenuElement>	CustomBuilder	是	配置菜单项图标和文本的数组，或者自定义组件。
options	MenuOptions	否	配置弹出菜单的参数。

这里可以自己定义显示的菜单布局也可以使用系统默认的布局，其中MenuElement是负责收集菜单选项的相关信息，包含菜单项文本，icon图标以及对应的监听事件。

效果展示：

完整代码：

import { promptAction } from '@kit.ArkUI';

@Entry
@Component
struct Menupage {
  @State message: string = 'Hello World';
  @State datas: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9]

  build() {
    Column() {
      List() {
        ForEach(this.datas, (item: string, index: number) => {
          ListItem() {
            Text('item' + item)
              .fontSize(20)
              .padding(20)
              .border({ width: 2, color: Color.Black })
              .width('100%')
              .bindMenu([//菜单项信息
                {
                  value: '菜单1',
                  action: () => {//菜单被点击事件
                    promptAction.showToast({ message: 'item' + item + '菜单1被点击了' })
                  }
                },
                {
                  value: '菜单2',
                  action: () => {
                    promptAction.showToast({ message: 'item' + item + '菜单2被点击了' })
                  }
                }
              ], { title: '菜单项：' })//配置菜单标题
          }
        })
      }

    }
    .height('100%')
    .width('100%')
  }
}

上下文菜单的显示

bindContextMenu为组件绑定弹出式菜单，通过长按或右键点击触发。

开发方法

bindContextMenu(content: CustomBuilder, responseType: ResponseType, options?: ContextMenuOptions)

参数名	类型	必填	说明
content	CustomBuilder	是	自定义菜单内容构造器。
responseType	ResponseType	是	菜单弹出条件，长按或者右键点击。不支持鼠标长按。
options	ContextMenuOptions	否	配置弹出菜单的参数。

效果展示：

完整代码：

import { promptAction } from '@kit.ArkUI';

@Entry
@Component
struct ContextMenupage {
  @State message: string = 'Hello World';
  @State datas: number[] = [1, 2, 3, 4, 5, 6, 7, 8, 9]

  //   构建上下文菜单布局
  @Builder
  gencontextmenu(item: number) {
    Column() {
      Text('保存内容').width('100%').textAlign(TextAlign.Center).padding(10)
        .onClick(() => {
          promptAction.showToast({ message: 'item' + item + '被保存了' })
        })
      Divider()
      Text('收藏内容').width('100%').textAlign(TextAlign.Center).padding(10)
        .onClick(() => {
          promptAction.showToast({ message: 'item' + item + '被收藏了' })
        })
      Divider()
      Text('分享内容').width('100%').textAlign(TextAlign.Center).padding(10)
        .onClick(() => {
          promptAction.showToast({ message: 'item' + item + '被分享了' })
        })
    }.width('40%')
  }

  build() {
    Column() {
      List() {
        ForEach(this.datas, (item: number, index: number) => {
          ListItem() {
            Text('item' + item)
              .fontSize(20)
              .padding(20)
              .border({ width: 2, color: Color.Black })
              .width('100%')// 绑定啥下文菜单
              .bindContextMenu(this.gencontextmenu(item), ResponseType.LongPress, { placement: Placement.Bottom })
          }
        })
      }
    }
    .height('100%')
    .width('100%')
  }
}