Building a Dialog Box

Display a custom dialog box using a dialog controller, which allows you to set the style and content of the dialog box.

The dialog box APIs are defined within a struct named ArkUINativeDialogAPI*x*, where x represents the version number. These APIs implement various dialog box controls around the dialog controller.

Creating and Destroying a Dialog Controller

• Create a dialog controller. ArkUI_NativeDialogHandle represents a pointer to the dialog controller, which you can create by calling the create API of ArkUI_NativeDialogAPI_x.

This API returns data of the ArkUI_NativeDialogHandle type.

  ArkUI_NativeDialogAPI_1 *dialogAPI = reinterpret_cast<ArkUI_NativeDialogAPI_1 *>(
      OH_ArkUI_QueryModuleInterfaceByName(ARKUI_NATIVE_DIALOG, "ArkUI_NativeDialogAPI_1"));
  auto dialogController = dialogAPI->create();

• Destroy a dialog controller. When dialog box operations are no longer needed, actively call the dispose API to destroy the dialog controller object. ArkUI_NativeDialogAPI_1 *dialogAPI = reinterpret_cast<ArkUI_NativeDialogAPI_1 *>( OH_ArkUI_QueryModuleInterfaceByName(ARKUI_NATIVE_DIALOG, "ArkUI_NativeDialogAPI_1")); dialogAPI->dispose(dialogController);

Setting Dialog Box Styles

You can set the alignment, offset, corner radius of the background, background color, mask color, and region of the dialog box.

1. Create a dialog box content node.

   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);
      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. Control dialog box styles with the controller. For details about the available dialog box APIs, see native_dialog.h.

   void ShowDialog() {
      ArkUI_NativeDialogAPI_1 *dialogAPI = reinterpret_cast<ArkUI_NativeDialogAPI_1 *>(
          OH_ArkUI_QueryModuleInterfaceByName(ARKUI_NATIVE_DIALOG, "ArkUI_NativeDialogAPI_1"));
      if (!dialogController) {
          dialogController = dialogAPI->create();
      }
      auto contentNode = CreateDialogContent();
      dialogAPI->setContent(dialogController, contentNode);
      dialogAPI->setContentAlignment(dialogController, static_cast<int32_t>(ARKUI_ALIGNMENT_BOTTOM), 0, 0);
      dialogAPI->setBackgroundColor(dialogController, 0xffffffff);
      dialogAPI->setCornerRadius(dialogController, 6, 6, 6, 6);
      dialogAPI->setModalMode(dialogController, false);
      dialogAPI->setAutoCancel(dialogController, true);
      dialogAPI->show(dialogController, false);
   }
   

3. Close the dialog box when it is not needed.

   void CloseDialog() {
      ArkUI_NativeDialogAPI_1 *dialogAPI = reinterpret_cast<ArkUI_NativeDialogAPI_1 *>(
          OH_ArkUI_QueryModuleInterfaceByName(ARKUI_NATIVE_DIALOG, "ArkUI_NativeDialogAPI_1"));
      dialogAPI->close(dialogController);
   }
   

Interaction with the Dialog Box

Create an interactive page to open or close a dialog box.

1. Create an interactive page, where a button click triggers the dialog box. For details about how to obtain and use the ArkUI_NodeContentHandle node, see Integrating with ArkTS Pages. “` constexpr int32_t BUTTON_CLICK_ID = 1; bool isShown = false; ArkUI_NativeDialogHandle dialogController; ArkUI_NodeHandle buttonNode;

void MainViewMethod(ArkUI_NodeContentHandle handle) { ArkUI_NativeNodeAPI_1 *nodeAPI = reinterpret_cast( 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 = "Click Dialog Box"};
   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_ArkUI_NodeContent_AddNode(handle, column);

}

2. Create a button event callback function to trigger the display or closure of the dialog box when the button is clicked.

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( OH_ArkUI_QueryModuleInterfaceByName(ARKUI_NATIVE_NODE, “ArkUI_NativeNodeAPI_1”)); if (isShown) { isShown = false; ArkUI_AttributeItem labelItem = {.string = “Show Dialog Box”}; nodeAPI->setAttribute(buttonNode, NODE_BUTTON_LABEL, &labelItem); CloseDialog(); } else { isShown = true; ArkUI_AttributeItem labelItem = {.string = “Close Dialog Box”}; nodeAPI->setAttribute(buttonNode, NODE_BUTTON_LABEL, &labelItem); ShowDialog(); } } } “`

你可能感兴趣的鸿蒙文章

harmony 鸿蒙ArkUI

harmony 鸿蒙Atomic Service Full Screen Launch Component (FullScreenLaunchComponent)

harmony 鸿蒙Arc Button (ArcButton)

harmony 鸿蒙Animation Smoothing

harmony 鸿蒙Animation Overview

harmony 鸿蒙Frame Animation (ohos.animator)

harmony 鸿蒙Implementing Property Animation

harmony 鸿蒙Property Animation Overview

harmony 鸿蒙Dialog Box Overview

harmony 鸿蒙Blur Effect