构建弹窗
====

可以通过创建弹窗控制器和创建自定义弹窗的内容对象两种方法显示自定义弹窗，设置其样式和内容。

[通过创建弹窗控制器显示自定义弹窗](#通过创建弹窗控制器显示自定义弹窗)：在命名为ArkUI\_NativeDialogAPI\_x （x表示版本）的结构体中，定义了弹窗接口集合，用于实现各种弹窗控制。从API version 12开始支持，使用方式可以参考[openCustomDialogWithController](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-apis-uicontext-promptaction#opencustomdialogwithcontroller18)接口。

[通过创建自定义弹窗的内容对象显示自定义弹窗](#通过创建自定义弹窗的内容对象显示自定义弹窗)：该方式下的弹窗接口在[native\_dialog.h](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/capi-native-dialog-h#函数)的函数中定义。从API version 19开始支持，使用方式可以参考[openCustomDialog](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/arkts-apis-uicontext-promptaction#opencustomdialog12)接口。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/98/v3/EB_uPNyATWu-FQ8mnmuRiQ/note_3.0-zh-cn.png?HW-CC-KV=V1&HW-CC-Date=20260709T132315Z&HW-CC-Expire=86400&HW-CC-Sign=2E91EF383FE2E079ED8AA614075490042191D4313BDCA3CE1C7D3B5E8D3F5090)

*   [OH\_ArkUI\_QueryModuleInterfaceByName](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/capi-native-interface-h#oh_arkui_querymoduleinterfacebyname)用于获取指定类型的Native模块接口集合，可以通过其返回ArkUI\_NativeDialogHandle类型的数据调用Native模块中的接口。

#### 创建和销毁自定义弹窗

#### \[h2\]通过创建弹窗控制器显示自定义弹窗

*   创建弹窗控制器：
    
    [ArkUI\_NativeDialogHandle](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/capi-arkui-nativemodule-arkui-nativedialog8h)表示指向弹窗控制器的指针，可以通过调用[ArkUI\_NativeDialogAPI\_x](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/capi-arkui-nativemodule-arkui-nativedialogapi-1)的[create](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/capi-arkui-nativemodule-arkui-nativedialogapi-1#create)接口创建一个弹窗控制器。
    
    该方法返回ArkUI\_NativeDialogHandle类型的数据。
    
    ArkUI\_NativeDialogHandle g\_dialogController = nullptr;
    // ···
        ArkUI\_NativeDialogAPI\_1 \*dialogAPI = reinterpret\_cast<ArkUI\_NativeDialogAPI\_1 \*>(
            OH\_ArkUI\_QueryModuleInterfaceByName(ARKUI\_NATIVE\_DIALOG, "ArkUI\_NativeDialogAPI\_1"));
        if (!g\_dialogController) {
            g\_dialogController = dialogAPI->create();
        }
    
*   当不再需要弹窗操作时，需要主动调用[dispose](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/capi-arkui-nativemodule-arkui-nativedialogapi-1#dispose)接口销毁弹窗控制器对象。
    
    ArkUI\_NativeDialogAPI\_1 \*dialogAPI = reinterpret\_cast<ArkUI\_NativeDialogAPI\_1 \*>(
        OH\_ArkUI\_QueryModuleInterfaceByName(ARKUI\_NATIVE\_DIALOG, "ArkUI\_NativeDialogAPI\_1"));
    dialogAPI->dispose(g\_dialogController);
    g\_dialogController = nullptr;
    

#### \[h2\]通过创建自定义弹窗的内容对象显示自定义弹窗

*   创建弹窗的内容对象：
    
    [ArkUI\_CustomDialogOptions](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/capi-arkui-nativemodule-arkui-customdialogoptions)自定义弹窗的内容对象，可以通过调用[OH\_ArkUI\_CustomDialog\_CreateOptions](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/capi-native-dialog-h#oh_arkui_customdialog_createoptions)接口创建一个自定义弹窗的内容对象。
    
    该方法返回ArkUI\_CustomDialogOptions类型的指针。
    
    ArkUI\_CustomDialogOptions\* g\_dialogOptions = nullptr;
    // ···
        auto textNode = std::make\_shared<NativeModule::ArkUITextNode>();
        if (!g\_dialogOptions) {
            g\_dialogOptions = OH\_ArkUI\_CustomDialog\_CreateOptions(textNode->GetHandle());
        }
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/bf/v3/9S8-YuiNSxSLqt5RVbyirg/note_3.0-zh-cn.png?HW-CC-KV=V1&HW-CC-Date=20260709T132315Z&HW-CC-Expire=86400&HW-CC-Sign=B581DD80B292DD63CEC87855ECE9695C994E0DDDD9B98C876E2326D672659F2B)
    
    ArkUITextNode的声明方式可以查看[ArkUINode.h](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ndk-access-the-arkts-page#示例)文件中的实现文本组件。
    
*   当不再需要弹窗操作时，需要主动调用[OH\_ArkUI\_CustomDialog\_DisposeOptions](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/capi-native-dialog-h#oh_arkui_customdialog_disposeoptions)接口销毁弹窗控制器对象。
    
    OH\_ArkUI\_CustomDialog\_DisposeOptions(g\_dialogOptions);
    

#### 设置弹窗样式

可以设置弹窗对齐方式、偏移量，弹窗背板圆角弧度、背景色、蒙层颜色以及区域等。

1.  创建弹窗内容节点。
    
    ![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/69/v3/mVq4z9dOQnW9gBFC-oP9fw/note_3.0-zh-cn.png?HW-CC-KV=V1&HW-CC-Date=20260709T132315Z&HW-CC-Expire=86400&HW-CC-Sign=3626A88349E3DAE2F03BBA089D4DCE9E0E2D85120A2ABFA497D32FF7665DD420)
    
    此示例的资源不在src > main > resource目录下，从DevEco Studio 6.0.0 Beta2开始，新建工程或者模块时，默认创建的模块不会对非resources目录下的资源进行打包，需使能相关开关：模块的build-profile.json5中buildOptions > resOptions > copyCodeResource > enable设置为true，详见[resOptions](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ide-hvigor-build-profile#table1476161719356)中相关介绍。
    
    ArkUI\_NodeHandle CreateDialogContent()
    {
        ArkUI\_NativeNodeAPI\_1 \*nodeAPI = reinterpret\_cast<ArkUI\_NativeNodeAPI\_1 \*>(
            OH\_ArkUI\_QueryModuleInterfaceByName(ARKUI\_NATIVE\_NODE, "ArkUI\_NativeNodeAPI\_1"));
        ArkUI\_NodeHandle text = nodeAPI->createNode(ARKUI\_NODE\_TEXT);
        ArkUI\_NumberValue textWidthValue\[\] = {{.f32 = 300}};
        ArkUI\_AttributeItem textWidthItem = {.value = textWidthValue,
                                             .size = sizeof(textWidthValue) / sizeof(ArkUI\_NumberValue)};
        nodeAPI->setAttribute(text, NODE\_WIDTH, &textWidthItem);
        ArkUI\_NumberValue textHeightValue\[\] = {{.f32 = 300}};
        ArkUI\_AttributeItem textHeightItem = {.value = textHeightValue,
                                              .size = sizeof(textWidthValue) / sizeof(ArkUI\_NumberValue)};
        nodeAPI->setAttribute(text, NODE\_HEIGHT, &textHeightItem);
        ArkUI\_NodeHandle span = nodeAPI->createNode(ARKUI\_NODE\_SPAN);
        ArkUI\_AttributeItem spanItem = {.string = "This is a dialog box"};
        nodeAPI->setAttribute(span, NODE\_SPAN\_CONTENT, &spanItem);
        ArkUI\_NodeHandle imageSpan = nodeAPI->createNode(ARKUI\_NODE\_IMAGE\_SPAN);
        // 图片src/main/ets/pages/common/sky.jpg需要替换为开发者所需的资源文件
        ArkUI\_AttributeItem imageSpanItem = {.string = "/pages/common/sky.jpg"};
        nodeAPI->setAttribute(imageSpan, NODE\_IMAGE\_SPAN\_SRC, &imageSpanItem);
        ArkUI\_NumberValue imageSpanWidthValue\[\] = {{.f32 = 300}};
        ArkUI\_AttributeItem imageSpanWidthItem = {.value = imageSpanWidthValue,
                                                  .size = sizeof(textWidthValue) / sizeof(ArkUI\_NumberValue)};
        nodeAPI->setAttribute(imageSpan, NODE\_WIDTH, &imageSpanWidthItem);
        ArkUI\_NumberValue imageSpanHeightValue\[\] = {{.f32 = 200}};
        ArkUI\_AttributeItem imageSpanHeightItem = {.value = imageSpanHeightValue,
                                                   .size = sizeof(textWidthValue) / sizeof(ArkUI\_NumberValue)};
        nodeAPI->setAttribute(imageSpan, NODE\_HEIGHT, &imageSpanHeightItem);
        nodeAPI->addChild(text, span);
        nodeAPI->addChild(text, imageSpan);
        return text;
    }
    
2.  以下介绍两种控制弹窗样式的方式，弹窗接口请参考[native\_dialog.h](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/capi-native-dialog-h)。
    
    *   通过controller控制弹窗样式。
        
        void ShowDialog()
        {
            ArkUI\_NativeDialogAPI\_1 \*dialogAPI = reinterpret\_cast<ArkUI\_NativeDialogAPI\_1 \*>(
                OH\_ArkUI\_QueryModuleInterfaceByName(ARKUI\_NATIVE\_DIALOG, "ArkUI\_NativeDialogAPI\_1"));
            if (!g\_dialogController) {
                g\_dialogController = dialogAPI->create();
            }
            auto contentNode = CreateDialogContent();
            dialogAPI->setContent(g\_dialogController, contentNode);
            dialogAPI->setContentAlignment(g\_dialogController, static\_cast<int32\_t>(ARKUI\_ALIGNMENT\_BOTTOM), 0, 0);
            dialogAPI->setBackgroundColor(g\_dialogController, 0xffffffff);
            dialogAPI->setCornerRadius(g\_dialogController, 6.0f, 6.0f, 6.0f, 6.0f);
            dialogAPI->setModalMode(g\_dialogController, false);
            dialogAPI->setAutoCancel(g\_dialogController, true);
            dialogAPI->show(g\_dialogController, false);
        }
        
    *   通过dialogOptions控制弹窗样式。
        
        int32\_t g\_id = 0;
        void OpenDialogCallBack(int32\_t dialogId)
        {
            g\_id = dialogId;
        }
        
        void OpenCustomDialog()
        {
            auto contentNode = CreateDialogContent();
            if (!g\_dialogOptions) {
                g\_dialogOptions = OH\_ArkUI\_CustomDialog\_CreateOptions(contentNode);
            }
            OH\_ArkUI\_CustomDialog\_SetAlignment(g\_dialogOptions, static\_cast<int32\_t>(ARKUI\_ALIGNMENT\_BOTTOM), 0, 0);
            OH\_ArkUI\_CustomDialog\_SetBackgroundColor(g\_dialogOptions, 0xffffffff);
            OH\_ArkUI\_CustomDialog\_SetCornerRadius(g\_dialogOptions, 6.0f, 6.0f, 6.0f, 6.0f);
            OH\_ArkUI\_CustomDialog\_SetModalMode(g\_dialogOptions, false);
            OH\_ArkUI\_CustomDialog\_SetAutoCancel(g\_dialogOptions, true);
            OH\_ArkUI\_CustomDialog\_SetBorderStyle(g\_dialogOptions, ARKUI\_BORDER\_STYLE\_SOLID,
                                                 ARKUI\_BORDER\_STYLE\_SOLID, ARKUI\_BORDER\_STYLE\_SOLID, ARKUI\_BORDER\_STYLE\_SOLID);
            OH\_ArkUI\_CustomDialog\_OpenDialog(g\_dialogOptions, OpenDialogCallBack);
        }
        
3.  弹窗关闭方式。
    
    *   通过controller关闭弹窗。
        
        void CloseDialog()
        {
            ArkUI\_NativeDialogAPI\_1 \*dialogAPI = reinterpret\_cast<ArkUI\_NativeDialogAPI\_1 \*>(
                OH\_ArkUI\_QueryModuleInterfaceByName(ARKUI\_NATIVE\_DIALOG, "ArkUI\_NativeDialogAPI\_1"));
            dialogAPI->close(g\_dialogController);
        }
        
    *   通过dialogOptions关闭弹窗。
        
        void CloseCustomDialog()
        {
            OH\_ArkUI\_CustomDialog\_CloseDialog(g\_id);
        }
        

#### 弹窗的交互

可创建交互页面，打开或关闭弹窗。

1.  创建可交互界面，点击Button后弹窗。其中获取与使用ArkUI\_NodeContentHandle类型节点可参考[接入ArkTS页面](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ndk-access-the-arkts-page)。
    
    constexpr int32\_t BUTTON\_CLICK\_ID = 1;
    ArkUI\_NodeHandle g\_buttonNode = nullptr;
    
    void MainViewMethod(ArkUI\_NodeContentHandle handle)
    {
        ArkUI\_NativeNodeAPI\_1 \*nodeAPI = reinterpret\_cast<ArkUI\_NativeNodeAPI\_1 \*>(
            OH\_ArkUI\_QueryModuleInterfaceByName(ARKUI\_NATIVE\_NODE, "ArkUI\_NativeNodeAPI\_1"));
        ArkUI\_NodeHandle column = nodeAPI->createNode(ARKUI\_NODE\_COLUMN);
        ArkUI\_NumberValue widthValue\[\] = {{.f32 = 300}};
        ArkUI\_AttributeItem widthItem = {.value = widthValue, .size = sizeof(widthValue) / sizeof(ArkUI\_NumberValue)};
        nodeAPI->setAttribute(column, NODE\_WIDTH, &widthItem);
        ArkUI\_NumberValue heightValue\[\] = {{.f32 = 300}};
        ArkUI\_AttributeItem heightItem = {.value = heightValue, .size = sizeof(heightValue) / sizeof(ArkUI\_NumberValue)};
        nodeAPI->setAttribute(column, NODE\_HEIGHT, &heightItem);
        
        g\_buttonNode = nodeAPI->createNode(ARKUI\_NODE\_BUTTON);
        ArkUI\_NumberValue buttonWidthValue\[\] = {{.f32 = 200}};
        ArkUI\_AttributeItem buttonWidthItem = {.value = buttonWidthValue,
                                               .size = sizeof(buttonWidthValue) / sizeof(ArkUI\_NumberValue)};
        nodeAPI->setAttribute(g\_buttonNode, NODE\_WIDTH, &buttonWidthItem);
        ArkUI\_NumberValue buttonHeightValue\[\] = {{.f32 = 50}};
        ArkUI\_AttributeItem buttonHeightItem = {.value = buttonHeightValue,
                                                .size = sizeof(buttonHeightValue) / sizeof(ArkUI\_NumberValue)};
        nodeAPI->setAttribute(g\_buttonNode, NODE\_HEIGHT, &buttonHeightItem);
        ArkUI\_AttributeItem labelItem = {.string = "Click Dialog Box"};
        nodeAPI->setAttribute(g\_buttonNode, NODE\_BUTTON\_LABEL, &labelItem);
        ArkUI\_NumberValue buttonTypeValue\[\] = {{.i32 = static\_cast<int32\_t>(ARKUI\_BUTTON\_TYPE\_NORMAL)}};
        ArkUI\_AttributeItem buttonTypeItem = {.value = buttonTypeValue,
                                              .size = sizeof(buttonTypeValue) / sizeof(ArkUI\_NumberValue)};
        nodeAPI->setAttribute(g\_buttonNode, NODE\_BUTTON\_TYPE, &buttonTypeItem);
        nodeAPI->registerNodeEvent(g\_buttonNode, NODE\_ON\_CLICK, BUTTON\_CLICK\_ID, nullptr);
        nodeAPI->addNodeEventReceiver(g\_buttonNode, OnButtonClicked);
        nodeAPI->addChild(column, g\_buttonNode);
        OH\_ArkUI\_NodeContent\_AddNode(handle, column);
    }
    
2.  创建Button事件的回调函数，当Button被点击时触发弹窗显示或关闭。
    
    *   触发controller弹窗。
        
        bool g\_isShown = false;
        
        void OnButtonClicked(ArkUI\_NodeEvent \*event)
        {
            if (!event || !g\_buttonNode) {
                return;
            }
            auto eventId = OH\_ArkUI\_NodeEvent\_GetTargetId(event);
            if (eventId == BUTTON\_CLICK\_ID) {
                ArkUI\_NativeNodeAPI\_1 \*nodeAPI = reinterpret\_cast<ArkUI\_NativeNodeAPI\_1 \*>(
                    OH\_ArkUI\_QueryModuleInterfaceByName(ARKUI\_NATIVE\_NODE, "ArkUI\_NativeNodeAPI\_1"));
                if (g\_isShown) {
                    g\_isShown = false;
                    ArkUI\_AttributeItem labelItem = {.string = "Show Dialog Box"};
                    nodeAPI->setAttribute(g\_buttonNode, NODE\_BUTTON\_LABEL, &labelItem);
                    CloseDialog();
                } else {
                    g\_isShown = true;
                    ArkUI\_AttributeItem labelItem = {.string = "Close Dialog Box"};
                    nodeAPI->setAttribute(g\_buttonNode, NODE\_BUTTON\_LABEL, &labelItem);
                    ShowDialog();
                }
            }
        }
        
    *   触发dialogOptions弹窗。
        
        void OnButtonClicked(ArkUI\_NodeEvent \*event)
        {
            if (!event || !g\_buttonNode) {
                return;
            }
            auto eventId = OH\_ArkUI\_NodeEvent\_GetTargetId(event);
            if (eventId == BUTTON\_CLICK\_ID) {
                ArkUI\_NativeNodeAPI\_1 \*nodeAPI = reinterpret\_cast<ArkUI\_NativeNodeAPI\_1 \*>(
                    OH\_ArkUI\_QueryModuleInterfaceByName(ARKUI\_NATIVE\_NODE, "ArkUI\_NativeNodeAPI\_1"));
                if (g\_isShown) {
                    g\_isShown = false;
                    ArkUI\_AttributeItem labelItem = {.string = "Show Dialog Box"};
                    nodeAPI->setAttribute(g\_buttonNode, NODE\_BUTTON\_LABEL, &labelItem);
                    CloseCustomDialog();
                } else {
                    g\_isShown = true;
                    ArkUI\_AttributeItem labelItem = {.string = "Close Dialog Box"};
                    nodeAPI->setAttribute(g\_buttonNode, NODE\_BUTTON\_LABEL, &labelItem);
                    OpenCustomDialog();
                }
            }
        }
        

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/e7/v3/ZsvXDfmVQySgMkHKBjfAPQ/zh-cn_image_0000002664327903.gif?HW-CC-KV=V1&HW-CC-Date=20260709T132315Z&HW-CC-Expire=86400&HW-CC-Sign=1B143902451203564083AFD995BF480F80F82301414F169FD9B85FD2AD9B29C5)

#### 弹窗的生命周期

从API version 19开始，弹窗显示和关闭前后，存在四个生命周期：[registerOnWillAppear](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/capi-arkui-nativemodule-arkui-nativedialogapi-3#registeronwillappear)、[registerOnDidAppear](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/capi-arkui-nativemodule-arkui-nativedialogapi-3#registerondidappear)、[registerOnWillDisappear](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/capi-arkui-nativemodule-arkui-nativedialogapi-3#registeronwilldisappear)、[registerOnDidDisappear](https://developer.huawei.com/consumer/cn/doc/harmonyos-references/capi-arkui-nativemodule-arkui-nativedialogapi-3#registerondiddisappear)。

这些生命周期方法需要在调用show方法之前调用，生命周期的时序如下：

registerOnWillAppear -> 弹窗显示动画开始 -> 弹窗显示动画结束 -> registerOnDidAppear -> 弹窗显示完成 ->registerOnWillDisappear -> 弹窗关闭动画开始 -> 弹窗关闭动画结束 -> registerOnDidDisappear -> 弹窗关闭完成。

创建一个弹窗，弹窗显示和关闭时会触发生命周期的回调函数。其中 ArkUI\_NodeContentHandle 类型节点的获取与使用可参考[接入ArkTS页面](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ndk-access-the-arkts-page)。

![](https://contentcenter-vali-drcn.dbankcdn.cn/pvt_2/DeveloperAlliance_scene_100_1/f4/v3/WVccNmZ4S6CZ4hnpOfLfVQ/note_3.0-zh-cn.png?HW-CC-KV=V1&HW-CC-Date=20260709T132315Z&HW-CC-Expire=86400&HW-CC-Sign=962698A129854904810E47A74F138531AF8059F761716DE312393B6222E7F507)

此示例的资源不在src > main > resource目录下，从DevEco Studio 6.0.0 Beta2开始，新建工程或者模块时，默认创建的模块不会对非resources目录下的资源进行打包，需使能相关开关：模块的build-profile.json5中buildOptions > resOptions > copyCodeResource > enable设置为true，详见[resOptions](https://developer.huawei.com/consumer/cn/doc/harmonyos-guides/ide-hvigor-build-profile#table1476161719356)中相关介绍。

ArkUI\_NodeHandle CreateDialogContent()
{
    ArkUI\_NativeNodeAPI\_1 \*nodeAPI = reinterpret\_cast<ArkUI\_NativeNodeAPI\_1 \*>(
        OH\_ArkUI\_QueryModuleInterfaceByName(ARKUI\_NATIVE\_NODE, "ArkUI\_NativeNodeAPI\_1"));
    ArkUI\_NodeHandle text = nodeAPI->createNode(ARKUI\_NODE\_TEXT);
    ArkUI\_NumberValue textWidthValue\[\] = {{.f32 = 300}};
    ArkUI\_AttributeItem textWidthItem = {.value = textWidthValue,
                                         .size = sizeof(textWidthValue) / sizeof(ArkUI\_NumberValue)};
    nodeAPI->setAttribute(text, NODE\_WIDTH, &textWidthItem);
    ArkUI\_NumberValue textHeightValue\[\] = {{.f32 = 300}};
    ArkUI\_AttributeItem textHeightItem = {.value = textHeightValue,
                                          .size = sizeof(textWidthValue) / sizeof(ArkUI\_NumberValue)};
    nodeAPI->setAttribute(text, NODE\_HEIGHT, &textHeightItem);
    ArkUI\_NodeHandle span = nodeAPI->createNode(ARKUI\_NODE\_SPAN);
    ArkUI\_AttributeItem spanItem = {.string = "This is a dialog box"};
    nodeAPI->setAttribute(span, NODE\_SPAN\_CONTENT, &spanItem);
    ArkUI\_NodeHandle imageSpan = nodeAPI->createNode(ARKUI\_NODE\_IMAGE\_SPAN);
    // 图片src/main/ets/pages/common/sky.jpg需要替换为开发者所需的资源文件
    ArkUI\_AttributeItem imageSpanItem = {.string = "/pages/common/sky.jpg"};
    nodeAPI->setAttribute(imageSpan, NODE\_IMAGE\_SPAN\_SRC, &imageSpanItem);
    ArkUI\_NumberValue imageSpanWidthValue\[\] = {{.f32 = 300}};
    ArkUI\_AttributeItem imageSpanWidthItem = {.value = imageSpanWidthValue,
                                              .size = sizeof(textWidthValue) / sizeof(ArkUI\_NumberValue)};
    nodeAPI->setAttribute(imageSpan, NODE\_WIDTH, &imageSpanWidthItem);
    ArkUI\_NumberValue imageSpanHeightValue\[\] = {{.f32 = 200}};
    ArkUI\_AttributeItem imageSpanHeightItem = {.value = imageSpanHeightValue,
                                               .size = sizeof(textWidthValue) / sizeof(ArkUI\_NumberValue)};
    nodeAPI->setAttribute(imageSpan, NODE\_HEIGHT, &imageSpanHeightItem);
    nodeAPI->addChild(text, span);
    nodeAPI->addChild(text, imageSpan);
    return text;
}

void OnWillAppearCallBack(void\* userdata)
{
    OH\_LOG\_Print(LOG\_APP, LOG\_INFO, LOG\_PRINT\_DOMAIN, "CustomDialogContentTest", "OnWillAppearCallBack");
}

void OnDidAppearCallBack(void\* userdata)
{
    OH\_LOG\_Print(LOG\_APP, LOG\_INFO, LOG\_PRINT\_DOMAIN, "CustomDialogContentTest", "OnDidAppearCallBack");
}

void OnWillDisappearCallBack(void\* userdata)
{
    OH\_LOG\_Print(LOG\_APP, LOG\_INFO, LOG\_PRINT\_DOMAIN, "CustomDialogContentTest", "OnWillDisappearCallBack");
}

void OnDidDisappearCallBack(void\* userdata)
{
    OH\_LOG\_Print(LOG\_APP, LOG\_INFO, LOG\_PRINT\_DOMAIN, "CustomDialogContentTest", "OnDidDisappearCallBack");
}

void ShowDialog()
{
    ArkUI\_NativeDialogAPI\_3 \*dialogAPI = reinterpret\_cast<ArkUI\_NativeDialogAPI\_3 \*>(
        OH\_ArkUI\_QueryModuleInterfaceByName(ARKUI\_NATIVE\_DIALOG, "ArkUI\_NativeDialogAPI\_3"));
    if (!g\_dialogController) {
        g\_dialogController = dialogAPI->nativeDialogAPI1.create();
    }
    auto contentNode = CreateDialogContent();
    dialogAPI->nativeDialogAPI1.setContent(g\_dialogController, contentNode);
    dialogAPI->nativeDialogAPI1.setAutoCancel(g\_dialogController, true);
    dialogAPI->registerOnWillAppear(g\_dialogController, nullptr, OnWillAppearCallBack);
    dialogAPI->registerOnDidAppear(g\_dialogController, nullptr, OnDidAppearCallBack);
    dialogAPI->registerOnWillDisappear(g\_dialogController, nullptr, OnWillDisappearCallBack);
    dialogAPI->registerOnDidDisappear(g\_dialogController, nullptr, OnDidDisappearCallBack);
    dialogAPI->nativeDialogAPI1.show(g\_dialogController, false);
}