// 定义第二个弹窗结构体@CustomDialogstruct CustomDialogExampleTwo { controllerTwo?: CustomDialogController build() { Column() { Text('我是第二个弹窗') .fontSize(30) .height(100) Button('点我关闭第二个弹窗') .onClick(() => { // 关闭第二个弹窗 if (this.controllerTwo!= undefined) { this.controllerTwo.close() } }) .margin(20) } }}
// 定义第一个弹窗结构体，包含第二个弹窗的控制器@CustomDialog@Componentstruct CustomDialogExample { @Link textValue: string @Link inputValue: string dialogControllerTwo: CustomDialogController | null = new CustomDialogController({ builder: CustomDialogExampleTwo(), alignment: DialogAlignment.Bottom, onWillDismiss:(dismissDialogAction: DismissDialogAction)=> { // 处理弹窗即将关闭的回调 console.info("reason=" + JSON.stringify(dismissDialogAction.reason)) console.log("dialog onWillDismiss") if (dismissDialogAction.reason == DismissReason.PRESS_BACK) { dismissDialogAction.dismiss() } if (dismissDialogAction.reason == DismissReason.TOUCH_OUTSIDE) { dismissDialogAction.dismiss() } }, offset: { dx: 0, dy: -25 } }) controller?: CustomDialogController cancel: () => void = () => {} confirm: () => void = () => {} build() { Column() { Text('Change text').fontSize(20).margin({ top: 10, bottom: 10 }) TextInput({ placeholder: '', text: this.textValue }).height(60).width('90%') .onChange((value: string) => { this.textValue = value }) Text('Whether to change a text?').fontSize(16).margin({ bottom: 10 }) Flex({ justifyContent: FlexAlign.SpaceAround }) { Button('cancel') .onClick(() => { if (this.controller!= undefined) { this.controller.close() this.cancel() } }).backgroundColor(0xffffff).fontColor(Color.Black) Button('confirm') .onClick(() => { if (this.controller!= undefined) { this.inputValue = this.textValue this.controller.close() this.confirm() } }).backgroundColor(0xffffff).fontColor(Color.Red) }.margin({ bottom: 10 }) Button('点我打开第二个弹窗') .onClick(() => { if (this.dialogControllerTwo!= null) { this.dialogControllerTwo.open() } }) .margin(20) }.borderRadius(10) }}
// 入口组件，包含第一个弹窗的控制器@Entry@Componentstruct CustomDialogUser { @State textValue: string = '' @State inputValue: string = 'click me' dialogController: CustomDialogController | null = new CustomDialogController({ builder: CustomDialogExample({ cancel: ()=> { this.onCancel() }, confirm: ()=> { this.onAccept() }, textValue: $textValue, inputValue: $inputValue }), cancel: this.exitApp, autoCancel: true, onWillDismiss:(dismissDialogAction: DismissDialogAction)=> { console.info("reason=" + JSON.stringify(dismissDialogAction.reason)) console.log("dialog onWillDismiss") if (dismissDialogAction.reason == DismissReason.PRESS_BACK) { dismissDialogAction.dismiss() } if (dismissDialogAction.reason == DismissReason.TOUCH_OUTSIDE) { dismissDialogAction.dismiss() } }, alignment: DialogAlignment.Bottom, offset: { dx: 0, dy: -20 }, gridCount: 4, customStyle: false, cornerRadius: 10, }) // 在组件即将销毁时将弹窗控制器置空 aboutToDisappear() { this.dialogController = null } onCancel() { console.info('Callback when the first button is clicked') } onAccept() { console.info('Callback when the second button is clicked') } exitApp() { console.info('Click the callback in the blank area') } build() { Column() { Button(this.inputValue) .onClick(() => { if (this.dialogController!= null) { this.dialogController.open() } }).backgroundColor(0x317aff) }.width('100%').margin({ top: 5 }) }}
评论