1# Menu 2<!--Kit: ArkUI--> 3<!--Subsystem: ArkUI--> 4<!--Owner: @Armstrong15--> 5<!--Designer: @zhanghaibo0--> 6<!--Tester: @lxl007--> 7<!--Adviser: @HelloCrease--> 8 9以垂直列表形式显示的菜单。 10 11> **说明：** 12> 13> - 该组件从API version 9开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。 14> 15> - Menu组件需和[bindMenu](ts-universal-attributes-menu.md#bindmenu)或[bindContextMenu](ts-universal-attributes-menu.md#bindcontextmenu8)方法配合使用，不支持作为普通组件单独使用。 16 17## 子组件 18 19包含[MenuItem](ts-basic-components-menuitem.md)、[MenuItemGroup](ts-basic-components-menuitemgroup.md)子组件。 20 21## 接口 22 23Menu() 24 25作为菜单的固定容器，无参数。 26 27> **说明：** 28> 29> 菜单和菜单项宽度计算规则： 30> 31> 布局过程中，期望每个菜单项的宽度一致。若子组件设置了宽度，则以[尺寸计算规则](ts-universal-attributes-size.md#constraintsize)为准。 32> 33> 不设置宽度的情况：菜单组件会对子组件MenuItem、MenuItemGroup设置默认2栅格的宽度，若菜单项内容区比2栅格宽，则会自适应撑开。 34> 35> 设置宽度的情况：菜单组件会对子组件MenuItem、MenuItemGroup设置减去padding后的固定宽度。 36> 37> 设置Menu边框[width](ts-universal-attributes-size.md#width)时，支持设置的最小宽度为64vp。 38 39**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 40 41**系统能力：** SystemCapability.ArkUI.ArkUI.Full 42 43## 属性 44 45除支持[通用属性](ts-component-general-attributes.md)外，还支持以下属性： 46 47### font<sup>10+</sup> 48 49font(value: Font) 50 51统一设置Menu中所有文本的尺寸。 52 53**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 54 55**系统能力：** SystemCapability.ArkUI.ArkUI.Full 56 57**参数：** 58 59| 参数名 | 类型 | 必填 | 说明 | 60| ------ | ------------------------ | ---- | ------------------------------------------------------------ | 61| 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/>} | 62### fontColor<sup>10+</sup> 63 64fontColor(value: ResourceColor) 65 66统一设置Menu中所有文本的颜色。 67 68**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 69 70**系统能力：** SystemCapability.ArkUI.ArkUI.Full 71 72**参数：** 73 74| 参数名 | 类型 | 必填 | 说明 | 75| ------ | ------------------------------------------ | ---- | ---------------------- | 76| value | [ResourceColor](ts-types.md#resourcecolor) | 是 | Menu中所有文本的颜色。 | 77 78### radius<sup>10+</sup> 79 80radius(value: Dimension | BorderRadiuses) 81 82设置Menu边框圆角半径。 83 84**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 85 86**系统能力：** SystemCapability.ArkUI.ArkUI.Full 87 88**参数：** 89 90| 参数名 | 类型 | 必填 | 说明 | 91| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 92| value | [Dimension](ts-types.md#dimension10) \| [BorderRadiuses](ts-types.md#borderradiuses9) | 是 | Menu边框圆角半径。<br/>默认值：2in1设备上默认值为8vp，其他设备上默认值为20vp。<br/> 从API version 12开始，当水平方向两个圆角半径之和的最大值大于菜单宽度，或垂直方向两个圆角半径之和的最大值大于菜单高度时，菜单四个圆角均采用菜单默认圆角半径值。<br/>当设置Dimension类型且传参为异常值时，菜单圆角取默认值。<br/>当设置BorderRadiuses类型且传参为异常值时，菜单默认没有圆角。 | 93 94### menuItemDivider<sup>12+</sup> 95 96menuItemDivider(options: DividerStyleOptions | undefined) 97 98设置menuItem分割线样式，不设置该属性则不展示分割线。 99 100startMargin + endMargin 超过组件宽度后startMargin和endMargin会被置0。 101 102**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 103 104**系统能力：** SystemCapability.ArkUI.ArkUI.Full 105 106**参数：** 107 108| 参数名 | 类型 | 必填 | 说明 | 109|---------|--------------------------------------------------------|------------| -------------- | 110| options | [DividerStyleOptions](ts-types.md#dividerstyleoptions12) \| undefined | 是 | 设置menuItem分割线样式。<br />-strokeWidth：分割线的线宽。<br />-color：分割线的颜色。<br />-startMargin：分割线与menuItem侧边起端的距离。<br />-endMargin：分割线与menuItem侧边结束端的距离。<br />-mode：分割线的模式，默认值为FLOATING_ABOVE_MENU。 | 111 112### menuItemGroupDivider<sup>12+</sup> 113 114menuItemGroupDivider(options: DividerStyleOptions | undefined) 115 116设置menuItemGroup上下分割线的样式，不设置该属性则默认展示分割线。 117 118**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 119 120**系统能力：** SystemCapability.ArkUI.ArkUI.Full 121 122**参数：** 123 124| 参数名 | 类型 | 必填 | 说明 | 125|---------|--------------------------------------------------------|------------| -------------- | 126| options | [DividerStyleOptions](ts-types.md#dividerstyleoptions12) \| undefined | 是 | 设置menuItemGroup顶部和底部分割线样式。<br />-strokeWidth：分割线的线宽，默认值是1px。<br />-color：分割线的颜色，默认值是 #33000000。<br />-startMargin：分割线与menuItemGroup侧边起端的距离，默认值是16。<br />-endMargin：分割线与menuItemGroup侧边结束端的距离，默认值是16。<br />-mode：分割线的模式，默认值为FLOATING_ABOVE_MENU。 | 127 128### subMenuExpandingMode<sup>12+</sup> 129 130subMenuExpandingMode(mode: SubMenuExpandingMode) 131 132设置Menu子菜单展开样式。 133 134**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 135 136**系统能力：** SystemCapability.ArkUI.ArkUI.Full 137 138**参数：** 139 140| 参数名 | 类型 | 必填 | 说明 | 141| ------ | ---------------------------- | ---- |--------------| 142| mode | [SubMenuExpandingMode](#submenuexpandingmode12枚举说明) | 是 | Menu子菜单展开样式。<br/>默认值：SubMenuExpandingMode.SIDE_EXPAND | 143 144### subMenuExpandSymbol<sup>20+</sup> 145 146subMenuExpandSymbol(symbol: SymbolGlyphModifier) 147 148设置Menu子菜单展开符号。 149 150**原子化服务API：** 从API version 20开始，该接口支持在原子化服务中使用。 151 152**系统能力：** SystemCapability.ArkUI.ArkUI.Full 153 154**参数：** 155 156| 参数名 | 类型 | 必填 | 说明 | 157| ------ | ---------------------------- | ---- |--------------| 158| symbol | [SymbolGlyphModifier](ts-universal-attributes-attribute-symbolglyphmodifier.md)| 是 | Menu子菜单展开符号。<br/>1、子菜单的展开样式为SubMenuExpandingMode.SIDE_EXPAND时，不显示展开符号。<br/>2、子菜单的展开样式为SubMenuExpandingMode.EMBEDDED_EXPAND时，展开时展开符号会顺时针旋转180°。<br/>默认值：`$r('sys.symbol.chevron_down').fontSize('24vp')` <br/>3、子菜单的展开样式为SubMenuExpandingMode.STACK_EXPAND时，展开时展开符号会顺时针旋转90°。<br/>默认值：`$r('sys.symbol.chevron_forward').fontSize('20vp').padding('2vp')` | 159 160### fontSize<sup>(deprecated)</sup> 161 162fontSize(value: Length) 163 164统一设置Menu中所有文本的尺寸。 165 166从API Version 10开始废弃，建议使用[font](#font10)代替。 167 168**系统能力：** SystemCapability.ArkUI.ArkUI.Full 169 170**参数：** 171 172| 参数名 | 类型 | 必填 | 说明 | 173| ------ | ---------------------------- | ---- | ------------------------------------------------------------ | 174| value | [Length](ts-types.md#length) | 是 | Menu中所有文本的尺寸，Length为number类型时，使用fp单位。不支持设置百分比。 | 175 176## SubMenuExpandingMode<sup>12+</sup>枚举说明 177 178Menu子菜单展开样式枚举。 179 180**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 181 182**系统能力：** SystemCapability.ArkUI.ArkUI.Full 183 184| 名称 | 值 | 说明 | 185| --------------- | ---- | ------------------------------------------ | 186| SIDE_EXPAND | 0 | 默认展开样式，子菜单位于同一平面侧边展开。 | 187| EMBEDDED_EXPAND | 1 | 直接展开样式，子菜单嵌于主菜单内展开。 | 188| STACK_EXPAND | 2 | 堆叠样式，子菜单浮于主菜单上方展开。 | 189 190## 示例 191 192### 示例1（设置多级菜单） 193 194该示例通过配置MenuItem中的builder参数实现多级菜单。 195 196```ts 197@Entry 198@Component 199struct Index { 200 @State select: boolean = true; 201 // $r('app.media.xxx')需要替换为开发者所需的图像资源文件。 202 private iconStr: ResourceStr = $r("app.media.view_list_filled"); 203 private iconStr2: ResourceStr = $r("app.media.arrow_right_filled"); 204 205 @Builder 206 SubMenu() { 207 Menu() { 208 MenuItem({ content: "复制", labelInfo: "Ctrl+C" }) 209 MenuItem({ content: "粘贴", labelInfo: "Ctrl+V" }) 210 } 211 } 212 213 @Builder 214 MyMenu(){ 215 Menu() { 216 MenuItem({ startIcon: $r("app.media.icon"), content: "菜单选项" }) 217 MenuItem({ startIcon: $r("app.media.icon"), content: "菜单选项" }) 218 .enabled(false) 219 MenuItem({ 220 startIcon: this.iconStr, 221 content: "菜单选项", 222 endIcon: this.iconStr2, 223 builder: ():void=>this.SubMenu() 224 }) 225 MenuItemGroup({ header: '小标题' }) { 226 MenuItem({ 227 startIcon: this.iconStr, 228 content: "菜单选项", 229 endIcon: this.iconStr2, 230 builder: ():void=>this.SubMenu() 231 }) 232 MenuItem({ 233 startIcon: $r("app.media.app_icon"), 234 content: "菜单选项", 235 endIcon: this.iconStr2, 236 builder: ():void=>this.SubMenu() 237 }) 238 } 239 MenuItem({ 240 startIcon: this.iconStr, 241 content: "菜单选项", 242 }) 243 } 244 } 245 246 build() { 247 Row() { 248 Column() { 249 Text('click to show menu') 250 .fontSize(50) 251 .fontWeight(FontWeight.Bold) 252 } 253 .bindMenu(this.MyMenu) 254 .width('100%') 255 } 256 .height('100%') 257 } 258} 259``` 260 261 262 263### 示例2（设置symbol类型图标） 264 265该示例通过配置symbolStartIcon、symbolEndIcon实现symbol类型图标的菜单。 266 267```ts 268// xxx.ets 269import { SymbolGlyphModifier } from '@kit.ArkUI'; 270 271@Entry 272@Component 273struct Index { 274 @State startIconModifier: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ohos_mic')).fontSize('24vp'); 275 @State endIconModifier: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ohos_trash')).fontSize('24vp'); 276 @State selectIconModifier: SymbolGlyphModifier = 277 new SymbolGlyphModifier($r('sys.symbol.checkmark')).fontSize('24vp'); 278 @State select: boolean = true; 279 280 @Builder 281 SubMenu() { 282 Menu() { 283 MenuItem({ content: "复制", labelInfo: "Ctrl+C" }) 284 MenuItem({ content: "粘贴", labelInfo: "Ctrl+V" }) 285 } 286 } 287 288 @Builder 289 MyMenu() { 290 Menu() { 291 MenuItem({ symbolStartIcon: this.startIconModifier, content: "菜单选项" }) 292 MenuItem({ symbolStartIcon: this.startIconModifier, content: "菜单选项" }) 293 .enabled(false) 294 MenuItem({ 295 symbolStartIcon: this.startIconModifier, 296 content: "菜单选项", 297 symbolEndIcon: this.endIconModifier, 298 builder: (): void => this.SubMenu() 299 }) 300 MenuItemGroup({ header: '小标题' }) { 301 MenuItem({ 302 symbolStartIcon: this.startIconModifier, 303 content: "菜单选项", 304 symbolEndIcon: this.endIconModifier, 305 builder: (): void => this.SubMenu() 306 }) 307 MenuItem({ 308 symbolStartIcon: this.startIconModifier, 309 content: "菜单选项", 310 symbolEndIcon: this.endIconModifier, 311 builder: (): void => this.SubMenu() 312 }) 313 } 314 MenuItem({ 315 content: "菜单选项", 316 }).selected(this.select).selectIcon(this.selectIconModifier) 317 } 318 } 319 320 build() { 321 Row() { 322 Column() { 323 Text('click to show menu') 324 .fontSize(50) 325 .fontWeight(FontWeight.Bold) 326 } 327 .bindMenu(this.MyMenu) 328 .width('100%') 329 } 330 .height('100%') 331 } 332} 333``` 334 335 336 337### 示例3（设置Menu子菜单展开符号） 338 339该示例通过配置subMenuExpandSymbol实现对Menu子菜单展开符号配置颜色。 340 341```ts 342import { SymbolGlyphModifier } from '@kit.ArkUI'; 343 344@Entry 345@Component 346struct Index { 347 @State startIconModifier: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ohos_star')) 348 @State endIconModifier: SymbolGlyphModifier = new SymbolGlyphModifier($r('sys.symbol.ohos_mic')) 349 @State expandSymbolModifier: SymbolGlyphModifier = 350 new SymbolGlyphModifier($r('sys.symbol.chevron_down')).fontColor([Color.Red]).fontSize('24vp') 351 352 @Builder 353 SubMenu() { 354 Menu() { 355 MenuItem({ 356 symbolStartIcon: this.startIconModifier, 357 content: "图标" 358 }) 359 MenuItem({ 360 symbolStartIcon: this.startIconModifier, 361 content: "列表" 362 }) 363 }.backgroundColor(Color.Grey) 364 } 365 366 @Builder 367 MyMenu() { 368 Menu() { 369 MenuItem({ 370 symbolStartIcon: this.startIconModifier, 371 symbolEndIcon: this.endIconModifier, 372 content: "新建文件夹", 373 builder: (): void => this.SubMenu(), 374 }) 375 MenuItem({ 376 symbolStartIcon: this.startIconModifier, 377 content: "排序方式", 378 builder: (): void => this.SubMenu(), 379 }) 380 MenuItem({ 381 symbolStartIcon: this.startIconModifier, 382 content: "查看方式", 383 builder: (): void => this.SubMenu(), 384 }) 385 } 386 .subMenuExpandingMode(SubMenuExpandingMode.EMBEDDED_EXPAND) 387 .backgroundColor(Color.Grey) 388 .subMenuExpandSymbol(this.expandSymbolModifier) 389 } 390 391 build() { 392 Button('click to show menu') 393 .position({ top: 40, left: 40 }) 394 .bindMenu(this.MyMenu) 395 } 396} 397``` 398 399 400 401### 示例4（设置分割线样式） 402 403该示例通过设置menuItemGroupDivider属性实现分割线样式。 404 405```ts 406import { LengthMetrics } from '@kit.ArkUI' 407 408@Entry 409@Component 410struct Index { 411 412 @Builder 413 MyMenu() { 414 Menu() { 415 MenuItem({ content: "Item Content" }) 416 MenuItem({ content: "Item Content" }) 417 MenuItem({ content: "Item Content" }) 418 MenuItemGroup() { 419 MenuItem({ content: "Group Child" }) 420 MenuItem({ content: "Group Child" }) 421 } 422 MenuItem({ content: "Item Content" }) 423 } 424 .menuItemDivider({ 425 strokeWidth: LengthMetrics.vp(5), 426 color: '#d5d5d5', 427 mode: DividerMode.EMBEDDED_IN_MENU 428 }) 429 .menuItemGroupDivider({ 430 strokeWidth: LengthMetrics.vp(5), 431 color: '#707070', 432 mode: DividerMode.EMBEDDED_IN_MENU 433 }) 434 } 435 436 build() { 437 RelativeContainer() { 438 Button("show menu") 439 .bindMenu(this.MyMenu()) 440 } 441 .height('100%') 442 .width('100%') 443 } 444} 445``` 446 447
