垂直列表形式显示的菜单

2024-01-22 17:15 更新

以垂直列表形式显示的菜单。

说明
  • 该组件从API Version 9开始支持。后续版本如有新增内容,则采用上角标单独标记该内容的起始版本。
  • Menu组件需和bindMenubindContextMenu方法配合使用,不支持作为普通组件单独使用。

子组件

包含MenuItemMenuItemGroup子组件。

接口

Menu()

作为菜单的固定容器,无参数。

属性

除支持通用属性外,还支持以下属性:

名称

参数类型

描述

fontSize

Length

统一设置Menu中所有文本的尺寸,Length为number类型时,使用fp单位。

示例

  1. @Entry
  2. @Component
  3. struct Index {
  4. @State select: boolean = true
  5. private iconStr: ResourceStr = $r("app.media.view_list_filled")
  6. private iconStr2: ResourceStr = $r("app.media.view_list_filled")
  7. @Builder
  8. SubMenu() {
  9. Menu() {
  10. MenuItem({ content: "复制", labelInfo: "Ctrl+C" })
  11. MenuItem({ content: "粘贴", labelInfo: "Ctrl+V" })
  12. }
  13. }
  14. @Builder
  15. MyMenu(){
  16. Menu() {
  17. MenuItem({ startIcon: $r("app.media.icon"), content: "菜单选项" })
  18. MenuItem({ startIcon: $r("app.media.icon"), content: "菜单选项" })
  19. .enabled(false)
  20. MenuItem({
  21. startIcon: this.iconStr,
  22. content: "菜单选项",
  23. endIcon: $r("app.media.arrow_right_filled"),
  24. builder: this.SubMenu.bind(this)
  25. })
  26. MenuItemGroup({ header: '小标题' }) {
  27. MenuItem({ content: "菜单选项" })
  28. .selectIcon(true)
  29. .selected(this.select)
  30. .onChange((selected) => {
  31. console.info("menuItem select" + selected);
  32. this.iconStr2 = $r("app.media.icon");
  33. })
  34. MenuItem({
  35. startIcon: $r("app.media.view_list_filled"),
  36. content: "菜单选项",
  37. endIcon: $r("app.media.arrow_right_filled"),
  38. builder: this.SubMenu.bind(this)
  39. })
  40. }
  41. MenuItem({
  42. startIcon: this.iconStr2,
  43. content: "菜单选项",
  44. endIcon: $r("app.media.arrow_right_filled")
  45. })
  46. }
  47. }
  48. build() {
  49. Row() {
  50. Column() {
  51. Text('click to show menu')
  52. .fontSize(50)
  53. .fontWeight(FontWeight.Bold)
  54. }
  55. .bindMenu(this.MyMenu)
  56. .width('100%')
  57. }
  58. .height('100%')
  59. }
  60. }

以上内容是否对您有帮助:
在线笔记
App下载
App下载

扫描二维码

下载编程狮App

公众号
微信公众号

编程狮公众号