Dev.to

HarmonyOS NEXT Practical: Custom Confirmation Pop up

Objective: Encapsulate custom pop ups and directly open customized confirmation pop ups through method calls. Knowledge points: Due to various limitations in the use of the Customs Dialogue Controller, it does not support dynamic creation or refresh. In relatively complex application scenarios, it is recommended to use the openCustoms Dialog interface provided by the PromptAction object obtained from UIContext to implement custom pop ups. The openCustoms dialog can be configured with isModal to achieve modal and non modal pop ups. When isModal is true, the pop-up box is a modal pop-up window. When isModal is false, the pop-up box is a non modal pop-up window. Opening and closing custom pop ups: Create WidgetContent. WidgetContent is used to define the content of custom pop ups. Among them, wrapBuilder (buildText) encapsulates custom components, and new Params (this. message) is the input parameter for custom components, which can be defaulted or passed in as the basic data type. Open the custom pop-up box. The pop-up box opened by calling the openCustomizalDialog interface defaults to a pop-up box with customStyle set to true, which means that the content style of the pop-up box is displayed completely according to the contentNode custom style. Close the custom pop-up box. Due to the need to pass in the Component Content corresponding to the pop-up box to be closed for the closeCustoms Dialog interface. Therefore, if you need to set a closing method in the pop-up box, you can refer to the complete example to encapsulate the static method for implementation. If you need to release the corresponding WidgetContent after closing the pop-up box, you need to call the dispose method of WidgetContent. Actual combat: PromptActionClass import { BusinessError } from '@kit.BasicServicesKit'; import { ComponentContent, promptAction } from '@kit.ArkUI'; import { UIContext } from '@ohos.arkui.UIContext'; export class PromptActionClass { static ctx: UIContext; static contentNode: ComponentContent; static options: promptAction.BaseDialogOptions; static setContext(context: UIContext) { PromptActionClass.ctx = context; } static setContentNode(node: ComponentContent) { PromptActionClass.contentNode = node; } static setOptions(options: promptAction.BaseDialogOptions) { PromptActionClass.options = options; } static openDialog() { if (PromptActionClass.contentNode !== null) { PromptActionClass.ctx.getPromptAction().openCustomDialog(PromptActionClass.contentNode, PromptActionClass.options) .then(() => { console.info('OpenCustomDialog complete.') }) .catch((error: BusinessError) => { let message = (error as BusinessError).message; let code = (error as BusinessError).code; console.error(`OpenCustomDialog args error code is ${code}, message is ${message}`); }) } } static closeDialog() { if (PromptActionClass.contentNode !== null) { PromptActionClass.ctx.getPromptAction().closeCustomDialog(PromptActionClass.contentNode) .then(() => { console.info('CloseCustomDialog complete.') }) .catch((error: BusinessError) => { let message = (error as BusinessError).message; let code = (error as BusinessError).code; console.error(`CloseCustomDialog args error code is ${code}, message is ${message}`); }) } } static updateDialog(options: promptAction.BaseDialogOptions) { if (PromptActionClass.contentNode !== null) { PromptActionClass.ctx.getPromptAction().updateCustomDialog(PromptActionClass.contentNode, options) .then(() => { console.info('UpdateCustomDialog complete.') }) .catch((error: BusinessError) => { let message = (error as BusinessError).message; let code = (error as BusinessError).code; console.error(`UpdateCustomDialog args error code is ${code}, message is ${message}`); }) } } } CustomConfirmDialog import { PromptActionClass } from "./PromptActionClass"; import { ComponentContent } from "@kit.ArkUI"; export class CustomConfirmDialog{ static init(ctx: UIContext){ PromptActionClass.setContext(ctx); PromptActionClass.setContentNode(new ComponentContent(ctx, wrapBuilder(buildText), '请确认信息：例如删除、授权等敏感操作')); PromptActionClass.setOptions({ alignment: DialogAlignment.Top, offset: { dx: 0, dy: 50 } }); } static open(){ PromptActionClass.openDialog() } } @Builder function buildText(message: string) { Column({ space: 10 }) { Row() { Text('温馨提示').fontSize(14) } Text(message) .fontSize(24) Row({ space: 20 }) { Button('取消') .backgroundColor(Color.Gray) .onClick(() => { PromptActionClass.closeDialog() }) Button('确认') .onClick(() => { PromptActionClass.closeDialog() }) } .width('100%') .justif

Mar 28, 2025 - 08:10

HarmonyOS NEXT Practical: Custom Confirmation Pop up

Objective: Encapsulate custom pop ups and directly open customized confirmation pop ups through method calls.

Knowledge points:

Due to various limitations in the use of the Customs Dialogue Controller, it does not support dynamic creation or refresh. In relatively complex application scenarios, it is recommended to use the openCustoms Dialog interface provided by the PromptAction object obtained from UIContext to implement custom pop ups.
The openCustoms dialog can be configured with isModal to achieve modal and non modal pop ups. When isModal is true, the pop-up box is a modal pop-up window. When isModal is false, the pop-up box is a non modal pop-up window.

Opening and closing custom pop ups:

Create WidgetContent. WidgetContent is used to define the content of custom pop ups. Among them, wrapBuilder (buildText) encapsulates custom components, and new Params (this. message) is the input parameter for custom components, which can be defaulted or passed in as the basic data type.
Open the custom pop-up box. The pop-up box opened by calling the openCustomizalDialog interface defaults to a pop-up box with customStyle set to true, which means that the content style of the pop-up box is displayed completely according to the contentNode custom style.
Close the custom pop-up box. Due to the need to pass in the Component Content corresponding to the pop-up box to be closed for the closeCustoms Dialog interface. Therefore, if you need to set a closing method in the pop-up box, you can refer to the complete example to encapsulate the static method for implementation. If you need to release the corresponding WidgetContent after closing the pop-up box, you need to call the dispose method of WidgetContent.

Actual combat:
PromptActionClass

import { BusinessError } from '@kit.BasicServicesKit';
import { ComponentContent, promptAction } from '@kit.ArkUI';
import { UIContext } from '@ohos.arkui.UIContext';

export class PromptActionClass {
  static ctx: UIContext;
  static contentNode: ComponentContent