• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 菜单
2
3
4Menu是菜单接口，一般用于鼠标右键弹窗、点击弹窗等。具体用法请参考[Menu控制](../reference/arkui-ts/ts-universal-attributes-menu.md)。
5
6
7## 创建默认样式的菜单
8
9菜单需要调用bindMenu接口来实现。bindMenu响应绑定组件的点击事件，绑定组件后手势点击对应组件后即可弹出。
10
11
12
13```ts
14Button('click for Menu')
15  .bindMenu([
16  {
17    value: 'Menu1',
18    action: () => {
19      console.info('handle Menu1 select')
20    }
21  }
22])
23```
24
25
26![zh-cn_image_0000001562940565](figures/zh-cn_image_0000001562940565.png)
27
28
29## 创建自定义样式的菜单
30
31当默认样式不满足开发需求时，可使用\@CustomBuilder自定义菜单内容。可通过bindContextMenu接口进行菜单的自定义。
32
33
34### \@Builder开发菜单内的内容
35
36
37```ts
38@State select: boolean = true
39private iconStr: ResourceStr = $r("app.media.view_list_filled")
40private iconStr2: ResourceStr = $r("app.media.view_list_filled")
41@Builder
42SubMenu() {
43  Menu() {
44    MenuItem({ content: "复制", labelInfo: "Ctrl+C" })
45    MenuItem({ content: "粘贴", labelInfo: "Ctrl+V" })
46  }
47}
48
49@Builder
50MyMenu(){
51  Menu() {
52    MenuItem({ startIcon: $r("app.media.icon"), content: "菜单选项" })
53    MenuItem({ startIcon: $r("app.media.icon"), content: "菜单选项" }).enabled(false)
54    MenuItem({
55      startIcon: this.iconStr,
56      content: "菜单选项",
57      endIcon: $r("app.media.arrow_right_filled"),
58      // 当builder参数进行配置时，表示与menuItem项绑定了子菜单。鼠标hover在该菜单项时，会显示子菜单。
59      builder: this.SubMenu.bind(this),
60    })
61    MenuItemGroup({ header: '小标题' }) {
62      MenuItem({ content: "菜单选项" })
63        .selectIcon(true)
64        .selected(this.select)
65        .onChange((selected) => {
66	   console.info("menuItem select" + selected);
67	   this.iconStr2 = $r("app.media.icon");
68        })
69      MenuItem({
70        startIcon: $r("app.media.view_list_filled"),
71        content: "菜单选项",
72        endIcon: $r("app.media.arrow_right_filled"),
73        builder: this.SubMenu.bind(this)\
74      })
75    }
76    MenuItem({
77      startIcon: this.iconStr2,
78      content: "菜单选项",
79      endIcon: $r("app.media.arrow_right_filled")
80    })
81  }
82}
83
84```
85
86
87### bindMenu属性绑定组件
88
89
90```ts
91Button('click for Menu')
92  .bindMenu(this.MyMenu)
93```
94
95
96![zh-cn_image_0000001511580924](figures/zh-cn_image_0000001511580924.png)
97
98
99## 创建支持右键或长按的菜单
100
101通过bindContextMenu接口进行菜单的自定义及菜单弹出的触发方式：右键或长按。使用bindContextMenu弹出的菜单项是在独立子窗口内的，可显示在应用窗口外部。
102
103
104- [@Builder开发菜单内的内容](#builder开发菜单内的内容)与上文写法相同。
105
106- 确认菜单的弹出方式，使用bindContextMenu属性绑定组件。示例中为右键弹出菜单。
107
108  ```ts
109  Button('click for Menu')
110    .bindContextMenu(this.MyMenu, ResponseType.RightClick)
111  ```
112