HarmonyOS应用开发：弹窗封装

前言：
本案例将介绍如何封装弹窗，以及如何使用这种封装后的弹窗
效果图预览

使用讲解

• 进入案例，点击右上角筛选按钮，顶部弹出筛选框，点击一种文件类型进行筛选
  
• 点击左上角添加按钮，中间弹出新增文件弹框，输入文件名以及选择文件类型，点击确定按钮添加完毕
  
• 长按列表项出现弹窗，点击删除按钮，中间弹出删除确认框，点击确认按钮删除完毕
  
• 长按列表项出现弹窗，底部弹出文件详情弹框
  

实现思路
定义弹窗的父布局builder,支持自定义弹窗内容传入，设置弹窗蒙层。

1. @Builder
2. export function DialogBuilder(param: EncapsulateDialogBuilderParam) {
3.   Stack({ alignContent: getAlignment(param.dialogType) }) {
4.     Stack()
5.       .width('100%')
6.       .height('300%')
7.       .backgroundColor(0x33000000)
8.       .onClick(() => {
9.         if (param.isModalClosedByOverlayClick) {
10.           param.closeDialog!();
11.         }
12.       })
13.     param.builder.builder({ onConfirm: param.onConfirm, closeDialog: param.closeDialog, data: param.data })
15.   }.width('100%')
16.   .height('100%')
17. }

复制代码

1、使用openCustomDialog接口，该接口可支持传入builder。

1. public static showCustomDialog(param: DialogParam): void {
2.    if (!DialogUtil.uiContext) {
3.      return;
4.    }
5.    let promptAction = DialogUtil.uiContext.getPromptAction();
6.    let encapsulateParam: EncapsulateDialogBuilderParam = DialogUtil.transformDialogParamToEncapsulateDialogBuilderParam(param);
7.    let compCont = new ComponentContent(DialogUtil.uiContext, wrapBuilder(DialogBuilder), encapsulateParam);
8.    // 设置了弹窗id即可将其与弹窗关联起来，后续可凭据弹窗id关闭弹窗
9.    if (param.dialogId) {
10.      DialogUtil.compContMap.set(param.dialogId, compCont);
11.    }
12.    DialogUtil.fillCancelMethod(encapsulateParam, promptAction, compCont, param.dialogId);
13.    DialogUtil.fillConfirmMethod(encapsulateParam, promptAction, compCont, param.dialogId);
14.    compCont.update(encapsulateParam);
15.    let options: promptAction.BaseDialogOptions = DialogUtil.dealSlideToClose(param);
16.    promptAction.openCustomDialog(compCont, options);
17. }

复制代码

2、自定义关闭弹窗回调。

1.   private static fillCancelMethod(param: EncapsulateDialogBuilderParam, promptAction: PromptAction,
2.     compCont: ComponentContent<DialogParam>, dialogId: string | undefined) {
3.     let customCancel = param.closeDialog;
4.     let cancelDialog = () => {
5.       if (customCancel) {
6.         customCancel();
7.       }
8.       if (dialogId) {
9.         DialogUtil.compContMap.delete(dialogId);
10.       }
11.       promptAction.closeCustomDialog(compCont);
12.       // 关闭弹框之后释放对应的ComponentContent
13.       compCont.dispose();
14.     };
15.     param.closeDialog = cancelDialog;
16.   }

复制代码

3、自定义弹窗弹出动效。

1. /**
2. * 顶部弹出动画
3. * @param duration 动画时间
4. * @returns
5. */
6. static transitionFromUp(duration: number = 200): TransitionEffect {
7.   return TransitionEffect.asymmetric(
8.     TransitionEffect.OPACITY.animation({ duration: duration }).combine(
9.       TransitionEffect.move(TransitionEdge.TOP).animation({ duration: duration })),
10.     TransitionEffect.OPACITY.animation({ delay: duration, duration: duration }).combine(
11.       TransitionEffect.move(TransitionEdge.TOP).animation({ duration: duration }))
12.   )
13. }

复制代码

使用步骤

1、初始化DialogUtil，需调用其init方法将UIContext传入。

1.   aboutToAppear(): void {
2.     DialogUtil.init(this.getUIContext());
3.     ...
4.   }

复制代码

2、定义弹窗builder，该builder必须有且只有DialogBuilderParam参数。

1. @Builder
2. export function addFileDialogBuilder(param: DialogBuilderParam) {
3.   AddFileComponent({ param: param })
4. }

复制代码

3、定义弹窗封装组件，该组件内部必须有DialogBuilderParam参数且使用@Prop注解。

1. @Component
2. export struct AddFileComponent {
3.   @Prop param: DialogBuilderParam;
4.   ...
5. }

复制代码

4、以上就封装好了自定义弹窗，接下来使用只需要调用一下showCustomDialog方法,将对应弹窗封装的builder传入。

1.   showFileInfo(item: FileItem) {
2.     // 打开筛选弹窗
3.     DialogUtil.showCustomDialog({
4.       builder: wrapBuilder(fileInfoDialogBuilder),
5.       dialogType: DialogTypeEnum.BOTTOM,
6.       dialogBuilderParam: {
7.         data: item
8.       }
9.     })
10.   }

复制代码

总结：

本案例依赖动态路由模块来实现页面的动态加载。
如果你想系统性学习 或者准备考取 华为官方开发者认证 ，请加入我的班级：
请点击→HarmonyOS开发者学堂


来源：程序园用户自行投稿发布，如果侵权，请联系站长删除
免责声明：如果侵犯了您的权益，请联系站长，我们会及时删除侵权内容，谢谢合作！