Custom Dialog Box

A custom dialog box is a dialog box you customize by using APIs of the CustomDialogController class. It can be used for user interactions, showing an ad, prize, alert, software update message, and more. For details, see Custom Dialog Box.

Creating a Custom Dialog Box

1. Use the @CustomDialog decorator to create a custom dialog box.

2. Set the content for the @CustomDialog decorated dialog box.

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

3. Create a builder that is bound to the decorator.

   dialogController: CustomDialogController = new CustomDialogController({
       builder: CustomDialogExample({}),
   })
   

4. Click the component bound to the onClick event to display the dialog box.

   Flex({justifyContent:FlexAlign.Center}){
     Button('click me')
       .onClick(() => {
         this.dialogController.open()
       })
   }.width('100%')
   

   

Interaction with Custom Dialog Box

Custom dialog boxes can be used for data interactions to complete a series of response operations.

1. Add button operations to the @CustomDialog decorator and add the creation of data functions.

   @CustomDialog
   struct CustomDialogExample {
     controller: CustomDialogController
     cancel: () => void
     confirm: () => void
     build() {
       Column() {
         Text('I am content') .fontSize(20).margin({ top: 10, bottom: 10 })
         Flex({ justifyContent: FlexAlign.SpaceAround }) {
           Button('cancel')
             .onClick(() => {
               this.controller.close()
               this.cancel()
             }).backgroundColor(0xffffff).fontColor(Color.Black)
           Button('confirm')
             .onClick(() => {
               this.controller.close()
               this.confirm()
             }).backgroundColor(0xffffff).fontColor(Color.Red)
         }.margin({ bottom: 10 })
       }
     }
   }
   

2. Receive the page in the builder and create corresponding function operations.

   dialogController: CustomDialogController = new CustomDialogController({
       builder: CustomDialogExample({
         cancel: this.onCancel,
         confirm: this.onAccept,
       }),
       alignment: DialogAlignment.Default,  // Set the alignment mode of the dialog box. By default, the dialog box is displayed at the bottom.
     })
     onCancel() {
       console.info('Callback when the first button is clicked')
     }
     onAccept() {
       console.info('Callback when the second button is clicked')
     }