• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 菜单（Menu）
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当默认样式不满足开发需求时，可使用[\@Builder](../quick-start/arkts-builder.md)自定义菜单内容，通过bindMenu接口进行菜单的自定义。
32
33
34### \@Builder开发菜单内的内容
35
36
37```ts
38class Tmp {
39  iconStr2: ResourceStr = $r("app.media.view_list_filled")
40
41  set(val: Resource) {
42    this.iconStr2 = val
43  }
44}
45
46@Entry
47@Component
48struct menuExample {
49  @State select: boolean = true
50  private iconStr: ResourceStr = $r("app.media.view_list_filled")
51  private iconStr2: ResourceStr = $r("app.media.view_list_filled")
52
53  @Builder
54  SubMenu() {
55    Menu() {
56      MenuItem({ content: "复制", labelInfo: "Ctrl+C" })
57      MenuItem({ content: "粘贴", labelInfo: "Ctrl+V" })
58    }
59  }
60
61  @Builder
62  MyMenu() {
63    Menu() {
64      MenuItem({ startIcon: $r("app.media.icon"), content: "菜单选项" })
65      MenuItem({ startIcon: $r("app.media.icon"), content: "菜单选项" }).enabled(false)
66      MenuItem({
67        startIcon: this.iconStr,
68        content: "菜单选项",
69        endIcon: $r("app.media.arrow_right_filled"),
70        // 当builder参数进行配置时，表示与menuItem项绑定了子菜单。鼠标hover在该菜单项时，会显示子菜单。
71        builder: this.SubMenu
72      })
73      MenuItemGroup({ header: '小标题' }) {
74        MenuItem({ content: "菜单选项" })
75          .selectIcon(true)
76          .selected(this.select)
77          .onChange((selected) => {
78            console.info("menuItem select" + selected);
79            let Str: Tmp = new Tmp()
80            Str.set($r("app.media.icon"))
81          })
82        MenuItem({
83          startIcon: $r("app.media.view_list_filled"),
84          content: "菜单选项",
85          endIcon: $r("app.media.arrow_right_filled"),
86          builder: this.SubMenu
87        })
88      }
89
90      MenuItem({
91        startIcon: this.iconStr2,
92        content: "菜单选项",
93        endIcon: $r("app.media.arrow_right_filled")
94      })
95    }
96  }
97
98  build() {
99    // ...
100  }
101}
102```
103
104
105### bindMenu属性绑定组件
106
107
108```ts
109Button('click for Menu')
110  .bindMenu(this.MyMenu)
111```
112
113
114![zh-cn_image_0000001511580924](figures/zh-cn_image_0000001511580924.png)
115
116
117## 创建支持右键或长按的菜单
118
119通过bindContextMenu接口自定义菜单，设置菜单弹出的触发方式，触发方式为右键或长按。使用bindContextMenu弹出的菜单项是在独立子窗口内的，可显示在应用窗口外部。
120
121
122- @Builder开发菜单内的内容与上文写法相同。
123
124- 确认菜单的弹出方式，使用bindContextMenu属性绑定组件。示例中为右键弹出菜单。
125
126  ```ts
127  Button('click for Menu')
128    .bindContextMenu(this.MyMenu, ResponseType.RightClick)
129  ```
130