学习笔记（二十八）：ArkUi-自定义弹窗 (CustomDialog)

概述：

CustomDialog是自定义弹窗，可用于广告、中奖、警告、软件更新等与用户交互响应操作。开发者可以通过CustomDialogController类显示自定义弹窗

一、创建自定义弹框

1、使用@CustomDialog装饰器装饰自定义弹窗，可在此装饰器内自定义弹窗内容

// 自定义弹框内容
@CustomDialog
struct MyCustomerDialog{
  controller: CustomDialogController = new CustomDialogController({
    builder: MyCustomerDialog({})
  })
  build(){
    Text('这是内容')
      .height(40)
  }
}

2、创建构造器，与装饰器呼应相连，并实现onClick事件绑定的组件使弹窗弹出

@Entry
@Component
struct CustomerDIalogExample {
  controller: CustomDialogController = new CustomDialogController({
    builder: MyCustomerDialog()
  })
  build() {
    Row() {
      Column() {
        Button('显示弹框')
          .onClick(()=>{
              this.controller.open()
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

 1 // 自定义弹框使用示例
 2 @Entry
 3 @Component
 4 struct CustomerDIalogExample {
 5   controller: CustomDialogController = new CustomDialogController({
 6     builder: MyCustomerDialog()
 7   })
 8   build() {
 9     Row() {
10       Column() {
11         Button('显示弹框')
12           .onClick(()=>{
13               this.controller.open()
14           })
15       }
16       .width('100%')
17     }
18     .height('100%')
19   }
20 }
21 
22 // 自定义弹框内容
23 @CustomDialog
24 struct MyCustomerDialog{
25   controller: CustomDialogController = new CustomDialogController({
26     builder: MyCustomerDialog({})
27   })
28   build(){
29     Text('这是内容')
30       .height(40)
31   }
32 }

二、弹窗数据交互

1、在@CustomDialog装饰器内添加按钮，同时添加数据函数

// 自定义弹框内容
@CustomDialog
struct MyCustomerDialog {
  @State title:string = "提示"  // 标题
  @State message:string = "";   // 提示内容
  cancel?:()=>void   // 取消事件
  confirm?:()=>void   // 确定事件
  controller: CustomDialogController = new CustomDialogController({
    builder: MyCustomerDialog({})
  })

  build() {
    Column() {
      Text(this.title)
        .width('100%')
        .height(40)
        .textAlign(TextAlign.Center)
        .fontColor(Color.White)
        .backgroundColor($r('app.color.dialog_title_bg'))
      Text(this.message)
        .height(70)
        .width('100%')
        .textAlign(TextAlign.Center)
      Row() {
        Button('取消')
          .layoutWeight(1)
          .backgroundColor(Color.White)
          .fontColor(Color.Black)
          .type(ButtonType.Normal)
          .height(40)
          .onClick(()=>this.cancel())
        Button('确定')
          .layoutWeight(1)
          .type(ButtonType.Normal)
          .backgroundColor($r('app.color.main_color'))
          .fontColor(Color.White)
          .height(40)
          .onClick(()=>this.confirm())
      }
      .width('100%')
    }
  }
}

2、页面内需要在构造器内进行接收，同时创建相应的函数操作

// 自定义弹框使用示例
@Entry
@Component
struct CustomerDIalogExample {
  controller: CustomDialogController = new CustomDialogController({
    builder: MyCustomerDialog({
      title:'警告',
      message: '是否退出',
      cancel:()=>{
        this.cancelEvent()
      },
      confirm:()=>{
        this.confirmEvent()
      }
    })
  })

  cancelEvent(){
    console.log('点击了取消')
  }
  confirmEvent(){
    console.log('点击了确定')
  }

  build() {
    Row() {
      Column() {
        Button('显示弹框')
          .onClick(() => {
            this.controller.open()
          })
      }
      .width('100%')
    }
    .height('100%')
  }
}

 1 // 自定义弹框使用示例
 2 @Entry
 3 @Component
 4 struct CustomerDIalogExample {
 5   controller: CustomDialogController = new CustomDialogController({
 6     builder: MyCustomerDialog({
 7       title:'警告',
 8       message: '是否退出',
 9       cancel:()=>{
10         this.cancelEvent()
11       },
12       confirm:()=>{
13         this.confirmEvent()
14       }
15     })
16   })
17 
18   cancelEvent(){
19     console.log('点击了取消')
20   }
21   confirmEvent(){
22     console.log('点击了确定')
23   }
24 
25   build() {
26     Row() {
27       Column() {
28         Button('显示弹框')
29           .onClick(() => {
30             this.controller.open()
31           })
32       }
33       .width('100%')
34     }
35     .height('100%')
36   }
37 }
38 
39 // 自定义弹框内容
40 @CustomDialog
41 struct MyCustomerDialog {
42   @State title:string = "提示"  // 标题
43   @State message:string = "";   // 提示内容
44   cancel?:()=>void   // 取消事件
45   confirm?:()=>void   // 确定事件
46   controller: CustomDialogController = new CustomDialogController({
47     builder: MyCustomerDialog({})
48   })
49 
50   build() {
51     Column() {
52       Text(this.title)
53         .width('100%')
54         .height(40)
55         .textAlign(TextAlign.Center)
56         .fontColor(Color.White)
57         .backgroundColor($r('app.color.dialog_title_bg'))
58       Text(this.message)
59         .height(70)
60         .width('100%')
61         .textAlign(TextAlign.Center)
62       Row() {
63         Button('取消')
64           .layoutWeight(1)
65           .backgroundColor(Color.White)
66           .fontColor(Color.Black)
67           .type(ButtonType.Normal)
68           .height(40)
69           .onClick(()=>this.cancel())
70         Button('确定')
71           .layoutWeight(1)
72           .type(ButtonType.Normal)
73           .backgroundColor($r('app.color.main_color'))
74           .fontColor(Color.White)
75           .height(40)
76           .onClick(()=>this.confirm())
77       }
78       .width('100%')
79     }
80   }
81 }