HarmonyOs 学会查看官方文档实现菜单框

1.  学会查看官方文档

HarmonyOS跟上网上的视频学习一段时间后，基本也就入门了，但是有一些操作网上没有找到合适教学的视频，这时，大家就需要养成参考官方文档的习惯了，因为官方的开发文档是我们学习深度任何一门语言或框架的路途，官网的开发文档写的足够全面，可以在其中学到一些网上视频所没有的内容。

官网文档ArkUI链接：ArkUI简介-ArkUI（方舟UI框架）-应用框架 - 华为HarmonyOS开发者 (huawei.com)https://developer.huawei.com/consumer/cn/doc/harmonyos-guides-V5/arkui-overview-V5

本篇文章以实现一个菜单功能为例教会大家如何参考官网文档

因为我们想实现的是下拉菜单框，所以在左边框点击菜单（Menu）；当然，如果你所想的效果可以先查看一下文档中对应的示例是否是符合自己的预期，再深入了解。

2. 从简单的案例出发

所有的复杂功能都是从一个简单的功能出发，迭代升级的。要想学会更复杂的操作之前，先理解基础操作先。

观察官网默认样式的菜单可以发现使用的组件和方法，我这里使用红色框起来了，使用的是Button组件和bindMenu方法，接着观察打印示例图，或者自己将其代码块放入DevEco Studio中运行，可以发现Button作用是显示按钮以及定义按钮名，bindMenu方法的value是显示输出的结果，action是点击对应菜单后执行的事件。

你以为分析到这里，就这样就行了吗？你注意看bindMenu使用的是[ ]将{ }包含起来，有点类似数组的数据存储，说不定还可以在[ ]中多存入几个{ }呢！为了证实自己的猜想，于是我决定实践一下，如下面所示：

代码块：

      Button('click for Menu')
        .bindMenu([
          {
            value: 'Menu1',
            action: () => {
              console.info('handle Menu1 select')
            }
          },
          {
            value: 'Menu2',
            action: () => {
              console.info('handle Menu2 select')
            }
          },
          {
            value: 'Menu3',
            action: () => {
              console.info('handle Menu3 select')
            }
          }
        ])

显示效果：

 这证实了我的猜想，这样一个最简单的菜单效果的实现，总算是学会了！

3. 创建自定义的菜单（更复杂的案例）

老规矩，还是先参考官方文档内容

官网案例代码所示：

class Tmp {
  iconStr2: ResourceStr = $r("app.media.view_list_filled")

  set(val: Resource) {
    this.iconStr2 = val
  }
}

@Entry
@Component
struct menuExample {
  @State select: boolean = true
  private iconStr: ResourceStr = $r("app.media.view_list_filled")
  private iconStr2: ResourceStr = $r("app.media.view_list_filled")

  @Builder
  SubMenu() {
    Menu() {
      MenuItem({ content: "复制", labelInfo: "Ctrl+C" })
      MenuItem({ content: "粘贴", labelInfo: "Ctrl+V" })
    }
  }

  @Builder
  MyMenu() {
    Menu() {
      MenuItem({ startIcon: $r("app.media.icon"), content: "菜单选项" })
      MenuItem({ startIcon: $r("app.media.icon"), content: "菜单选项" }).enabled(false)
      MenuItem({
        startIcon: this.iconStr,
        content: "菜单选项",
        endIcon: $r("app.media.arrow_right_filled"),
        // 当builder参数进行配置时，表示与menuItem项绑定了子菜单。鼠标hover在该菜单项时，会显示子菜单。
        builder: this.SubMenu
      })
      MenuItemGroup({ header: '小标题' }) {
        MenuItem({ content: "菜单选项" })
          .selectIcon(true)
          .selected(this.select)
          .onChange((selected) => {
            console.info("menuItem select" + selected);
            let Str: Tmp = new Tmp()
            Str.set($r("app.media.icon"))
          })
        MenuItem({
          startIcon: $r("app.media.view_list_filled"),
          content: "菜单选项",
          endIcon: $r("app.media.arrow_right_filled"),
          builder: this.SubMenu
        })
      }

      MenuItem({
        startIcon: this.iconStr2,
        content: "菜单选项",
        endIcon: $r("app.media.arrow_right_filled")
      })
    }
  }

  build() {
    // ...
  }
}

 记得学会灵活应用，如果你只是将上面的代码写入，没有在build中添加菜单使用的代码块也不会显示的哦！记得按照官网加上以下代码块：

    Button('click for Menu')
      .bindMenu(this.MyMenu)

显示的效果：

我们就跟着显示的案例效果，返回到代码中看看，这样就大概知道哪些代码是实现哪些功能的?观察片刻我们有了以下理解：

Menu()是表示一个整体的菜单

MenuItem()是表示菜单的选项

MenuItemGroup()是表示菜单的选项分组

最后我们只需要跟着仿写即可，仿写多了便能熟能生巧，熟练于心。