HarmonyOS 6 CustomDialog 嵌套弹窗使用文档

文章目录完整代码弹窗嵌套结构1. 弹窗层级关系2. 嵌套实现关键逻辑核心参数与API1. CustomDialog 装饰器2. CustomDialogController 弹窗控制器3. 关闭拦截 onWillDismiss4. 数据双向绑定 Link5. 生命周期管理总结完整代码// xxx.ets CustomDialog struct CustomDialogExampleTwo { controllerTwo?: CustomDialogController; build() { Column() { Text(我是第二个弹窗) .fontSize(30) .height(100) Button(点我关闭第二个弹窗) .onClick(() { if (this.controllerTwo ! undefined) { this.controllerTwo.close(); } }) .margin(20) } } } CustomDialog Component struct CustomDialogExample { Link textValue: string; Link inputValue: string; dialogControllerTwo: CustomDialogController | null new CustomDialogController({ builder: CustomDialogExampleTwo(), alignment: DialogAlignment.Bottom, onWillDismiss:(dismissDialogAction: DismissDialogAction) { console.info(reason ${dismissDialogAction.reason}); console.info(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; // 若尝试在CustomDialog中传入多个其他的Controller以实现在CustomDialog中打开另一个或另一些CustomDialog那么此处需要将指向自己的controller放在所有controller的后面 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) // 如果需要使用border属性或cornerRadius属性请和borderRadius属性一起使用。 } } Entry Component struct CustomDialogUser { State textValue: string State inputValue: string click me dialogController: CustomDialogController | null new CustomDialogController({ builder: CustomDialogExample({ cancel: () { this.onCancel(); }, confirm: () { this.onAccept(); }, textValue: this.textValue, inputValue: this.inputValue }), cancel: this.exitApp, autoCancel: true, onWillDismiss:(dismissDialogAction: DismissDialogAction) { console.info(reason ${dismissDialogAction.reason}); console.info(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, }) // 在自定义组件即将析构销毁时将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); } 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 }) } }运行效果如图弹窗嵌套结构1. 弹窗层级关系二级弹窗CustomDialogExampleTwo最内层弹窗一级弹窗CustomDialogExample包含二级弹窗控制器主页面CustomDialogUser入口页面管理一级弹窗2. 嵌套实现关键逻辑在一级弹窗组件内部声明二级弹窗控制器dialogControllerTwo一级弹窗通过按钮调用dialogControllerTwo.open()打开二级弹窗官方注释明确弹窗嵌套时自身控制器必须放在所有子控制器后面二级弹窗通过自身controllerTwo.close()执行关闭核心参数与API1. CustomDialog 装饰器标记当前组件为自定义弹窗必须配合CustomDialogController使用。2. CustomDialogController 弹窗控制器参数作用builder必填绑定弹窗UI组件alignment弹窗对齐方式Bottom/Center/Top等offset弹窗偏移量dx水平、dy垂直autoCancel点击外部遮罩是否自动关闭cornerRadius弹窗圆角gridCount弹窗宽度占屏幕网格数customStyle是否使用自定义样式false为系统默认样式onWillDismiss弹窗即将关闭的拦截回调3. 关闭拦截 onWillDismiss可捕获关闭原因DismissReason.PRESS_BACK返回键、DismissReason.TOUCH_OUTSIDE点击外部必须调用dismissDialogAction.dismiss()才能真正关闭可在此拦截关闭行为如校验不通过则不关闭4. 数据双向绑定 Link一级弹窗使用Link与主页面State数据同步实现输入框实时更新页面数据。5. 生命周期管理主页面aboutToDisappear生命周期中将弹窗控制器置空防止内存泄漏官方推荐写法。总结禁止在弹窗中循环创建控制器避免内存泄漏嵌套层级建议不超过 2~3 级提升用户体验customStyle: false时使用系统弹窗样式更稳定控制器必须判空! null再调用open/close低版本 API 不支持部分高级属性建议使用 API 10自定义弹窗中打开另一个自定义弹窗必须在父弹窗内创建子控制器自身控制器必须放在所有子控制器后面代码注释明确标注弹窗关闭必须通过controller.close()页面销毁时必须将控制器置空dialogController nullonWillDismiss必须调用dismiss()才能关闭弹窗数据传递推荐使用Link双向绑定如果这篇文章对你有帮助欢迎点赞、收藏、关注你的支持是持续创作的动力