• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Menu控制
2
3为组件绑定弹出式菜单，弹出式菜单以垂直列表形式显示菜单项，可通过长按、点击或鼠标右键触发。
4
5>  **说明：**
6>
7>  - 从API Version 7开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
8>
9>  - CustomBuilder里不支持再使用bindMenu、bindContextMenu弹出菜单。多级菜单可使用[Menu组件](ts-basic-components-menu.md)。
10
11
12## 属性
13
14
15| 名称                           | 参数类型                                                        | 描述                                                         |
16| ---------------------------- | ------------------------------------------------------------ | ------------------------------------------------------------ |
17| bindMenu                     | Array<[MenuItem](#menuitem)&gt;&nbsp;\|&nbsp;[CustomBuilder](ts-types.md#custombuilder8) | 给组件绑定菜单，点击后弹出菜单。弹出菜单项支持文本和自定义两种功能。 |
18| bindContextMenu<sup>8+</sup> | content:&nbsp;[CustomBuilder](ts-types.md#custombuilder8),<br>responseType:&nbsp;[ResponseType](ts-appendix-enums.md#responsetype8) | 给组件绑定菜单，触发方式为长按或者右键点击，弹出菜单项需要自定义。 |
19
20## MenuItem
21
22| 名称     | 类型                      | 描述          |
23| ------ | ----------------------- | ----------- |
24| value  | string                  | 菜单项文本。      |
25| action | ()&nbsp;=&gt;&nbsp;void | 点击菜单项的事件回调。 |
26
27
28## 示例
29
30### 示例1
31
32普通菜单
33
34```ts
35// xxx.ets
36@Entry
37@Component
38struct MenuExample {
39  build() {
40    Column() {
41      Text('click for Menu')
42    }
43    .width('100%')
44    .margin({ top: 5 })
45    .bindMenu([
46      {
47        value: 'Menu1',
48        action: () => {
49          console.info('handle Menu1 select')
50        }
51      },
52      {
53        value: 'Menu2',
54        action: () => {
55          console.info('handle Menu2 select')
56        }
57      },
58    ])
59  }
60}
61```
62
63![zh-cn_image_0000001174582862](figures/zh-cn_image_0000001174582862.gif)
64
65### 示例2
66
67自定义内容菜单
68
69```ts
70@Entry
71@Component
72struct MenuExample {
73  @State listData: number[] = [0, 0, 0]
74
75  @Builder MenuBuilder() {
76    Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
77      ForEach(this.listData, (item, index) => {
78        Column() {
79          Row() {
80            Image($r("app.media.icon")).width(20).height(20).margin({ right: 5 })
81            Text(`Menu${index + 1}`).fontSize(20)
82          }
83          .width('100%')
84          .height(30)
85          .justifyContent(FlexAlign.Center)
86          .align(Alignment.Center)
87          .onClick(() => {
88            console.info(`Menu${index + 1} Clicked!`)
89          })
90
91          if (index != this.listData.length - 1) {
92            Divider().height(10).width('80%').color('#ccc')
93          }
94        }.padding(5).height(40)
95      })
96    }.width(100)
97  }
98
99  build() {
100    Column() {
101      Text('click for menu')
102        .fontSize(20)
103        .margin({ top: 20 })
104        .bindMenu(this.MenuBuilder)
105    }
106    .height('100%')
107    .width('100%')
108    .backgroundColor('#f0f0f0')
109  }
110}
111```
112
113![zh-cn_image_0000001186807708](figures/zh-cn_image_0000001186807708.gif)
114
115### 示例3
116
117菜单(右键触发显示)
118
119```ts
120// xxx.ets
121@Entry
122@Component
123struct ContextMenuExample {
124  @Builder MenuBuilder() {
125    Flex({ direction: FlexDirection.Column, justifyContent: FlexAlign.Center, alignItems: ItemAlign.Center }) {
126      Text('Test menu item 1')
127        .fontSize(20)
128        .width(100)
129        .height(50)
130        .textAlign(TextAlign.Center)
131      Divider().height(10)
132      Text('Test menu item 2')
133        .fontSize(20)
134        .width(100)
135        .height(50)
136        .textAlign(TextAlign.Center)
137    }.width(100)
138  }
139
140  build() {
141    Column() {
142      Text('rightclick for menu')
143    }
144    .width('100%')
145    .margin({ top: 5 })
146    .bindContextMenu(this.MenuBuilder, ResponseType.RightClick)
147  }
148}
149```
150