HarmonyOS应用开发学习笔记 arkTS自定义弹窗（CustomDialog）简单使用 arkTS弹出框回调、监听_鸿蒙arkts接口回调

HarmonyOS应用开发学习笔记 arkTS自定义弹窗（CustomDialog）简单使用

1、@CustomDialog装饰器用于装饰自定义弹框

1、定义弹出框 @CustomDialog

@CustomDialog
export struct CustomDialogExample {
  controller: CustomDialogController

  build() {
    Column() {
      Text("是否退出？").fontSize(30).margin({ top: 60 })
      Blank()

      Row() {
        Text('是')
          .width('50%')
          .height(40)
          .backgroundColor(Color.Blue)
          .fontColor(Color.White)
          .fontSize(18)
          .textAlign(TextAlign.Center)
        Text('否')
          .width('50%')
          .height(40)
          .backgroundColor(Color.Gray)
          .fontColor(Color.White)
          .fontSize(18)
          .textAlign(TextAlign.Center)
      }.backgroundColor(Color.Red)
    }.width('100%').height(200)
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28

2、使用 .open()

  private dialog =
    new CustomDialogController({ builder: CustomDialogExample() })
	……

        Button("拥抱时代")
          .width('80%')
          .margin({ left: 20, top:200, right: 20 })
          .onClick(() => {
            this.dialog.open() //淡出淡出狂
          })
1
2
3
4
5
6
7
8
9
10

3、弹出框添加回调

• 使用的地方代码

  private dialog = new CustomDialogController({
    builder: CustomDialogExample({
      cancel: this.onCancel,
      confirm: this.onAccept
    })
  })

  //定义onCancel回调方法
  onCancel() {
    console.info('Callback when the first button is clicked')
  }
  //onAccept
  onAccept() {
    console.info('Callback when the second button is clicked')
  }

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16

• 弹出框的代码

@CustomDialog
export struct CustomDialogExample {
  controller: CustomDialogController //弹出框控制器
  cancel: () => void //回调方法cancel
  confirm: () => void //回调方法confirm


  build() {
    Column() {
      Text("是否退出？").fontSize(30).margin({ top: 60 })
      Blank()

      Row() {
        Text('是')
          .width('50%').height(40).backgroundColor(Color.Blue).fontColor(Color.White)
          .fontSize(18).textAlign(TextAlign.Center)
          .onClick(() => {
            this.controller.close()
            this.confirm() //调用回调
          })

        Text('否')
          .width('50%').height(40).backgroundColor(Color.Gray).fontColor(Color.White)
          .fontSize(18).textAlign(TextAlign.Center)
          .onClick(() => {
            this.controller.close()
            this.cancel() //调用回调
          })


      }.backgroundColor(Color.Red)
    }.width('100%').height(200)
  }
}
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34