• Home
  • Line#
  • Scopes#
  • Navigate#
  • Raw
  • Download
1# 构建弹窗
2<!--Kit: ArkUI-->
3<!--Subsystem: ArkUI-->
4<!--Owner: @liyi0309-->
5<!--Designer: @liyi0309-->
6<!--Tester: @lxl007-->
7<!--Adviser: @HelloCrease-->
8
9
10可以通过创建弹窗控制器和创建自定义弹窗的内容对象两种方法显示自定义弹窗，设置其样式和内容。
11
12
13[通过创建弹窗控制器显示自定义弹窗](#通过创建弹窗控制器显示自定义弹窗)：此时在命名为ArkUI_NativeDialogAPI_x （x表示版本）的结构体里，定义了弹窗接口集合，用于实现各种弹窗控制。
14
15
16[通过创建自定义弹窗的内容对象显示自定义弹窗](#通过创建自定义弹窗的内容对象显示自定义弹窗)：该方式下弹窗接口定义在[native_dialog.h](../reference/apis-arkui/capi-native-dialog-h.md#函数)的函数中。
17
18
19> **说明：**
20>
21> - 通过创建弹窗控制器来显示自定义弹窗，使用方式可以参考[openCustomDialogWithController](../reference/apis-arkui/arkts-apis-uicontext-promptaction.md#opencustomdialogwithcontroller18)接口。
22>
23> - 通过创建自定义弹窗的内容对象来显示自定义弹窗，使用方式可以参考[openCustomDialog](../reference/apis-arkui/arkts-apis-uicontext-promptaction.md#opencustomdialog12)接口。
24>
25> - [OH_ArkUI_QueryModuleInterfaceByName](../reference/apis-arkui/capi-native-interface-h.md#oh_arkui_querymoduleinterfacebyname)用于获取指定类型的Native模块接口集合，可以通过其返回ArkUI_NativeDialogHandle类型的数据调用Native模块中的接口。
26
27## 创建和销毁自定义弹窗
28
29### 通过创建弹窗控制器显示自定义弹窗
30
31- 创建弹窗控制器：
32  [ArkUI_NativeDialogHandle](../reference/apis-arkui/capi-arkui-nativemodule-arkui-nativedialog8h.md)表示指向弹窗控制器的指针，可以通过调用[ArkUI_NativeDialogAPI_x](../reference/apis-arkui/capi-arkui-nativemodule-arkui-nativedialogapi-1.md)的[create](../reference/apis-arkui/capi-arkui-nativemodule-arkui-nativedialogapi-1.md#create)接口创建一个弹窗控制器。
33该方法返回ArkUI_NativeDialogHandle类型的数据。
34  ```
35  ArkUI_NativeDialogAPI_1 *dialogAPI = reinterpret_cast<ArkUI_NativeDialogAPI_1 *>(
36      OH_ArkUI_QueryModuleInterfaceByName(ARKUI_NATIVE_DIALOG, "ArkUI_NativeDialogAPI_1"));
37  auto dialogController = dialogAPI->create();
38  ```
39
40- 当不再需要弹窗操作时，需要主动调用dispose接口销毁弹窗控制器对象。
41  ```
42  ArkUI_NativeDialogAPI_1 *dialogAPI = reinterpret_cast<ArkUI_NativeDialogAPI_1 *>(
43      OH_ArkUI_QueryModuleInterfaceByName(ARKUI_NATIVE_DIALOG, "ArkUI_NativeDialogAPI_1"));
44  dialogAPI->dispose(dialogController);
45  ```
46
47### 通过创建自定义弹窗的内容对象显示自定义弹窗
48
49- 创建弹窗的内容对象：
50  [ArkUI_CustomDialogOptions](../reference/apis-arkui/capi-arkui-nativemodule-arkui-customdialogoptions.md)自定义弹窗的内容对象，可以通过调用[OH_ArkUI_CustomDialog_CreateOptions](../reference/apis-arkui/capi-native-dialog-h.md#oh_arkui_customdialog_createoptions)接口创建一个自定义弹窗的内容对象。
51该方法返回ArkUI_CustomDialogOptions类型的指针。
52  ```
53  auto textNode = std::make_shared<ArkUITextNode>();
54  auto dialogOptions = OH_ArkUI_CustomDialog_CreateOptions(textNode->GetHandle());
55  ```
56  > **说明：**
57  >
58  > ArkUITextNode的声明方式可以查看[ArkUINode.h](../ui/ndk-access-the-arkts-page.md)文件中的实现文本组件。
59
60- 当不再需要弹窗操作时，需要主动调用[OH_ArkUI_CustomDialog_DisposeOptions](../reference/apis-arkui/capi-native-dialog-h.md#oh_arkui_customdialog_disposeoptions)接口销毁弹窗控制器对象。
61  ```
62  OH_ArkUI_CustomDialog_DisposeOptions(dialogOptions);
63  ```
64
65## 设置弹窗样式
66
67可以设置弹窗对齐方式、偏移量，弹窗背板圆角弧度、背景色、蒙层颜色以及区域等。
68
691. 创建弹窗内容节点。
70   ```
71   ArkUI_NodeHandle CreateDialogContent() {
72       ArkUI_NativeNodeAPI_1 *nodeAPI = reinterpret_cast<ArkUI_NativeNodeAPI_1 *>(
73           OH_ArkUI_QueryModuleInterfaceByName(ARKUI_NATIVE_NODE, "ArkUI_NativeNodeAPI_1"));
74       ArkUI_NodeHandle text = nodeAPI->createNode(ARKUI_NODE_TEXT);
75       ArkUI_NumberValue textWidthValue[] = {{.f32 = 300}};
76       ArkUI_AttributeItem textWidthItem = {.value = textWidthValue,
77                                            .size = sizeof(textWidthValue) / sizeof(ArkUI_NumberValue)};
78       nodeAPI->setAttribute(text, NODE_WIDTH, &textWidthItem);
79       ArkUI_NumberValue textHeightValue[] = {{.f32 = 300}};
80       ArkUI_AttributeItem textHeightItem = {.value = textHeightValue,
81                                             .size = sizeof(textWidthValue) / sizeof(ArkUI_NumberValue)};
82       nodeAPI->setAttribute(text, NODE_HEIGHT, &textHeightItem);
83       ArkUI_NodeHandle span = nodeAPI->createNode(ARKUI_NODE_SPAN);
84       ArkUI_AttributeItem spanItem = {.string = "这是一个弹窗"};
85       nodeAPI->setAttribute(span, NODE_SPAN_CONTENT, &spanItem);
86       ArkUI_NodeHandle imageSpan = nodeAPI->createNode(ARKUI_NODE_IMAGE_SPAN);
87       ArkUI_AttributeItem imageSpanItem = {.string = "/pages/common/sky.jpg"};
88       nodeAPI->setAttribute(imageSpan, NODE_IMAGE_SPAN_SRC, &imageSpanItem);
89       ArkUI_NumberValue imageSpanWidthValue[] = {{.f32 = 300}};
90       ArkUI_AttributeItem imageSpanWidthItem = {.value = imageSpanWidthValue,
91                                                 .size = sizeof(textWidthValue) / sizeof(ArkUI_NumberValue)};
92       nodeAPI->setAttribute(imageSpan, NODE_WIDTH, &imageSpanWidthItem);
93       ArkUI_NumberValue imageSpanHeightValue[] = {{.f32 = 200}};
94       ArkUI_AttributeItem imageSpanHeightItem = {.value = imageSpanHeightValue,
95                                                  .size = sizeof(textWidthValue) / sizeof(ArkUI_NumberValue)};
96       nodeAPI->setAttribute(imageSpan, NODE_HEIGHT, &imageSpanHeightItem);
97       nodeAPI->addChild(text, span);
98       nodeAPI->addChild(text, imageSpan);
99       return text;
100   }
101   ```
102
1032. 以下介绍两种控制弹窗样式的方式，弹窗接口请参考[native_dialog.h](../reference/apis-arkui/capi-native-dialog-h.md)。
104
105- 通过controller控制弹窗样式。
106   ```
107   void ShowDialog() {
108       ArkUI_NativeDialogAPI_1 *dialogAPI = reinterpret_cast<ArkUI_NativeDialogAPI_1 *>(
109           OH_ArkUI_QueryModuleInterfaceByName(ARKUI_NATIVE_DIALOG, "ArkUI_NativeDialogAPI_1"));
110       if (!dialogController) {
111           dialogController = dialogAPI->create();
112       }
113       auto contentNode = CreateDialogContent();
114       dialogAPI->setContent(dialogController, contentNode);
115       dialogAPI->setContentAlignment(dialogController, static_cast<int32_t>(ARKUI_ALIGNMENT_BOTTOM), 0, 0);
116       dialogAPI->setBackgroundColor(dialogController, 0xffffffff);
117       dialogAPI->setCornerRadius(dialogController, 6, 6, 6, 6);
118       dialogAPI->setModalMode(dialogController, false);
119       dialogAPI->setAutoCancel(dialogController, true);
120       dialogAPI->show(dialogController, false);
121   }
122   ```
123
124- 通过dialogOptions控制弹窗样式。
125   ```
126   constexpr int32_t id = 0;
127   void openDialogCallBack(int32_t dialogId) {
128       id = dialogId;
129   }
130   void OpenCustomDialog() {
131       auto contentNode = CreateDialogContent();
132       auto dialogOptions = OH_ArkUI_CustomDialog_CreateOptions(contentNode);
133       OH_ArkUI_CustomDialog_SetAlignment(dialogOptions, static_cast<int32_t>(ARKUI_ALIGNMENT_BOTTOM), 0, 0);
134       OH_ArkUI_CustomDialog_SetBackgroundColor(dialogOptions, 0xffffffff);
135       OH_ArkUI_CustomDialog_SetCornerRadius(dialogOptions, 6, 6, 6, 6);
136       OH_ArkUI_CustomDialog_SetModalMode(dialogOptions, false);
137       OH_ArkUI_CustomDialog_SetAutoCancel(dialogOptions, true);
138       OH_ArkUI_CustomDialog_SetBorderWidth(dialogOptions, 2, 2, 2, 2, ARKUI_LENGTH_METRIC_UNIT_PX);
139       OH_ArkUI_CustomDialog_SetBorderStyle(dialogOptions, ARKUI_BORDER_STYLE_SOLID, ARKUI_BORDER_STYLE_SOLID,ARKUI_BORDER_STYLE_SOLID, ARKUI_BORDER_STYLE_SOLID);
140       OH_ArkUI_CustomDialog_OpenDialog(dialogOptions, openDialogCallBack);
141   }
142   ```
143
1443. 弹窗关闭方式。
145
146- 通过controller关闭弹窗。
147   ```
148   void CloseDialog() {
149       ArkUI_NativeDialogAPI_1 *dialogAPI = reinterpret_cast<ArkUI_NativeDialogAPI_1 *>(
150           OH_ArkUI_QueryModuleInterfaceByName(ARKUI_NATIVE_DIALOG, "ArkUI_NativeDialogAPI_1"));
151       dialogAPI->close(dialogController);
152   }
153   ```
154
155- 通过dialogOptions关闭弹窗。
156   ```
157   void CloseCustomDialog() {
158       OH_ArkUI_CustomDialog_CloseDialog(id);
159   }
160   ```
161
162## 弹窗的交互
163
164可创建交互页面，打开或关闭弹窗。
165
1661. 创建可交互界面，点击Button后弹窗。其中获取与使用ArkUI_NodeContentHandle类型节点可参考[接入ArkTS页面](ndk-access-the-arkts-page.md)。
167   ```
168   constexpr int32_t BUTTON_CLICK_ID = 1;
169   bool isShown = false;
170   ArkUI_NativeDialogHandle dialogController;
171   ArkUI_NodeHandle buttonNode;
172
173   void MainViewMethod(ArkUI_NodeContentHandle handle) {
174       ArkUI_NativeNodeAPI_1 *nodeAPI = reinterpret_cast<ArkUI_NativeNodeAPI_1 *>(
175           OH_ArkUI_QueryModuleInterfaceByName(ARKUI_NATIVE_NODE, "ArkUI_NativeNodeAPI_1"));
176       ArkUI_NodeHandle column = nodeAPI->createNode(ARKUI_NODE_COLUMN);
177       ArkUI_NumberValue widthValue[] = {{.f32 = 300}};
178       ArkUI_AttributeItem widthItem = {.value = widthValue, .size = sizeof(widthValue) / sizeof(ArkUI_NumberValue)};
179       nodeAPI->setAttribute(column, NODE_WIDTH, &widthItem);
180       ArkUI_NumberValue heightValue[] = {{.f32 = 300}};
181       ArkUI_AttributeItem heightItem = {.value = heightValue, .size = sizeof(heightValue) / sizeof(ArkUI_NumberValue)};
182       nodeAPI->setAttribute(column, NODE_HEIGHT, &heightItem);
183
184       buttonNode = nodeAPI->createNode(ARKUI_NODE_BUTTON);
185       ArkUI_NumberValue buttonWidthValue[] = {{.f32 = 200}};
186       ArkUI_AttributeItem buttonWidthItem = {.value = buttonWidthValue,
187                                              .size = sizeof(buttonWidthValue) / sizeof(ArkUI_NumberValue)};
188       nodeAPI->setAttribute(buttonNode, NODE_WIDTH, &buttonWidthItem);
189       ArkUI_NumberValue buttonHeightValue[] = {{.f32 = 50}};
190       ArkUI_AttributeItem buttonHeightItem = {.value = buttonHeightValue,
191                                               .size = sizeof(buttonHeightValue) / sizeof(ArkUI_NumberValue)};
192       nodeAPI->setAttribute(buttonNode, NODE_HEIGHT, &buttonHeightItem);
193       ArkUI_AttributeItem labelItem = {.string = "点击弹窗"};
194       nodeAPI->setAttribute(buttonNode, NODE_BUTTON_LABEL, &labelItem);
195       ArkUI_NumberValue buttonTypeValue[] = {{.i32 = static_cast<int32_t>(ARKUI_BUTTON_TYPE_NORMAL)}};
196       ArkUI_AttributeItem buttonTypeItem = {.value = buttonTypeValue,
197                                             .size = sizeof(buttonTypeValue) / sizeof(ArkUI_NumberValue)};
198       nodeAPI->setAttribute(buttonNode, NODE_BUTTON_TYPE, &buttonTypeItem);
199       nodeAPI->registerNodeEvent(buttonNode, NODE_ON_CLICK, BUTTON_CLICK_ID, nullptr);
200       nodeAPI->addNodeEventReceiver(buttonNode, OnButtonClicked);
201       nodeAPI->addChild(column, buttonNode);
202       OH_ArkUI_NodeContent_AddNode(handle, column);
203   }
204   ```
205
2062. 创建Button事件的回调函数，当Button点击时触发弹窗显示或关闭。
207
208- 触发controller弹窗。
209   ```
210   void OnButtonClicked(ArkUI_NodeEvent *event) {
211       if (!event || !buttonNode) {
212           return;
213       }
214       auto eventId = OH_ArkUI_NodeEvent_GetTargetId(event);
215       if (eventId == BUTTON_CLICK_ID) {
216           ArkUI_NativeNodeAPI_1 *nodeAPI = reinterpret_cast<ArkUI_NativeNodeAPI_1 *>(
217               OH_ArkUI_QueryModuleInterfaceByName(ARKUI_NATIVE_NODE, "ArkUI_NativeNodeAPI_1"));
218           if (isShown) {
219               isShown = false;
220               ArkUI_AttributeItem labelItem = {.string = "显示弹窗"};
221               nodeAPI->setAttribute(buttonNode, NODE_BUTTON_LABEL, &labelItem);
222               CloseDialog();
223           } else {
224               isShown = true;
225               ArkUI_AttributeItem labelItem = {.string = "关闭弹窗"};
226               nodeAPI->setAttribute(buttonNode, NODE_BUTTON_LABEL, &labelItem);
227               ShowDialog();
228           }
229       }
230   }
231   ```
232
233- 触发dialogOptions弹窗。
234   ```
235   constexpr int32_t id = 0;
236   void openDialogCallBack(int32_t dialogId) {
237       id = dialogId;
238   }
239   void OnButtonClicked(ArkUI_NodeEvent *event) {
240       if (!event || !buttonNode) {
241           return;
242       }
243       auto eventId = OH_ArkUI_NodeEvent_GetTargetId(event);
244       if (eventId == BUTTON_CLICK_ID) {
245           ArkUI_NativeNodeAPI_1 *nodeAPI = reinterpret_cast<ArkUI_NativeNodeAPI_1 *>(
246               OH_ArkUI_QueryModuleInterfaceByName(ARKUI_NATIVE_NODE, "ArkUI_NativeNodeAPI_1"));
247           if (isShown) {
248               isShown = false;
249               ArkUI_AttributeItem labelItem = {.string = "显示弹窗"};
250               nodeAPI->setAttribute(buttonNode, NODE_BUTTON_LABEL, &labelItem);
251               CloseCustomDialog();
252           } else {
253               isShown = true;
254               ArkUI_AttributeItem labelItem = {.string = "关闭弹窗"};
255               nodeAPI->setAttribute(buttonNode, NODE_BUTTON_LABEL, &labelItem);
256               OpenCustomDialog();
257           }
258       }
259   }
260   ```
261
262   ![zh-cn_image_0000001902966196](figures/zh-cn_image_0000001902966196.gif)
263
264
265## 弹窗的生命周期
266
267弹窗显示和关闭前后，存在四个生命周期：registerOnWillAppear、registerOnDidAppear、registerOnWillDisappear、registerOnDidDisappear。
268这些生命周期方法需要在调用show方法之前调用，生命周期的时序如下：
269registerOnWillAppear -> 弹窗显示动画开始 -> 弹窗显示动画结束 -> registerOnDidAppear -> 弹窗显示完成 ->
270registerOnWillDisappear -> 弹窗关闭动画开始 ->  弹窗关闭动画结束 -> registerOnDidDisappear -> 弹窗关闭完成。
271
272创建一个弹窗，弹窗显示和关闭时会触发生命周期的回调函数。其中 ArkUI_NodeContentHandle 类型节点的获取与使用可参考[接入ArkTS页面](ndk-access-the-arkts-page.md)。
273   ```
274    ArkUI_NodeHandle CreateDialogContent() {
275        ArkUI_NativeNodeAPI_1 *nodeAPI = reinterpret_cast<ArkUI_NativeNodeAPI_1 *>(
276            OH_ArkUI_QueryModuleInterfaceByName(ARKUI_NATIVE_NODE, "ArkUI_NativeNodeAPI_1"));
277        ArkUI_NodeHandle text = nodeAPI->createNode(ARKUI_NODE_TEXT);
278        ArkUI_NumberValue textWidthValue[] = {{.f32 = 300}};
279        ArkUI_AttributeItem textWidthItem = {.value = textWidthValue,
280                                             .size = sizeof(textWidthValue) / sizeof(ArkUI_NumberValue)};
281        nodeAPI->setAttribute(text, NODE_WIDTH, &textWidthItem);
282        ArkUI_NumberValue textHeightValue[] = {{.f32 = 300}};
283        ArkUI_AttributeItem textHeightItem = {.value = textHeightValue,
284                                              .size = sizeof(textWidthValue) / sizeof(ArkUI_NumberValue)};
285        nodeAPI->setAttribute(text, NODE_HEIGHT, &textHeightItem);
286        ArkUI_NodeHandle span = nodeAPI->createNode(ARKUI_NODE_SPAN);
287        ArkUI_AttributeItem spanItem = {.string = "这是一个弹窗"};
288        nodeAPI->setAttribute(span, NODE_SPAN_CONTENT, &spanItem);
289        ArkUI_NodeHandle imageSpan = nodeAPI->createNode(ARKUI_NODE_IMAGE_SPAN);
290        ArkUI_AttributeItem imageSpanItem = {.string = "/pages/common/sky.jpg"};
291        nodeAPI->setAttribute(imageSpan, NODE_IMAGE_SPAN_SRC, &imageSpanItem);
292        ArkUI_NumberValue imageSpanWidthValue[] = {{.f32 = 300}};
293        ArkUI_AttributeItem imageSpanWidthItem = {.value = imageSpanWidthValue,
294                                                  .size = sizeof(textWidthValue) / sizeof(ArkUI_NumberValue)};
295        nodeAPI->setAttribute(imageSpan, NODE_WIDTH, &imageSpanWidthItem);
296        ArkUI_NumberValue imageSpanHeightValue[] = {{.f32 = 200}};
297        ArkUI_AttributeItem imageSpanHeightItem = {.value = imageSpanHeightValue,
298                                                   .size = sizeof(textWidthValue) / sizeof(ArkUI_NumberValue)};
299        nodeAPI->setAttribute(imageSpan, NODE_HEIGHT, &imageSpanHeightItem);
300        nodeAPI->addChild(text, span);
301        nodeAPI->addChild(text, imageSpan);
302        return text;
303    }
304    void OnWillAppearCallBack(void* userdata) {
305        OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "CustomDialogContentTest", "OnWillAppearCallBack");
306    }
307    void OnDidAppearCallBack(void* userdata) {
308        OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "CustomDialogContentTest", "OnDidAppearCallBack");
309    }
310    void OnWillDisappearCallBack(void* userdata) {
311        OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "CustomDialogContentTest", "OnWillDisappearCallBack");
312    }
313    void OnDidDisappearCallBack(void* userdata) {
314        OH_LOG_Print(LOG_APP, LOG_INFO, LOG_PRINT_DOMAIN, "CustomDialogContentTest", "OnDidDisappearCallBack");
315    }
316    void ShowDialog() {
317        ArkUI_NativeDialogAPI_3 *dialogAPI = reinterpret_cast<ArkUI_NativeDialogAPI_3 *>(
318            OH_ArkUI_QueryModuleInterfaceByName(ARKUI_NATIVE_DIALOG, "ArkUI_NativeDialogAPI_3"));
319        auto customDialog = dialogAPI->nativeDialogAPI1.create();
320        auto contentNode = CreateDialogContent();
321        dialogAPI->nativeDialogAPI1.setContent(customDialog, contentNode);
322        dialogAPI->nativeDialogAPI1.setAutoCancel(customDialog, true);
323        dialogAPI->registerOnWillAppear(customDialog, nullptr, OnWillAppearCallBack);
324        dialogAPI->registerOnDidAppear(customDialog, nullptr, OnDidAppearCallBack);
325        dialogAPI->registerOnWillDisappear(customDialog, nullptr, OnWillDisappearCallBack);
326        dialogAPI->registerOnDidDisappear(customDialog, nullptr, OnDidDisappearCallBack);
327        dialogAPI->nativeDialogAPI1.show(customDialog, false);
328    }
329   ```
330