#鸿蒙通关秘籍#如何实现弹窗的交互功能？

可以创建一个交互页面，例如一个按钮用来控制弹窗的显示或隐藏。以下是具体步骤：

1. 创建交互界面

   在界面中添加一个按钮节点，设置按钮的宽高及标签，并注册按钮点击的事件：

constexpr int32_t BUTTON_CLICK_ID = 1;
bool isShown = false;
ArkUI_NativeDialogHandle dialogController;
ArkUI_NodeHandle buttonNode;

void MainViewMethod(OH_NativeXComponent *component) {
    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);
    
    buttonNode = nodeAPI->createNode(ARKUI_NODE_BUTTON);
    ArkUI_NumberValue buttonWidthValue[] = {{.f32 = 200}};
    ArkUI_AttributeItem buttonWidthItem = {.value = buttonWidthValue,
                                           .size = sizeof(buttonWidthValue) / sizeof(ArkUI_NumberValue)};
    nodeAPI->setAttribute(buttonNode, NODE_WIDTH, &buttonWidthItem);
    ArkUI_NumberValue buttonHeightValue[] = {{.f32 = 50}};
    ArkUI_AttributeItem buttonHeightItem = {.value = buttonHeightValue,
                                            .size = sizeof(buttonHeightValue) / sizeof(ArkUI_NumberValue)};
    nodeAPI->setAttribute(buttonNode, NODE_HEIGHT, &buttonHeightItem);
    ArkUI_AttributeItem labelItem = {.string = "点击弹窗"};
    nodeAPI->setAttribute(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(buttonNode, NODE_BUTTON_TYPE, &buttonTypeItem);
    nodeAPI->registerNodeEvent(buttonNode, NODE_ON_CLICK, BUTTON_CLICK_ID, nullptr);
    nodeAPI->addNodeEventReceiver(buttonNode, OnButtonClicked);
    nodeAPI->addChild(column, buttonNode);
    OH_NativeXComponent_AttachNativeRootNode(component, column);
}

2. 实现按钮点击回调

   创建回调函数来处理按钮的点击事件，点击后根据当前弹窗状态决定显示或关闭弹窗：

void OnButtonClicked(ArkUI_NodeEvent *event) {
    if (!event || !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 (isShown) {
            isShown = false;
            ArkUI_AttributeItem labelItem = {.string = "显示弹窗"};
            nodeAPI->setAttribute(buttonNode, NODE_BUTTON_LABEL, &labelItem);
            CloseDialog();
        } else {
            isShown = true;
            ArkUI_AttributeItem labelItem = {.string = "关闭弹窗"};
            nodeAPI->setAttribute(buttonNode, NODE_BUTTON_LABEL, &labelItem);
            ShowDialog();
        }
    }
}

以上步骤实现了基本的弹窗交互，通过按钮来控制弹窗的显示与隐藏状态。