中国优质的IT技术网站
专业IT技术创作平台
IT职业在线教育平台
微信扫码分享
let anmDuration: number = 300; // 弹窗交互 @CustomDialog struct CustomDialogExample { controller: CustomDialogController = new CustomDialogController({ builder: CustomDialogExample({}), autoCancel: false }) @State showFlag: Visibility = Visibility.Visible; @State isAutoCancel: boolean = false; textController: TextAreaController = new TextAreaController() build() { Column() { Row() { Text("自定义动画的弹窗") } .borderRadius(20) .backgroundColor('#ff6288cb') .height(200) .width('100%') } .margin({top:10}) .justifyContent(FlexAlign.Center) .width('100%') .height("100%") .onClick(() => { console.log("dialogClick") if (this.isAutoCancel) { console.log("dialogClick2") this.cancel(); } }) .visibility(this.showFlag) // 定义进场出场转场动画效果 .transition(TransitionEffect.OPACITY.animation({ duration: anmDuration }) .combine(TransitionEffect.translate({ y: 500 }))) } // 延迟关闭弹窗,让自定义的出场动画显示 cancel() { this.showFlag = Visibility.Hidden console.log("closeDialog") setTimeout(() => { this.controller.close() }, anmDuration) } } @Entry @Component struct CustomDialogUser { @State isAutoCancel: boolean = true; dialogController: CustomDialogController = new CustomDialogController({ builder: CustomDialogExample({ isAutoCancel: this.isAutoCancel }), autoCancel: this.isAutoCancel, customStyle: true, }) build() { Column() { Button('click me') .onClick(() => { this.dialogController.open() }) }.width('100%') .height('100%') } }