1# Menu
2
3以垂直列表形式显示的菜单。
4
5> **说明：**
6>
7> - 该组件从API Version 9开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
8>
9> - Menu组件需和[bindMenu](ts-universal-attributes-menu.md#bindmenu)或[bindContextMenu](ts-universal-attributes-menu.md#bindcontextmenu8)方法配合使用，不支持作为普通组件单独使用。
10
11## 子组件
12
13包含[MenuItem](ts-basic-components-menuitem.md)、[MenuItemGroup](ts-basic-components-menuitemgroup.md)子组件。
14
15## 接口
16
17Menu()
18
19作为菜单的固定容器，无参数。
20
21> **说明:**
22>
23> 菜单和菜单项宽度计算规则：
24>
25> 布局过程中，期望每个菜单项的宽度一致。若子组件设置了宽度，则以[尺寸计算规则](ts-universal-attributes-size.md#constraintsize)为准。
26>
27> 不设置宽度的情况：菜单组件会对子组件MenuItem、MenuItemGroup设置默认2栅格的宽度，若菜单项内容区比2栅格宽，则会自适应撑开。
28>
29> 设置宽度的情况：菜单组件会对子组件MenuItem、MenuItemGroup设置减去padding后的固定宽度。
30>
31> 设置Menu边框[width](ts-universal-attributes-size.md#width)时，支持设置的最小宽度为64vp。
32
33**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
34
35**系统能力：** SystemCapability.ArkUI.ArkUI.Full
36
37## 属性
38
39除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性：
40
41### fontSize<sup>(deprecated)</sup>
42
43fontSize(value: Length)
44
45统一设置Menu中所有文本的尺寸。
46
47从API Version 10开始废弃，建议使用[font](#font10)代替。
48
49**系统能力：** SystemCapability.ArkUI.ArkUI.Full
50
51**参数：**
52
53| 参数名 | 类型                         | 必填 | 说明                                                     |
54| ------ | ---------------------------- | ---- | -------------------------------------------------------- |
55| value  | [Length](ts-types.md#length) | 是   | Menu中所有文本的尺寸，Length为number类型时，使用fp单位。 |
56
57### font<sup>10+</sup>
58
59font(value: Font)
60
61统一设置Menu中所有文本的尺寸。
62
63**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
64
65**系统能力：** SystemCapability.ArkUI.ArkUI.Full
66
67**参数：**
68
69| 参数名 | 类型                     | 必填 | 说明                                                         |
70| ------ | ------------------------ | ---- | ------------------------------------------------------------ |
71| value  | [Font](ts-types.md#font) | 是   | Menu中所有文本的尺寸。<br/>默认值：<br/>{<br/>      size: 16,<br/>      family: 'HarmonyOS Sans',<br/>      weight: FontWeight.Medium,<br/>      style: FontStyle.Normal<br/>} |
72### fontColor<sup>10+</sup>
73
74fontColor(value: ResourceColor)
75
76统一设置Menu中所有文本的颜色。
77
78**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
79
80**系统能力：** SystemCapability.ArkUI.ArkUI.Full
81
82**参数：**
83
84| 参数名 | 类型                                       | 必填 | 说明                   |
85| ------ | ------------------------------------------ | ---- | ---------------------- |
86| value  | [ResourceColor](ts-types.md#resourcecolor) | 是   | Menu中所有文本的颜色。<br/>默认值：'#E5000000' |
87
88### radius<sup>10+</sup>
89
90radius(value: Dimension | BorderRadiuses)
91
92设置Menu边框圆角半径。
93
94**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。
95
96**系统能力：** SystemCapability.ArkUI.ArkUI.Full
97
98**参数：**
99
100| 参数名 | 类型                                                         | 必填 | 说明                                                         |
101| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ |
102| value  | [Dimension](ts-types.md#dimension10)&nbsp;\|&nbsp;[BorderRadiuses](ts-types.md#borderradiuses9) | 是   | Menu边框圆角半径。<br/>默认值：2in1设备上默认值为8vp，其他设备上默认值为20vp。<br/> <br/> 从API version 12开始，当水平方向两个圆角半径之和的最大值大于菜单宽度，或垂直方向两个圆角半径之和的最大值大于菜单高度时，菜单四个圆角均采用菜单默认圆角半径值。 |
103
104### menuItemDivider<sup>12+</sup>
105
106menuItemDivider(options: DividerStyleOptions | undefined)
107
108设置menuItem分割线样式, 不设置该属性则不展示分割线。
109
110startMargin + endMargin 超过组件宽度后startMargin和endMargin会被置0。
111
112**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
113
114**系统能力：** SystemCapability.ArkUI.ArkUI.Full
115
116**参数：**
117
118| 参数名     | 类型                                                     | 必填         | 说明           |
119|---------|--------------------------------------------------------|------------| -------------- |
120| options | [DividerStyleOptions](ts-types.md#DividerStyleOptions)&nbsp;\| &nbsp;undefined | 是   | 设置menuItem分割线样式。<br />-strokeWidth:分割线的线宽。<br />-color：分割线的颜色。<br />-startMargin：分割线与menuItem侧边起端的距离。<br />-endMargin：分割线与menuItem侧边结束端的距离。 |
121
122### menuItemGroupDivider<sup>12+</sup>
123
124menuItemGroupDivider(options: DividerStyleOptions | undefined)
125
126设置menuItemGroup上下分割线的样式, 不设置该属性则默认展示分割线。
127
128**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
129
130**系统能力：** SystemCapability.ArkUI.ArkUI.Full
131
132**参数：**
133
134| 参数名     | 类型                                                     | 必填         | 说明           |
135|---------|--------------------------------------------------------|------------| -------------- |
136| options | [DividerStyleOptions](ts-types.md#DividerStyleOptions)&nbsp;\| &nbsp;undefined | 是   | 设置menuItemGroup顶部和底部分割线样式。<br />-strokeWidth:分割线的线宽, 默认值是1px。<br />-color：分割线的颜色, 默认值是 #33000000。<br />-startMargin：分割线与menuItemGroup侧边起端的距离, 默认值是16。<br />-endMargin：分割线与menuItemGroup侧边结束端的距离, 默认值是16。 |
137
138### subMenuExpandingMode<sup>12+</sup>
139
140subMenuExpandingMode(mode: SubMenuExpandingMode)
141
142设置Menu子菜单展开样式。
143
144**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
145
146**系统能力：** SystemCapability.ArkUI.ArkUI.Full
147
148**参数：**
149
150| 参数名 | 类型                         | 必填 | 说明           |
151| ------ | ---------------------------- | ---- |--------------|
152| mode  | [SubMenuExpandingMode](#submenuexpandingmode12枚举说明) | 是   | Menu子菜单展开样式。<br/>默认值：SubMenuExpandingMode.SIDE_EXPAND  |
153
154## SubMenuExpandingMode<sup>12+</sup>枚举说明
155
156Menu子菜单展开样式枚举。
157
158**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。
159
160**系统能力：** SystemCapability.ArkUI.ArkUI.Full
161
162| 名称            | 说明                                       |
163| --------------- | ------------------------------------------ |
164| SIDE_EXPAND     | 默认展开样式, 子菜单位于同一平面侧边展开。 |
165| EMBEDDED_EXPAND | 直接展开样式, 子菜单嵌于主菜单内展开。     |
166| STACK_EXPAND    | 堆叠样式, 子菜单浮于主菜单上方展开。       |
167
168## 示例
169
170### 示例1（设置多级菜单）
171
172该示例通过配置MenuItem中的builder参数实现多级菜单。
173
174```ts
175@Entry
176@Component
177struct Index {
178  @State select: boolean = true
179  private iconStr: ResourceStr = $r("app.media.view_list_filled")
180  private iconStr2: ResourceStr = $r("app.media.arrow_right_filled")
181
182  @Builder
183  SubMenu() {
184    Menu() {
185      MenuItem({ content: "复制", labelInfo: "Ctrl+C" })
186      MenuItem({ content: "粘贴", labelInfo: "Ctrl+V" })
187    }
188  }
189
190  @Builder
191  MyMenu(){
192    Menu() {
193      MenuItem({ startIcon: $r("app.media.icon"), content: "菜单选项" })
194      MenuItem({ startIcon: $r("app.media.icon"), content: "菜单选项" })
195        .enabled(false)
196      MenuItem({
197        startIcon: this.iconStr,
198        content: "菜单选项",
199        endIcon: this.iconStr2,
200        builder: ():void=>this.SubMenu()
201      })
202      MenuItemGroup({ header: '小标题' }) {
203        MenuItem({
204          startIcon: this.iconStr,
205          content: "菜单选项",
206          endIcon: this.iconStr2,
207          builder: ():void=>this.SubMenu()
208        })
209        MenuItem({
210          startIcon: $r("app.media.app_icon"),
211          content: "菜单选项",
212          endIcon: this.iconStr2,
213          builder: ():void=>this.SubMenu()
214        })
215      }
216      MenuItem({
217        startIcon: this.iconStr,
218        content: "菜单选项",
219      })
220    }
221  }
222
223  build() {
224    Row() {
225      Column() {
226        Text('click to show menu')
227          .fontSize(50)
228          .fontWeight(FontWeight.Bold)
229      }
230      .bindMenu(this.MyMenu)
231      .width('100%')
232    }
233    .height('100%')
234  }
235}
236```
237
238![menu](figures/menu.png)
239
240### 示例2（设置symbol类型图标）
241
242该示例通过配置symbolStartIcon、symbolEndIcon实现symbol类型图标的菜单。
243
244```ts
245// xxx.ets
246import { SymbolGlyphModifier } from '@kit.ArkUI';
247
248@Entry
249@Component
250struct Index {
251  @State startIconModifier: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ohos_mic')).fontSize('24vp');
252  @State endIconModifier: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ohos_trash')).fontSize('24vp');
253  @State selectIconModifier: SymbolGlyphModifier =
254    new SymbolGlyphModifier($r('sys.symbol.checkmark')).fontSize('24vp');
255  @State select: boolean = true;
256
257  @Builder
258  SubMenu() {
259    Menu() {
260      MenuItem({ content: "复制", labelInfo: "Ctrl+C" })
261      MenuItem({ content: "粘贴", labelInfo: "Ctrl+V" })
262    }
263  }
264
265  @Builder
266  MyMenu() {
267    Menu() {
268      MenuItem({ symbolStartIcon: this.startIconModifier, content: "菜单选项" })
269      MenuItem({ symbolStartIcon: this.startIconModifier, content: "菜单选项" })
270        .enabled(false)
271      MenuItem({
272        symbolStartIcon: this.startIconModifier,
273        content: "菜单选项",
274        symbolEndIcon: this.endIconModifier,
275        builder: (): void => this.SubMenu()
276      })
277      MenuItemGroup({ header: '小标题' }) {
278        MenuItem({
279          symbolStartIcon: this.startIconModifier,
280          content: "菜单选项",
281          symbolEndIcon: this.endIconModifier,
282          builder: (): void => this.SubMenu()
283        })
284        MenuItem({
285          symbolStartIcon: this.startIconModifier,
286          content: "菜单选项",
287          symbolEndIcon: this.endIconModifier,
288          builder: (): void => this.SubMenu()
289        })
290      }
291      MenuItem({
292        content: "菜单选项",
293      }).selected(this.select).selectIcon(this.selectIconModifier)
294    }
295  }
296
297  build() {
298    Row() {
299      Column() {
300        Text('click to show menu')
301          .fontSize(50)
302          .fontWeight(FontWeight.Bold)
303      }
304      .bindMenu(this.MyMenu)
305      .width('100%')
306    }
307    .height('100%')
308  }
309}
310```
311
312![zh-cn_image_0000001174582862](figures/normal-symbol.jpg)