• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# Menu
2
3以垂直列表形式显示的菜单。
4
5> **说明：**
6>
7> - 该组件从API Version 9开始支持。后续版本如有新增内容，则采用上角标单独标记该内容的起始版本。
8>
9> - Menu组件需和[bindMenu](ts-universal-attributes-menu.md)或[bindContextMenu](ts-universal-attributes-menu.md)方法配合使用，不支持作为普通组件单独使用。
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除支持[通用属性](ts-universal-attributes-size.md)外，还支持以下属性:
24
25| 名称     | 参数类型                  | 描述                                                             |
26| -------- | ------------------------- | ---------------------------------------------------------------- |
27| fontSize | [Length](ts-types.md#length) | 统一设置Menu中所有文本的尺寸，Length为number类型时，使用fp单位。 |
28
29## 示例
30
31```ts
32@Entry
33@Component
34struct Index {
35  @State select: boolean = true
36  private iconStr: ResourceStr = $r("app.media.view_list_filled")
37  private iconStr2: ResourceStr = $r("app.media.view_list_filled")
38
39  @Builder
40  SubMenu() {
41    Menu() {
42      MenuItem({ content: "复制", labelInfo: "Ctrl+C" })
43      MenuItem({ content: "粘贴", labelInfo: "Ctrl+V" })
44    }
45  }
46
47  @Builder
48  MyMenu(){
49    Menu() {
50      MenuItem({ startIcon: $r("app.media.icon"), content: "菜单选项" })
51      MenuItem({ startIcon: $r("app.media.icon"), content: "菜单选项" })
52        .enabled(false)
53      MenuItem({
54        startIcon: this.iconStr,
55        content: "菜单选项",
56        endIcon: $r("app.media.arrow_right_filled"),
57        builder: this.SubMenu.bind(this)
58      })
59      MenuItemGroup({ header: '小标题' }) {
60        MenuItem({ content: "菜单选项" })
61          .selectIcon(true)
62          .selected(this.select)
63          .onChange((selected) => {
64            console.info("menuItem select" + selected);
65            this.iconStr2 = $r("app.media.icon");
66          })
67        MenuItem({
68          startIcon: $r("app.media.view_list_filled"),
69          content: "菜单选项",
70          endIcon: $r("app.media.arrow_right_filled"),
71          builder: this.SubMenu.bind(this)
72        })
73      }
74      MenuItem({
75        startIcon: this.iconStr2,
76        content: "菜单选项",
77        endIcon: $r("app.media.arrow_right_filled")
78      })
79    }
80  }
81
82  build() {
83    Row() {
84      Column() {
85        Text('click to show menu')
86          .fontSize(50)
87          .fontWeight(FontWeight.Bold)
88      }
89      .bindMenu(this.MyMenu)
90      .width('100%')
91    }
92    .height('100%')
93  }
94}
95```
96
97![menu1](figures/menu1.png)
98