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使用的是[ ]将{ }包罗起来，有点类似数组的数据存储，说不定还可以在[ ]中多存入几个{ }呢！为了证实自己的猜想，于是我决定实践一下，如下面所示：
代码块：

1.       Button('click for Menu')
2.         .bindMenu([
3.           {
4.             value: 'Menu1',
5.             action: () => {
6.               console.info('handle Menu1 select')
7.             }
8.           },
9.           {
10.             value: 'Menu2',
11.             action: () => {
12.               console.info('handle Menu2 select')
13.             }
14.           },
15.           {
16.             value: 'Menu3',
17.             action: () => {
18.               console.info('handle Menu3 select')
19.             }
20.           }
21.         ])

复制代码

表现结果：

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

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

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

官网案例代码所示：

1. class Tmp {
2.   iconStr2: ResourceStr = $r("app.media.view_list_filled")
4.   set(val: Resource) {
5.     this.iconStr2 = val
6.   }
7. }
9. @Entry
10. @Component
11. struct menuExample {
12.   @State select: boolean = true
13.   private iconStr: ResourceStr = $r("app.media.view_list_filled")
14.   private iconStr2: ResourceStr = $r("app.media.view_list_filled")
16.   @Builder
17.   SubMenu() {
18.     Menu() {
19.       MenuItem({ content: "复制", labelInfo: "Ctrl+C" })
20.       MenuItem({ content: "粘贴", labelInfo: "Ctrl+V" })
21.     }
22.   }
24.   @Builder
25.   MyMenu() {
26.     Menu() {
27.       MenuItem({ startIcon: $r("app.media.icon"), content: "菜单选项" })
28.       MenuItem({ startIcon: $r("app.media.icon"), content: "菜单选项" }).enabled(false)
29.       MenuItem({
30.         startIcon: this.iconStr,
31.         content: "菜单选项",
32.         endIcon: $r("app.media.arrow_right_filled"),
33.         // 当builder参数进行配置时，表示与menuItem项绑定了子菜单。鼠标hover在该菜单项时，会显示子菜单。
34.         builder: this.SubMenu
35.       })
36.       MenuItemGroup({ header: '小标题' }) {
37.         MenuItem({ content: "菜单选项" })
38.           .selectIcon(true)
39.           .selected(this.select)
40.           .onChange((selected) => {
41.             console.info("menuItem select" + selected);
42.             let Str: Tmp = new Tmp()
43.             Str.set($r("app.media.icon"))
44.           })
45.         MenuItem({
46.           startIcon: $r("app.media.view_list_filled"),
47.           content: "菜单选项",
48.           endIcon: $r("app.media.arrow_right_filled"),
49.           builder: this.SubMenu
50.         })
51.       }
53.       MenuItem({
54.         startIcon: this.iconStr2,
55.         content: "菜单选项",
56.         endIcon: $r("app.media.arrow_right_filled")
57.       })
58.     }
59.   }
61.   build() {
62.     // ...
63.   }
64. }

复制代码

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

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

复制代码

表现的结果：

我们就跟着表现的案例结果，返回到代码中看看，如许就大概知道哪些代码是实现哪些功能的?观察片刻我们有了以下明白：
Menu()是表示一个整体的菜单
MenuItem()是表示菜单的选项
MenuItemGroup()是表示菜单的选项分组

末了我们只必要跟着仿写即可，仿写多了便能熟能生巧，纯熟于心。

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