CustomDialog Dynamically Sets Width and Height

#harmonyos #customdialogwidth #heightdynamic #arkts

Read the original article：CustomDialog Dynamically Sets Width and Height

CustomDialog Dynamically Sets Width And Height

Problem Description

The CustomDialog is displayed through the CustomDialogController class, and the dialog is configured with parameters via the CustomDialogControllerOptions during initialization. All parameters of the custom dialog do not support dynamic refreshing. For example, the CustomDialogControllerOptions can set parameters such as the width and height of the dialog, but these settings cannot be changed once set.

Background Knowledge

ComponentContent encapsulates the entity of component content, and its objects can be created and passed in non-UI components, facilitating developers to decouple and encapsulate dialog-type components.

update: Used to update the builder function parameters encapsulated by the WrappedBuilder object, maintaining consistency with the parameter types passed in the constructor.

PromptAction creates and displays text prompt boxes, dialog boxes, and action menus, which are associated with the current UI context.

updateCustomDialog: Updates the style of the custom dialog corresponding to the already popped dialogContent, using a Promise for asynchronous callbacks.

Solution

Solution 1: One CustomDialogController class corresponds to one CustomDialog pop-up window. Since the internal parameters of CustomDialogController do not support dynamic refresh, you can create a new CustomDialogController class to dynamically modify the pop-up window style.

@CustomDialog
struct CustomDialogExample {
  controller?: CustomDialogController

  build() {
    Column() {
      Text('This is a custom pop-up window.')
        .fontSize(30)
        .height(100)
      Button('Click me to close the pop-up window.')
        .onClick(() => {
          if (this.controller != undefined) {
            this.controller.close()
          }
        }).margin(20)
    }
  }
}

@Entry
@Component
struct CustomDialogUser {
  dialogController: CustomDialogController | null = null

  aboutToAppear(): void {
    this.createDialogCtl(300) // Create a CustomDialogController object with a width of 300.
  }

  aboutToDisappear() {
    this.dialogController = null // Set dialogController to null.
  }

  // Create new pop-ups with varying widths
  createDialogCtl(width: number): void {
    this.dialogController = new CustomDialogController({
      builder: CustomDialogExample(),
      autoCancel: true,
      alignment: DialogAlignment.Center,
      offset: { dx: 0, dy: -20 },
      customStyle: false,
      cornerRadius: 20,
      width: width,
      height: 200,
      borderWidth: 1,
      borderStyle: BorderStyle.Dashed,
      borderColor: Color.Blue,
      backgroundColor: Color.White,
    })
  }

  build() {
    Column({ space: 20 }) {
      Button('click me')
        .onClick(() => {
          if (this.dialogController != null) {
            this.dialogController.open()
          }
        }).backgroundColor(0x317aff)
      Button('change')
        .onClick(() => {
          this.createDialogCtl(100) // Create a new CustomDialogController object with a width of 100.
        }).backgroundColor(0x317aff)
    }.width('100%').margin({ top: 5 })
  }
}

Usage restrictions: A new pop-up window is actually created, so after modifying the style, you need to close the pop-up window and reopen it to be effective.

Scope of Style Modification: All parameters supported by the CustomDialogControllerOptions object can be modified, such as width, maskColor, offset, etc.

The effect is as follows: After clicking the change button, a new pop-up window is created and the width of the original pop-up window is changed:

Solution 2: Use ComponentContent to encapsulate the pop-up window UI, use PromptAction to control the visibility of the pop-up window, and use the update method of ComponentContent to update the pop-up window to achieve the effect of dynamically modifying the pop-up window style.

import { ComponentContent } from "@kit.ArkUI";

interface ParamsInterface {
  text: string;
  backColor: string;
}

@Builder
function buildText(params: ParamsInterface) {
  Column() {
    Text(params.text)
      .fontSize(50)
      .fontWeight(FontWeight.Bold)
      .margin({ bottom: 36 })
  }.backgroundColor(params.backColor)
}

@Entry
@Component
struct ComponentContentDemo {
  build() {
    Column() {
      Button("click me")
        .onClick(() => {
          let uiContext = this.getUIContext();
          let promptAction = uiContext.getPromptAction();
          let contentNode =
            new ComponentContent<ParamsInterface>(uiContext, wrapBuilder<[ParamsInterface]>(buildText),
              { text: 'old style', backColor: '#FFF0F0F0' });
          promptAction.openCustomDialog(contentNode);
          setTimeout(() => {
            contentNode.update({ text: 'new style', backColor: '#0F0F0F0F' });
          }, 2000); // The pop-up content text will automatically update after 2 seconds.
        })
    }.width('100%').height('100%')
  }
}

You can dynamically modify the style of a popup while it's being displayed. Any parameters supported by the update method can be used to dynamically modify the style. The effect is as follows: While the popup is being displayed, the text and background color of the popup are updated.

Solution 3: Use PromptAction to display the pop-up window as in Solution 2, and use updateCustomDialog to update the pop-up window style. However, currently only the alignment, offset, autoCancel, and maskColor properties can be updated.