济南市网站建设_网站建设公司_ASP.NET_seo优化

前言：

本案例将介绍如何封装弹窗，以及如何使用这种封装后的弹窗

效果图预览

使用讲解

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

实现思路

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

@Builder
export function DialogBuilder(param: EncapsulateDialogBuilderParam) {Stack({ alignContent: getAlignment(param.dialogType) }) {Stack().width('100%').height('300%').backgroundColor(0x33000000).onClick(() => {if (param.isModalClosedByOverlayClick) {param.closeDialog!();}})param.builder.builder({ onConfirm: param.onConfirm, closeDialog: param.closeDialog, data: param.data })}.width('100%').height('100%')
}

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

public static showCustomDialog(param: DialogParam): void {if (!DialogUtil.uiContext) {return;}let promptAction = DialogUtil.uiContext.getPromptAction();let encapsulateParam: EncapsulateDialogBuilderParam = DialogUtil.transformDialogParamToEncapsulateDialogBuilderParam(param);let compCont = new ComponentContent(DialogUtil.uiContext, wrapBuilder(DialogBuilder), encapsulateParam);// 设置了弹窗id即可将其与弹窗关联起来，后续可凭据弹窗id关闭弹窗if (param.dialogId) {DialogUtil.compContMap.set(param.dialogId, compCont);}DialogUtil.fillCancelMethod(encapsulateParam, promptAction, compCont, param.dialogId);DialogUtil.fillConfirmMethod(encapsulateParam, promptAction, compCont, param.dialogId);compCont.update(encapsulateParam);let options: promptAction.BaseDialogOptions = DialogUtil.dealSlideToClose(param);promptAction.openCustomDialog(compCont, options);
}

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

  private static fillCancelMethod(param: EncapsulateDialogBuilderParam, promptAction: PromptAction,compCont: ComponentContent<DialogParam>, dialogId: string | undefined) {let customCancel = param.closeDialog;let cancelDialog = () => {if (customCancel) {customCancel();}if (dialogId) {DialogUtil.compContMap.delete(dialogId);}promptAction.closeCustomDialog(compCont);// 关闭弹框之后释放对应的ComponentContentcompCont.dispose();};param.closeDialog = cancelDialog;}

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

/*** 顶部弹出动画* @param duration 动画时间* @returns*/
static transitionFromUp(duration: number = 200): TransitionEffect {return TransitionEffect.asymmetric(TransitionEffect.OPACITY.animation({ duration: duration }).combine(TransitionEffect.move(TransitionEdge.TOP).animation({ duration: duration })),TransitionEffect.OPACITY.animation({ delay: duration, duration: duration }).combine(TransitionEffect.move(TransitionEdge.TOP).animation({ duration: duration })))
}

使用步骤

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

  aboutToAppear(): void {DialogUtil.init(this.getUIContext());...}

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

@Builder
export function addFileDialogBuilder(param: DialogBuilderParam) {AddFileComponent({ param: param })
}

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

@Component
export struct AddFileComponent {@Prop param: DialogBuilderParam;...
}

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

  showFileInfo(item: FileItem) {// 打开筛选弹窗DialogUtil.showCustomDialog({builder: wrapBuilder(fileInfoDialogBuilder),dialogType: DialogTypeEnum.BOTTOM,dialogBuilderParam: {data: item}})}

总结：

本案例依赖动态路由模块来实现页面的动态加载。

---

如果你想系统性学习 或者准备考取 华为官方开发者认证 ，请加入我的班级：

请点击→HarmonyOS开发者学堂