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