How to build HarmonyOS NEXT - @CustomDialog?

Customized dialog is a custom pop-up window that can be used for interactive response operations with users, such as advertising, winning, warning, software updates, etc. Developers can display custom pop ups through the CustomizalDialogController class. interface constructor(value: CustomDialogControllerOptions) Description of the Customs DialogControllers Options object ·Builder: Custom pop-up content constructor. cancel： Return, ESC key, and callback when clicking on the obstacle layer pop-up window to exit. autoCancel： Whether to allow clicking on the obstruction layer to exit, true means closing the pop-up window. False means not closing the pop-up window. (Default value: true） alignment： The vertical alignment of pop ups. (Default value: DialogAlignment.Default） offset： The offset of the pop-up window relative to the alignment position. (Default value: { dx: 0, dy: 0 }） customStyle： Is the pop-up container style customizable. gridCount： The number of pop-up windows that occupy the width of the grid. The default is to adapt according to the window size, handle outliers according to the default value, and the maximum number of grids is the maximum number of grids in the system. Value range: integers greater than or equal to 0. maskColor： Customize the color of the mask. (Default value: 0x33000000） maskRect： In the pop-up masking layer area, events within the masking layer area are not transparent, while events outside the masking layer area are transparent. (Default value: { x: 0, y: 0, width: '100%', height: '100%' }） openAnimation： Customize the animation effect related parameters for pop-up windows. closeAnimation： Customize the animation effect parameters for closing pop-up windows. showInSubWindow： When a certain popup needs to be displayed outside the main window, should it be displayed in the sub window. (Default value: false， Pop ups are displayed within the application, rather than as separate child windows backgroundColor： Set the pop-up window backplate filling. (Default value: Color.Transparent） cornerRadius： Set the fillet radius of the backboard. You can set the radii of four rounded corners separately. (Default value: { topLeft: '32vp', topRight: '32vp', bottomLeft: '32vp', bottomRight: '32vp' }） isModal： Is the pop-up window a modal window? Modal windows have masks, while non modal windows have no masks. (Default value: true， At this moment, there is a mask on the pop-up window onWillDismiss： Close the callback function interactively. borderWidth： Set the border width of the pop-up panel. Four border widths can be set separately. (Default value: 0.) Percentage parameter method: Set the border width of the pop-up window as a percentage of the parent element's pop-up width. When the left and right borders of a pop-up window are larger than the width of the pop-up window, and the upper and lower borders of the pop-up window are larger than the height of the pop-up window, the display may not meet expectations. borderColor： Set the border color of the pop-up panel. Default value: Color.Black If using the borderColor attribute, it needs to be used together with the borderWidth attribute. The interface of custom pop ups can be implemented through the components defined by the decorator @ CustomizalDialog @CustomDialog export struct WelcomeDialog { controller: CustomDialogController confirm?: () => void cancel?: () => void build() { Column({ space: 10 }) { Text("欢迎使用") Text('请同意') Text('《用户协议》') Button('同意').onClick(() => { this.controller.close() if (this.confirm) { this.confirm() } }).width(150) Button('不同意') .width(150) .backgroundColor(Color.Gray) .onClick(() => { this.controller.close() if (this.cancel) { this.cancel() } }) }.padding(10) } } Then control the display and hiding of custom pop ups through the Customs Dialogue Controller. import { WelcomeDialog } from './componnents/WelcomeDialog'; @Entry @Component struct CustomDialogPage { @State message: string = '@CustomDialog Custom pop-up window'; @State dialogResult: string = '' dialogController: CustomDialogController = new CustomDialogController({ builder: WelcomeDialog({ cancel: () => { this.dialogResult = '不同意' }, confirm: () => { this.dialogResult = '同意' }, }), }) build() { Column({space:10}) { Text(this.message) .fontSize(20) .fontWeight(FontWeight.Bold) Button('自定义弹窗').onClick(() => { this.dialogController.open() }) Text('自定义弹窗执行结果：' + this.dialogResult) } .height('100%') .width('100%') } }

constructor(value: CustomDialogControllerOptions)

@CustomDialog
export struct WelcomeDialog {
  controller: CustomDialogController
  confirm?: () => void
  cancel?: () => void

  build() {
    Column({ space: 10 }) {
      Text("欢迎使用")
      Text('请同意')
      Text('《用户协议》')

      Button('同意').onClick(() => {
        this.controller.close()
        if (this.confirm) {
          this.confirm()
        }
      }).width(150)

      Button('不同意')
        .width(150)
        .backgroundColor(Color.Gray)
        .onClick(() => {
          this.controller.close()
          if (this.cancel) {
            this.cancel()
          }
        })

    }.padding(10)
  }
}

import { WelcomeDialog } from './componnents/WelcomeDialog';

@Entry
@Component
struct CustomDialogPage {
  @State message: string = '@CustomDialog Custom pop-up window';
  @State dialogResult: string = ''
  dialogController: CustomDialogController = new CustomDialogController({
    builder: WelcomeDialog({
      cancel: () => {
        this.dialogResult = '不同意'
      },
      confirm: () => {
        this.dialogResult = '同意'
      },
    }),
  })

  build() {
    Column({space:10}) {
      Text(this.message)
        .fontSize(20)
        .fontWeight(FontWeight.Bold)

      Button('自定义弹窗').onClick(() => {
        this.dialogController.open()
      })

      Text('自定义弹窗执行结果：' + this.dialogResult)
    }
    .height('100%')
    .width('100%')
  }
}

Related Posts

Exploring Angular Resource API

Mar 19, 2025  0

Introducing ngx-mat-selection-list-search: A Simple Sea...

Feb 15, 2025  0

Event Handling in React: A Beginner’s Guide

Mar 23, 2025  0