• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 不依赖UI组件的全局菜单 (openMenu)
2<!--Kit: ArkUI-->
3<!--Subsystem: ArkUI-->
4<!--Owner: @Armstrong15-->
5<!--Designer: @zhanghaibo0-->
6<!--Tester: @lxl007-->
7<!--Adviser: @HelloCrease-->
8
9[菜单控制 (Menu)](arkts-popup-and-menu-components-menu.md)在使用时依赖绑定UI组件，否则无法使用。从API version 18开始，可以通过使用全局接口[openMenu](../reference/apis-arkui/arkts-apis-uicontext-promptaction.md#openmenu18)的方式，在无UI组件的场景下直接或封装使用，例如在事件回调中使用或封装后对外提供能力。
10
11## 弹出菜单
12
13通过[openMenu](../reference/apis-arkui/arkts-apis-uicontext-promptaction.md#openmenu18)可以弹出菜单。
14
15   ```ts
16   promptAction.openMenu(contentNode, { id: targetId }, {
17     enableArrow: true
18   })
19     .then(() => {
20       console.info('openMenu success');
21     })
22     .catch((err: BusinessError) => {
23       console.error('openMenu error: ' + err.code + ' ' + err.message);
24     })
25   ```
26
27### 创建ComponentContent
28
29   通过调用openMenu接口弹出菜单，需要提供用于定义自定义弹出框的内容[ComponentContent](../reference/apis-arkui/js-apis-arkui-ComponentContent.md)。其中，wrapBuilder(buildText)封装自定义组件，new Params(this.message)是自定义组件的入参，可以缺省，也可以传入基础数据类型。
30
31   ```ts
32   private contentNode: ComponentContent<Object> = new ComponentContent(uiContext, wrapBuilder(buildText), this.message);
33   ```
34
35   如果在wrapBuilder中包含其他组件（例如：[Popup](../reference/apis-arkui/arkui-ts/ohos-arkui-advanced-Popup.md)、[Chip](../reference/apis-arkui/arkui-ts/ohos-arkui-advanced-Chip.md)组件），则[ComponentContent](../reference/apis-arkui/js-apis-arkui-ComponentContent.md#componentcontent-1)应采用带有四个参数的构造函数constructor，其中options参数应传递{ nestingBuilderSupported: true }。
36
37   ```ts
38   @Builder
39   export function buildText(params: Params) {
40     Menu({
41       // 类型设置图标内容
42       icon: {
43         image: $r('app.media.app_icon'),
44         width: 32,
45         height: 32,
46         fillColor: Color.White,
47         borderRadius: 10
48       } as MenuIconOptions,
49       // 设置文字内容
50       title: {
51         text: `This is a Menu title 1`,
52         fontSize: 20,
53         fontColor: Color.Black,
54         fontWeight: FontWeight.Normal
55       } as MenuTextOptions,
56       // 设置文字内容
57       message: {
58         text: `This is a Menu message 1`,
59         fontSize: 15,
60         fontColor: Color.Black
61       } as MenuTextOptions,
62       // 设置按钮内容
63       buttons: [{
64         text: 'confirm',
65         action: () => {
66           console.info('confirm button click');
67         },
68         fontSize: 15,
69         fontColor: Color.Black,
70       },
71         {
72           text: 'cancel',
73           action: () => {
74             console.info('cancel button click');
75           },
76           fontSize: 15,
77           fontColor: Color.Black
78         },] as [MenuButtonOptions?, MenuButtonOptions?]
79     })
80   }
81
82   let contentNode: ComponentContent<Object> = new ComponentContent(uiContext, wrapBuilder(buildText), this.message, { nestingBuilderSupported: true });
83   ```
84
85
86### 绑定组件信息
87
88   通过调用openMenu接口弹出菜单，需要提供绑定组件的信息[TargetInfo](../reference/apis-arkui/arkts-apis-uicontext-i.md#targetinfo18)。若未传入有效的target，则无法弹出菜单。
89
90   ```ts
91   let frameNode: FrameNode | null = this.ctx.getFrameNodeByUniqueId(this.getUniqueId());
92   let targetId = frameNode?.getChild(0)?.getUniqueId();
93   ```
94
95### 设置弹出菜单样式
96
97   通过调用openMenu接口弹出菜单，可以设置[MenuOptions](../reference/apis-arkui/arkui-ts/ts-universal-attributes-menu.md#menuoptions10)属性调整菜单样式。title属性不生效。preview参数仅支持设置MenuPreviewMode类型。
98
99   ```ts
100   private options: MenuOptions = { enableArrow: true, placement: Placement.Bottom };
101   ```
102
103## 更新菜单样式
104
105通过[updateMenu](../reference/apis-arkui/arkts-apis-uicontext-promptaction.md#updatemenu18)可以更新菜单的样式。支持全量更新和增量更新其菜单样式，不支持更新showInSubWindow、preview、previewAnimationOptions、transition、onAppear、aboutToAppear、onDisappear、aboutToDisappear、onWillAppear、onDidAppear、onWillDisappear和onDidDisappear。
106
107   ```ts
108   promptAction.updateMenu(contentNode, {
109     enableArrow: false
110   }, true)
111     .then(() => {
112       console.info('updateMenu success');
113     })
114     .catch((err: BusinessError) => {
115       console.error('updateMenu error: ' + err.code + ' ' + err.message);
116     })
117   ```
118
119## 关闭菜单
120
121通过调用[closeMenu](../reference/apis-arkui/arkts-apis-uicontext-promptaction.md#closemenu18)可以关闭菜单。
122
123   ```ts
124   promptAction.closeMenu(contentNode)
125     .then(() => {
126       console.info('closeMenu success');
127     })
128    .catch((err: BusinessError) => {
129      console.error('closeMenu error: ' + err.code + ' ' + err.message);
130    })
131   ```
132
133> **说明：**
134>
135> 由于[updateMenu](../reference/apis-arkui/arkts-apis-uicontext-promptaction.md#updatemenu18)和[closeMenu](../reference/apis-arkui/arkts-apis-uicontext-promptaction.md#closemenu18)依赖content来更新或者关闭指定的菜单，开发者需自行维护传入的content。
136
137## 在HAR包中使用全局菜单
138
139可以通过[HAR](../quick-start/har-package.md)包封装一个Menu，从而对外提供菜单的弹出、更新和关闭能力。
140
141具体调用方式参考[在HAR包中使用全局气泡提示](./arkts-popup-and-menu-components-uicontext-popup.md#在har包中使用全局气泡提示)。
142