《HarmonyOS应用开发基础》 课件知识点2-13-2 自定义对话框.pptx

自定义对话框

自定义对话框概述使用@CustomDialog装饰器用于装饰自定义弹窗组件，使得弹窗可以动态设置内容及样式。例如：标题、内容、对话框交互按钮等内容和样式都可自定义。如右图所示。

自定义对话框控制器//自定义对话框declare?class?CustomDialogController?{??//自定义对话框的构造方法??constructor(value:?CustomDialogControllerOptions);???open();???????????????//?打开对话框??close();??????????????//?关闭对话框}//自定义对话框常用参数的定义declare?interface?CustomDialogControllerOptions?{??builder:?any;?//对话框内部自定义UI的构造器??cancel?:?()?=?void;?//点击蒙层(对话框外部)的事件回调??autoCancel?:?boolean;?//点击蒙层(对话框外部)是否自动关闭对话框??alignment?:?DialogAlignment;?//对话框在竖直方向上的对齐方式??...}自定义对话框控制器参数与方法说明：

自定义对话框使用自定义对话框组件第一步：使用装饰器@CustomDialog装饰组件。@CustomDialogstruct?DialogExample{}第二步：在自定义对话框中设置参数，可在使用时传入对应参数。@CustomDialogstruct?DialogExample?{??controller:?CustomDialogController??title:?string?=?自定义对话框标题??content:?string?=?对话框内容??confirm:?()?=?void??cancel:?()?=?void}

自定义对话框使用自定义对话框组件第三步：构建自定义对话框显示UI。@CustomDialogstruct?DialogExample?{...??build()?{????Column()?{??????Row()?{????????Text(this.title).fontSize(20).width(100%).textAlign(TextAlign.Center)??????}??????Row()?{????????Text(this.content).fontSize(18)??????}.margin({?top:?10,?bottom:?10?})??????Row({?space:?5?})?{????????Button(取消)??????????.onClick(()?=?{????????????this.controller.close()????????????this.cancel();??????????})??????????.width(50%)????????Button(确认)??????????.onClick(()?=?{????????????this.controller.close()????????????this.confirm()??????????})??????????.width(50%)??????}????}.padding(20)??}}

自定义对话框使用使用自定义对话框组件第一步：创建自定义对话框控制器对象，并选择传入自定义对话框的参数。@Entry@Componentstruct?CustomDialogUser?{??dialogController:?CustomDialogController?=?new?CustomDialogController({????builder:?DialogExample({??????confirm:?this.confirmDialog,??????cancel:?this.cancelDialog?}),????cancel:?this.cancelDialog,????autoCancel:?true//true表示点击对话框外会自动关闭对话框??});confirmDialog(){console.info(Confirmdialog!);}cancelDialog(){console.info(Canceldialog!);}}

自定义对话框使用使用自定义对话框组件第二步：打开对话框。@Entry@Componentstruct?CustomDialogUser?{...??build()?{????Column()?{??????Button(Click?to?open?Dia