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