参考demo如下:// xxx.ets @CustomDialog struct CustomDialogExample { controller?: CustomDialogController cancel: () => void = () => { } confirm: () => void = () => { } build() { Column() { Text('这是自定义弹窗') .fontSize(30) Text('这是自定义弹窗') .fontSize(30) Text('这是自定义弹窗') .fontSize(30) Text('这是自定义弹窗') .fontSize(30) Text('这是自定义弹窗') .fontSize(15) Button('点我关闭弹窗') .onClick(() => { if (this.controller != undefined) { this.controller.close() } }) } } } @Entry @Component struct CustomDialogUser { dialogController: CustomDialogController | null = new CustomDialogController({ builder: CustomDialogExample({ cancel: ()=> { this.onCancel() }, confirm: ()=> { this.onAccept() } }), cancel: this.existApp, 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.Center, offset: { dx: 0, dy: -20 }, customStyle: false, cornerRadius: 20, width: 300, height: 200, borderWidth: 1, borderStyle: BorderStyle.Dashed,//使用borderStyle属性,需要和borderWidth属性一起使用 borderColor: Color.Blue,//使用borderColor属性,需要和borderWidth属性一起使用 backgroundColor: Color.White, shadow: ({ radius: 20, color: Color.Grey, offsetX: 50, offsetY: 0}), }) // 在自定义组件即将析构销毁时将dialogController置空 aboutToDisappear() { this.dialogController = null // 将dialogController置空 } onCancel() { console.info('Callback when the first button is clicked') } onAccept() { console.info('Callback when the second button is clicked') } existApp() { console.info('Click the callback in the blank area') } build() { Column() { Button('click me') .onClick(() => { if (this.dialogController != null) { this.dialogController.open() } }).backgroundColor(0x317aff) }.width('100%').margin({ top: 5 }) } }
参考demo如下: