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-component-general-attributes.md)外，还支持以下属性： 40 41### font<sup>10+</sup> 42 43font(value: Font) 44 45统一设置Menu中所有文本的尺寸。 46 47**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 48 49**系统能力：** SystemCapability.ArkUI.ArkUI.Full 50 51**参数：** 52 53| 参数名 | 类型 | 必填 | 说明 | 54| ------ | ------------------------ | ---- | ------------------------------------------------------------ | 55| 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/>} | 56### fontColor<sup>10+</sup> 57 58fontColor(value: ResourceColor) 59 60统一设置Menu中所有文本的颜色。 61 62**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 63 64**系统能力：** SystemCapability.ArkUI.ArkUI.Full 65 66**参数：** 67 68| 参数名 | 类型 | 必填 | 说明 | 69| ------ | ------------------------------------------ | ---- | ---------------------- | 70| value | [ResourceColor](ts-types.md#resourcecolor) | 是 | Menu中所有文本的颜色。<br/>默认值：'#E5000000' | 71 72### radius<sup>10+</sup> 73 74radius(value: Dimension | BorderRadiuses) 75 76设置Menu边框圆角半径。 77 78**原子化服务API：** 从API version 11开始，该接口支持在原子化服务中使用。 79 80**系统能力：** SystemCapability.ArkUI.ArkUI.Full 81 82**参数：** 83 84| 参数名 | 类型 | 必填 | 说明 | 85| ------ | ------------------------------------------------------------ | ---- | ------------------------------------------------------------ | 86| value | [Dimension](ts-types.md#dimension10) \| [BorderRadiuses](ts-types.md#borderradiuses9) | 是 | Menu边框圆角半径。<br/>默认值：2in1设备上默认值为8vp，其他设备上默认值为20vp。<br/> 从API version 12开始，当水平方向两个圆角半径之和的最大值大于菜单宽度，或垂直方向两个圆角半径之和的最大值大于菜单高度时，菜单四个圆角均采用菜单默认圆角半径值。 | 87 88### menuItemDivider<sup>12+</sup> 89 90menuItemDivider(options: DividerStyleOptions | undefined) 91 92设置menuItem分割线样式，不设置该属性则不展示分割线。 93 94startMargin + endMargin 超过组件宽度后startMargin和endMargin会被置0。 95 96**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 97 98**系统能力：** SystemCapability.ArkUI.ArkUI.Full 99 100**参数：** 101 102| 参数名 | 类型 | 必填 | 说明 | 103|---------|--------------------------------------------------------|------------| -------------- | 104| options | [DividerStyleOptions](ts-types.md#dividerstyleoptions12) \| undefined | 是 | 设置menuItem分割线样式。<br />-strokeWidth：分割线的线宽。<br />-color：分割线的颜色。<br />-startMargin：分割线与menuItem侧边起端的距离。<br />-endMargin：分割线与menuItem侧边结束端的距离。<br />-mode：分割线的模式，默认值为FLOATING_ABOVE_MENU。 | 105 106### menuItemGroupDivider<sup>12+</sup> 107 108menuItemGroupDivider(options: DividerStyleOptions | undefined) 109 110设置menuItemGroup上下分割线的样式，不设置该属性则默认展示分割线。 111 112**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 113 114**系统能力：** SystemCapability.ArkUI.ArkUI.Full 115 116**参数：** 117 118| 参数名 | 类型 | 必填 | 说明 | 119|---------|--------------------------------------------------------|------------| -------------- | 120| 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。 | 121 122### subMenuExpandingMode<sup>12+</sup> 123 124subMenuExpandingMode(mode: SubMenuExpandingMode) 125 126设置Menu子菜单展开样式。 127 128**原子化服务API：** 从API version 12开始，该接口支持在原子化服务中使用。 129 130**系统能力：** SystemCapability.ArkUI.ArkUI.Full 131 132**参数：** 133 134| 参数名 | 类型 | 必填 | 说明 | 135| ------ | ---------------------------- | ---- |--------------| 136| mode | [SubMenuExpandingMode](#submenuexpandingmode12枚举说明) | 是 | Menu子菜单展开样式。<br/>默认值：SubMenuExpandingMode.SIDE_EXPAND | 137 138### fontSize<sup>(deprecated)</sup> 139 140fontSize(value: Length) 141 142统一设置Menu中所有文本的尺寸。 143 144从API Version 10开始废弃，建议使用[font](#font10)代替。 145 146**系统能力：** SystemCapability.ArkUI.ArkUI.Full 147 148**参数：** 149 150| 参数名 | 类型 | 必填 | 说明 | 151| ------ | ---------------------------- | ---- | ------------------------------------------------------------ | 152| value | [Length](ts-types.md#length) | 是 | Menu中所有文本的尺寸，Length为number类型时，使用fp单位。不支持设置百分比。 | 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 | 0 | 默认展开样式，子菜单位于同一平面侧边展开。 | 165| EMBEDDED_EXPAND | 1 | 直接展开样式，子菜单嵌于主菜单内展开。 | 166| STACK_EXPAND | 2 | 堆叠样式，子菜单浮于主菜单上方展开。 | 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 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
