[Hongmeng Software Development] Custom pop-up window (CustomDialog)

Article directory

Preface
1. Create your first custom pop-up window
- 1.1 Create a custom pop-up window
- 1.2 Create a constructor and connect it to the decorator
- - Detailed explanation of CustomDialogController parameters
  - Function introduction
  - - open()
  - close()
- 1.3 Click on the component bound to the onClick event to cause the pop-up window to pop up
2. Sample code
Summarize

Foreword

Custom pop-up windows (CustomDialog) can be used for interactive response operations such as advertisements, prize winnings, warnings, software updates, etc. Developers can display custom pop-up windows through the CustomDialogController class. Please refer to the custom pop-up window for specific usage.

1. Create your first custom pop-up window

1.1 Create a custom pop-up window

Use the @CustomDialog decorator to decorate custom pop-up windows.
The @CustomDialog decorator is used to decorate a custom pop-up frame, and custom content (that is, the pop-up frame content) is placed in this decorator.

@CustomDialog
struct CustomDialogExample {<!-- -->
  controller: CustomDialogController
  build() {<!-- -->
    Column() {<!-- -->
      Text('I am the content')
      .fontSize(20)
      .margin({<!-- --> top: 10, bottom: 10 })
    }
  }
}

It should be noted that we need to put the code of this custom pop-up window into the page we need to use, like this:
There are two things we need to write in our custom pop-up window:
controller: controls our custom pop-up window
Build function: It is exactly the same as our main interface, there is no difference, just write the code just like the main page.

1.2 Create a constructor and connect it to the decorator

After creating the custom pop-up window, we must get its object. Its type is CustomDialogController.

dialogController: CustomDialogController = new CustomDialogController({<!-- -->
    builder: CustomDialogExample({<!-- -->}),
})

builder: CustomDialogExample({}) specifies which custom window
The parameters of CustomDialogExample are the parameters of the custom window

Detailed explanation of CustomDialogController parameters

Interface function prototype:

CustomDialogController(value:{<!-- -->builder: CustomDialog, cancel?: () => void, autoCancel?: boolean, alignment?: DialogAlignment, offset?: Offset, customStyle?: boolean, gridCount? : number})

The parameters are as follows:

The following parameters are parameter name, parameter type, whether it is required, and parameter function.
1. Builder, CustomDialog, is a custom pop-up window content constructor.
2. cancel, () => void, no, callback when clicking the barrier layer to exit.
3. autoCancel, boolean, no, whether to allow clicking on the barrier layer to exit. Default value: true
4. alignment, DialogAlignment, no, the vertical alignment of the pop-up window. Default value: DialogAlignment.Default
5. Offset, Offset, no, the offset of the pop-up window relative to the alignment position.
6. customStyle, boolean, no, whether the pop-up window container style is customized. Default value: false, the width of the pop-up window container is adaptive according to the grid system and does not follow the child nodes; the height is adaptive to the child nodes, up to 90% of the window height; the rounded corners are 24vp.
7. gridCount, number, no, the pop-up window width accounts for the number of grid widths. The default is to adapt according to the window size, outliers are processed according to the default value, and the maximum number of rasters is the maximum number of rasters in the system.

Function introduction

open()

The function prototype is as follows:

open(): void

close()

The function prototype is as follows

close(): void

Close the displayed custom pop-up window. If it has been closed, it will not take effect.

Displays custom pop-up window content and allows multiple uses. However, if the pop-up box is in SubWindow mode, the SubWindow pop-up box is not allowed to pop up again.

1.3 Click on the component bound to the onClick event to cause the pop-up window to pop up

Button('click me')
  .onClick(() => {<!-- -->
    this.dialogController.open()
  })

Use the open() function to open a custom window
As shown below:

2. Sample code

// xxx.ets
@CustomDialog
struct CustomDialogExample {<!-- -->
  @Link textValue: string
  @Link inputValue: string
  controller: CustomDialogController
  // If you try to pass in multiple other Controllers in the CustomDialog to open another or some other CustomDialogs in the CustomDialog, then you need to put the controller pointing to yourself at the end.
  cancel: () => void
  confirm: () => void

  build() {<!-- -->
    Column() {<!-- -->
      Text('Change text').fontSize(20).margin({<!-- --> top: 10, bottom: 10 })
      TextInput({<!-- --> placeholder: '', text: this.textValue }).height(60).width('90%')
        .onChange((value: string) => {<!-- -->
          this.textValue = value
        })
      Text('Whether to change a text?').fontSize(16).margin({<!-- --> bottom: 10 })
      Flex({<!-- --> justifyContent: FlexAlign.SpaceAround }) {<!-- -->
        Button('cancel')
          .onClick(() => {<!-- -->
            this.controller.close()
            this.cancel()
          }).backgroundColor(0xffffff).fontColor(Color.Black)
        Button('confirm')
          .onClick(() => {<!-- -->
            this.inputValue = this.textValue
            this.controller.close()
            this.confirm()
          }).backgroundColor(0xffffff).fontColor(Color.Red)
      }.margin({<!-- --> bottom: 10 })
    }
    //The default borderRadius of the dialog is 24vp. If you need to use the border attribute, please use it together with the borderRadius attribute.
  }
}

@Entry
@Component
struct CustomDialogUser {<!-- -->
  @State textValue: string = ''
  @State inputValue: string = 'click me'
  dialogController: CustomDialogController = new CustomDialogController({<!-- -->
    builder: CustomDialogExample({<!-- -->
      cancel: this.onCancel,
      confirm: this.onAccept,
      textValue: $textValue,
      inputValue: $inputValue
    }),
    cancel: this.existApp,
    autoCancel: true,
    alignment: DialogAlignment.Bottom,
    offset: {<!-- --> dx: 0, dy: -20 },
    gridCount: 4,
    customStyle: false
  })

  // Delete and empty the dialogControlle when the custom component is about to be destroyed.
  aboutToDisappear() {<!-- -->
    delete this.dialogController, // Delete dialogController
    this.dialogController = undefined // Leave dialogController empty
  }

  onCancel() {<!-- -->
    console.info('Callback when the first button is clicked')
  }

  onAccept() {<!-- -->
    console.info('Callback when the second button is clicked')
  }

  existApp() {<!-- -->
    console.info('Click the callback in the blank area')
  }

  build() {<!-- -->
    Column() {<!-- -->
      Button(this.inputValue)
        .onClick(() => {<!-- -->
          if (this.dialogController != undefined) {<!-- -->
            this.dialogController.open()
          }
        }).backgroundColor(0x317aff)
    }.width('100%').margin({<!-- --> top: 5 })
  }
}

Summary

This article introduces the basic use of CustomDialog, which includes all the contents of API9. It is very simple. I hope everyone will write code after reading it! ! !