HarmonyOS应用开发学习笔记 arkTS自定义弹窗(CustomDialog)简单使用 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)
  }
}

2、使用 .open()

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

        Button("拥抱时代")
          .width('80%')
          .margin({ left: 20, top:200, right: 20 })
          .onClick(() => {
            this.dialog.open() //淡出淡出狂
          })

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')
  }

  • 弹出框的代码
@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)
  }
}

在这里插入图片描述

评论
添加红包

请填写红包祝福语或标题

红包个数最小为10个

红包金额最低5元

当前余额3.43前往充值 >
需支付:10.00
成就一亿技术人!
领取后你会自动成为博主和红包主的粉丝 规则
hope_wisdom
发出的红包

打赏作者

木子102

你的励将是我创作的最大动力

¥1 ¥2 ¥4 ¥6 ¥10 ¥20
扫码支付:¥1
获取中
扫码支付

您的余额不足,请更换扫码支付或充值

打赏作者

实付
使用余额支付
点击重新获取
扫码支付
钱包余额 0

抵扣说明:

1.余额是钱包充值的虚拟货币,按照1:1的比例进行支付金额的抵扣。
2.余额无法直接购买下载,可以购买VIP、付费专栏及课程。

余额充值