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