当前位置：首页 > news >正文

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

news 2025/8/4 4:28:01

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

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

在这里插入图片描述

1、定义弹出框 @CustomDialog

@CustomDialog
export struct CustomDialogExample {controller: CustomDialogControllerbuild() {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')}//onAcceptonAccept() {console.info('Callback when the second button is clicked')}

弹出框的代码

@CustomDialog
export struct CustomDialogExample {controller: CustomDialogController //弹出框控制器cancel: () => void //回调方法cancelconfirm: () => void //回调方法confirmbuild() {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)}
}

在这里插入图片描述