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## 属性 31 32除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性: 33 34| 名称 | 参数类型 | 描述 | 35| -------- | ------------------------- | ---------------------------------------------------------------- | 36| fontSize<sup>(deprecated)</sup> | [Length](ts-types.md#length) | 统一设置Menu中所有文本的尺寸，Length为number类型时，使用fp单位。<br/>从API Version 10开始废弃，建议使用font代替。 | 37| font<sup>10+</sup> | [Font](ts-types.md#font) | 统一设置Menu中所有文本的字体样式。 | 38| fontColor<sup>10+</sup> | [ResourceColor](ts-types.md#resourcecolor) | 统一设置Menu中所有文本的颜色。 | 39| radius<sup>10+</sup> | [Dimension](ts-types.md#dimension10) \| [BorderRadiuses](ts-types.md#borderradiuses9) | 设置Menu边框圆角半径。<br/> 默认值跟随主题。数值高于menu宽度的一半时，走默认值。 | 40| width<sup>10+</sup> | [Length](ts-types.md#length) | 设置Menu边框宽度。<br/> 支持设置的最小宽度为64vp。 | 41 42## 示例 43 44```ts 45@Entry 46@Component 47struct Index { 48 @State select: boolean = true 49 private iconStr: ResourceStr = $r("app.media.view_list_filled") 50 private iconStr2: ResourceStr = $r("app.media.view_list_filled") 51 52 @Builder 53 SubMenu() { 54 Menu() { 55 MenuItem({ content: "复制", labelInfo: "Ctrl+C" }) 56 MenuItem({ content: "粘贴", labelInfo: "Ctrl+V" }) 57 } 58 } 59 60 @Builder 61 MyMenu(){ 62 Menu() { 63 MenuItem({ startIcon: $r("app.media.icon"), content: "菜单选项" }) 64 MenuItem({ startIcon: $r("app.media.icon"), content: "菜单选项" }) 65 .enabled(false) 66 MenuItem({ 67 startIcon: this.iconStr, 68 content: "菜单选项", 69 endIcon: $r("app.media.arrow_right_filled"), 70 builder: ():void=>this.SubMenu() 71 }) 72 MenuItemGroup({ header: '小标题' }) { 73 MenuItem({ content: "菜单选项" }) 74 .selectIcon(true) 75 .selected(this.select) 76 .onChange((selected) => { 77 console.info("menuItem select" + selected); 78 this.iconStr2 = $r("app.media.icon"); 79 }) 80 MenuItem({ 81 startIcon: $r("app.media.view_list_filled"), 82 content: "菜单选项", 83 endIcon: $r("app.media.arrow_right_filled"), 84 builder: ():void=>this.SubMenu() 85 }) 86 } 87 MenuItem({ 88 startIcon: this.iconStr2, 89 content: "菜单选项", 90 endIcon: $r("app.media.arrow_right_filled") 91 }) 92 } 93 } 94 95 build() { 96 Row() { 97 Column() { 98 Text('click to show menu') 99 .fontSize(50) 100 .fontWeight(FontWeight.Bold) 101 } 102 .bindMenu(this.MyMenu) 103 .width('100%') 104 } 105 .height('100%') 106 } 107} 108``` 109 110 111
