31.细解鸿蒙之元服务UX上架标准-显示上下文菜单

王老实及其友伴的鸿蒙路
120 阅读4分钟

细解鸿蒙之元服务UX上架标准-显示上下文菜单

是否必须遵守：涉及则必须

标准项描述：

在应用程序的界面设计中，当界面存在支持显示上下文菜单的目标时，用户可以借助鼠标或触控板来打开上下文菜单。这一功能为用户提供了更多的操作选项和便捷性，使界面交互更加灵活。

支持显示上下文菜单的目标

界面中的各种元素都可能成为支持显示上下文菜单的目标。例如，文本框、图标、按钮、图片、列表项等。这些元素在设计时被赋予了特定的交互属性，当用户对其进行操作时，会触发上下文菜单的显示。

鼠标操作

1 操作方式：使用鼠标打开上下文菜单通常是通过右键点击目标元素来实现。当用户右键点击目标元素时，会弹出一个上下文菜单。菜单中包含了与该元素相关的各种操作选项，例如复制、粘贴、删除、编辑等。用户可以通过鼠标移动指针来选择菜单中的选项。例如，在一个文本编辑软件中，右键点击文本框可以弹出上下文菜单，选择其中的复制、粘贴等操作。
2 控制精度：鼠标操作能够提供相对精确的操作控制。用户可以通过鼠标指针准确地定位目标元素，并在菜单中选择相应的选项。这对于需要精确操作的任务非常重要，比如在文件管理中，右键点击文件图标可以选择文件的属性、删除等操作。
3 操作范围：鼠标操作的范围相对较大，能够在整个屏幕范围内进行操作。用户可以通过鼠标右键点击目标元素来打开上下文菜单，无论该元素在屏幕的哪个位置。

触控板操作

1 操作方式：触控板也可以用于打开上下文菜单。在大多数情况下，用户可以通过双指点击目标元素来打开上下文菜单。当双指点击目标元素时，会弹出一个上下文菜单。用户可以通过手指滑动来选择菜单中的选项。例如，在笔记本电脑上，双指点击触摸板上的图标可以弹出上下文菜单。
2 操作体验：触控板提供了一种更加便捷和直观的操作方式。用户可以通过手势操作来打开上下文菜单，例如双指点击、单指长按等。这种操作方式使得用户在移动设备上能够更加灵活地操作界面。
3 操作特点：触控板的操作特点与鼠标有所不同。它可以通过不同的手势来实现不同的功能，例如双指缩放、单指旋转等。这些功能可以为用户提供更加丰富的操作体验。

打开上下文菜单的意义

1 提供更多操作选项：上下文菜单为用户提供了更多的操作选项，使用户能够更加方便地进行各种操作。例如，在文件管理中，右键点击文件图标可以弹出上下文菜单，选择文件的属性、删除等操作。
2 提高工作效率：通过打开上下文菜单，用户可以快速地进行各种操作，从而提高工作效率。例如，在文本编辑软件中，右键点击文本框可以弹出上下文菜单，选择复制、粘贴等操作。
3 增强用户体验：支持显示上下文菜单的目标为用户提供了更加便捷和直观的操作方式，从而增强用户体验。用户可以通过上下文菜单来自由地调整界面元素的操作，使界面更加符合自己的使用习惯。 --javascripttypescriptshellbashsqljsonhtmlcssccppjavarubypythongorustmarkdown

// xxx.ets
@Entry
@Component
struct Index {
  @Builder MenuBuilder() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Button('Test ContextMenu1')
      Divider().strokeWidth(2).margin(5).color(Color.Black)
      Button('Test ContextMenu2')
      Divider().strokeWidth(2).margin(5).color(Color.Black)
      Button('Test ContextMenu3')
    }
    .width(200)
    .height(160)
  }

  build() {
    Flex({ direction: FlexDirection.Column, alignItems: ItemAlign.Center, justifyContent: FlexAlign.Center }) {
      Column() {
        Text("Test ContextMenu")
          .fontSize(20)
          .width('100%')
          .height(500)
          .backgroundColor(0xAFEEEE)
          .textAlign(TextAlign.Center)
      }
      .bindContextMenu(this.MenuBuilder, ResponseType.LongPress)
      .onDragStart(()=>{
        // 拖拽时关闭菜单
        ContextMenu.close() // 建议使用 this.getUIContext().getContextMenuController().close()
      })
    }
    .width('100%')
    .height('100%')
  }
}

PS：实际项目中如有出入，请告知博主，博主会第一时间修改得哇~

avatar
文章
阅读
粉丝