Android Compose 应用中实现全局Dialog管理器的设计与实践

文章目录前言一、传统 Dialog 实现的问题二、全局状态管理的实现1.CompositionLocal 介绍2.全局状态管理应用①. 定义 CompositionLocal②. 抽象基类设计③. 具体 Dialog 参数类型实现④. 全局 Dialog 组件3.实现 DialogManager设计优势4.实际应用①. 提供全局状态②. 使用③. 效果总结前言在 Android Compose 开发中Dialog 的使用确实非常常见。然而传统的 Dialog 实现方式往往存在一些问题比如状态管理混乱、重复代码多、难以维护等。本文将详细介绍一个完整的全局Dialog管理器设计与实践展示如何优雅地管理各种类型的对话框。一、传统 Dialog 实现的问题传统的 Compose Dialog 实现通常存在以下问题状态管理混乱每个组件都需要单独管理 Dialog 的显示状态代码重复相似的 Dialog 结构重复出现在多个地方难以扩展新增Dialog 类型需要修改多个文件生命周期管理困难容易出现内存泄漏或状态不一致二、全局状态管理的实现1.CompositionLocal 介绍CompositionLocal 是 Jetpack Compose 中的一个重要概念用于在组合树中隐式传递数据的机制特别适用于全局状态管理场景。2.全局状态管理应用①. 定义 CompositionLocal/** * 对话框状态数据类 * property dialogs 对话框参数列表 */dataclassDialogState(valdialogs:ListDialogParamsemptyList())/** * 全局对话框状态 */valdialogStatemutableStateOf(DialogState())/** * 定义 CompositionLocal 创建本地状态提供者 */valLocalDialogstaticCompositionLocalOf{mutableStateOf(DialogState())}②. 抽象基类设计/** * 对话框参数基类定义了对话框的基本属性 * property id 对话框唯一标识符默认使用UUID生成 * property visible 对话框是否可见 * property isAnimateDismiss 是否动画关闭 */abstractclassDialogParams{abstractvalid:Stringabstractvalvisible:BooleanabstractvalisAnimateDismiss:BooleanfuncopyWith(id:Stringthis.id,visible:Booleanthis.visible,isAnimateDismiss:Booleanthis.isAnimateDismiss):DialogParams{returnwhen(this){isSexPickerDialogParam-copy(idid,visiblevisible,isAnimateDismissisAnimateDismiss)isUnitPickerDialogParam-copy(idid,visiblevisible,isAnimateDismissisAnimateDismiss)//...//TODO 新增加弹窗类型须实现基类copyWith。Compose 使用结构相等性检查只有当 dialogState.value 指向新对象时才会重组// 如果只改变列表中的元素DialogParams 对象的属性仍然是原来的对象实例。Compose 在比较状态时列表中的对象引用没有变化从而不触发重组// 因此修改对话框参数的属性时请使用 copyWith 方法else-this}}}③. 具体 Dialog 参数类型实现/** * 性别选择对话框参数 * property id 对话框唯一标识符 * property visible 对话框是否可见 * property isAnimateDismiss 是否动画关闭 * property defValue 默认选中的性别值 * property onConfirm 选择确认回调函数 */dataclassSexPickerDialogParam(overridevalid:StringUUID.randomUUID().toString(),overridevalvisible:Booleanfalse,overridevalisAnimateDismiss:Booleanfalse,valdefValue:Int-1,valonConfirm:(Int)-Unit{}):DialogParams()/** * 单位选择对话框参数 * property id 对话框唯一标识符 * property visible 对话框是否可见 * property isAnimateDismiss 是否动画关闭 * property defValue 默认选中的单位值 * property onConfirm 选择确认回调函数 */dataclassUnitPickerDialogParam(overridevalid:StringUUID.randomUUID().toString(),overridevalvisible:Booleanfalse,overridevalisAnimateDismiss:Booleanfalse,valdefValue:Int-1,valonConfirm:(Int)-Unit{}):DialogParams()//...④. 全局 Dialog 组件CommonDialog 、WheelPicker 参考之前的博客/** * 弹窗动画时间 */constvalanimationDurationDialogDefTimeMillis/** * 全局对话框组件负责渲染所有需要显示的对话框 */ComposablefunGlobalDialog(){valcustomColorsLocalCustomColors.currentvallocalDialogStateDialogManager.LocalDialog.currentvalcurrentStatelocalDialogState.value currentState.dialogs.forEach{dialogParam-when(dialogParam){isSexPickerDialogParam-{varselectedDatadialogParam.defValueif(dialogParam.visible){CommonDialog(onDismissRequest{DialogManager.dismissRequest(dialogParam.id)},propertiesDialogProperties(usePlatformDefaultWidthfalse),timeMillisanimationDuration,enterslideInVertically(initialOffsetY{it},animationSpectween(animationDuration)),exitslideOutVertically(targetOffsetY{it},animationSpectween(animationDuration)),isAnimateDismissdialogParam.isAnimateDismiss,boxContentAlignmentAlignment.BottomCenter,){Column(modifierModifier.fillMaxWidth().background(colorcustomColors.dialogBackground,shapeRoundedCornerShape(topStart16.dp,topEnd16.dp)),verticalArrangementArrangement.Bottom){valmaleTextstringResource(R.string.user_info_male)valfemaleTextstringResource(R.string.user_info_female)valsexListlistOf(0,1)Box(modifierModifier.fillMaxWidth().defaultMinSize(minHeight200.dp),contentAlignmentAlignment.Center){WheelPicker(modifierModifier.fillMaxWidth(),itemssexList,propertiesPickerProperties(itemHeight40.dp,itemSpace10.dp,extraRow1,isLoopingfalse),onItemSelected{index,item-selectedDataitem},selectedIndexif(dialogParam.defValue!-1)sexList.indexOf(dialogParam.defValue)else0,selectOverlay{Box(modifierModifier.fillMaxWidth().height(40.dp).background(colorColor.Gray.copy(alpha0.2f)))},itemContent{index,item,isItemSelected-Text(textwhen(item){0-maleText1-femaleTextelse-},fontSize21.sp,colorif(isItemSelected)customColors.textPrimaryelsecustomColors.textSecondary)})}DialogBottomButton(leftTextStrstringResource(R.string.dialog_cancel_btn),rightTextStrstringResource(R.string.dialog_confirm_btn),leftTextColorcustomColors.textSecondary,rightTextColorcustomColors.appTheme,onLeftTextClick{dialogParam.onConfirm(dialogParam.defValue)DialogManager.dismissDialogById(dialogParam.id)},onRightTextClick{dialogParam.onConfirm(selectedData)DialogManager.dismissDialogById(dialogParam.id)})}}}}isUnitPickerDialogParam-{varselectedDatadialogParam.defValueif(dialogParam.visible){CommonDialog(onDismissRequest{DialogManager.dismissRequest(dialogParam.id)},propertiesDialogProperties(usePlatformDefaultWidthfalse),timeMillisanimationDuration,enterslideInVertically(initialOffsetY{it},animationSpectween(animationDuration)),exitslideOutVertically(targetOffsetY{it},animationSpectween(animationDuration)),isAnimateDismissdialogParam.isAnimateDismiss,boxContentAlignmentAlignment.BottomCenter,){Column(modifierModifier.fillMaxWidth().background(colorcustomColors.dialogBackground,shapeRoundedCornerShape(topStart16.dp,topEnd16.dp)),verticalArrangementArrangement.Bottom){valmetricStrstringResource(R.string.user_info_unit_metric)valimperialStrstringResource(R.string.user_info_unit_imperial)valunitListlistOf(0,1)Box(modifierModifier.fillMaxWidth().defaultMinSize(minHeight200.dp),contentAlignmentAlignment.Center){WheelPicker(modifierModifier.fillMaxWidth(),itemsunitList,propertiesPickerProperties(itemHeight40.dp,itemSpace10.dp,extraRow1,isLoopingfalse),onItemSelected{index,item-selectedDataitem},selectedIndexif(dialogParam.defValue!-1)unitList.indexOf(dialogParam.defValue)else0,selectOverlay{Box(modifierModifier.fillMaxWidth().height(40.dp).background(colorColor.Gray.copy(alpha0.2f)))},itemContent{index,item,isItemSelected-Text(textwhen(item){0-metricStr1-imperialStrelse-},fontSize21.sp,colorif(isItemSelected)customColors.textPrimaryelsecustomColors.textSecondary)})}DialogBottomButton(leftTextStrstringResource(R.string.dialog_cancel_btn),rightTextStrstringResource(R.string.dialog_confirm_btn),leftTextColorcustomColors.textSecondary,rightTextColorcustomColors.appTheme,onLeftTextClick{dialogParam.onConfirm(dialogParam.defValue)DialogManager.dismissDialogById(dialogParam.id)},onRightTextClick{dialogParam.onConfirm(selectedData)DialogManager.dismissDialogById(dialogParam.id)})}}}}//...else-{}}}}//region 预览Preview(showSystemUitrue)ComposablefunGlobalDialogPreview(){// 创建一个临时的状态用于预览valpreviewStateremember{mutableStateOf(DialogManager.DialogState(dialogslistOf(SexPickerDialogParam(visibletrue,defValue0,onConfirm{println(Selected sex:$it)}))))}// 使用临时状态进行预览CompositionLocalProvider(DialogManager.LocalDialog provides previewState){GlobalDialog()}}//endregion3.实现 DialogManager/** * 对话框管理器用于统一管理和显示各种类型的对话框 */objectDialogManager{/** * 定义 CompositionLocal 创建本地状态提供者 */valLocalDialogstaticCompositionLocalOf{mutableStateOf(DialogState())}/** * 对话框状态数据类 * property dialogs 对话框参数列表 */dataclassDialogState(valdialogs:ListDialogParamsemptyList())//TODO 新增加弹窗类型须实现基类copyWith。Compose 使用结构相等性检查只有当 dialogState.value 指向新对象时才会重组// 如果只改变列表中的元素DialogParams 对象的属性仍然是原来的对象实例。Compose 在比较状态时列表中的对象引用没有变化从而不触发重组// 因此修改对话框参数的属性时请使用 copyWith 方法/** * 全局对话框状态 */valdialogStatemutableStateOf(DialogState())/** * 对话框待显示队列用于处理对话框切换时的动画冲突 */privatevalpendingDialogQueuemutableListOfDialogParams()/** * 标记是否正在执行关闭动画 */privatevarisDismissingfalse/** * 处理对话框请求关闭事件,并移除已关闭的对话框缓存 * param dialogId 要关闭的对话框ID */fundismissRequest(dialogId:String){valcurrentDialogsdialogState.value.dialogsvalindexcurrentDialogs.indexOfFirst{it.iddialogId}if(index-1)return//关闭弹窗valupdatedDialogscurrentDialogs.toMutableList().apply{set(index,this[index].copyWith(visiblefalse,isAnimateDismissfalse))}//移除已关闭的对话框valfilteredDialogsupdatedDialogs.filter{it.id!dialogId}//更新全局对话框状态dialogState.valuedialogState.value.copy(dialogsfilteredDialogs)//启用队列缓存的所有弹窗isDismissingfalseif(pendingDialogQueue.isNotEmpty()){pendingDialogQueue.forEach{showDialogInternal(it)}pendingDialogQueue.clear()}}/** * 执行指定ID的对话框关闭动画 * * Dialog.onDismissRequest 方法中需实现 dismissRequest(dialogId) * * (执行关闭动画后由 Dialog - onDismissRequest - dismissRequest - visible false 路径关闭弹窗) * * param dialogId 对话框ID */fundismissDialogById(dialogId:String){valcurrentDialogsdialogState.value.dialogsvalindexcurrentDialogs.indexOfFirst{it.iddialogId}if(index-1)returnvalupdatedDialogscurrentDialogs.toMutableList().apply{set(index,this[index].copyWith(isAnimateDismisstrue))}isDismissingtruedialogState.valuedialogState.value.copy(dialogsupdatedDialogs)}/** * 关闭指定类型的全部对话框 * param T 对话框类型 */inlinefunreifiedT:DialogParamsdismissDialogsByType(){valcurrentDialogsdialogState.value.dialogsvaldialogsToDismisscurrentDialogs.filterIsInstanceT()if(dialogsToDismiss.isEmpty())returndialogsToDismiss.forEach{dismissDialogById(it.id)}}/** * 执行所有对话框关闭动画 */fundismissAllDialogs(){valcurrentDialogsdialogState.value.dialogs currentDialogs.forEach{dismissDialogById(it.id)}}/** * 直接显示对话框 * param dialog 要显示的对话框参数 */privatefunshowDialogInternal(dialog:DialogParams){dialogState.valuedialogState.value.copy(dialogsdialogState.value.dialogsdialog)}/** * 加入队列或显示对话框 * 当有弹窗正在关闭时将新对话框加入队列等待关闭完成后显示避免动画冲突 * * param dialog 要显示的对话框参数 */privatefunenqueueOrShowDialog(dialog:DialogParams){if(isDismissing){pendingDialogQueue.add(dialog)}else{showDialogInternal(dialog)}}/** * 显示性别选择对话框 * param defValue 默认值 * param onConfirm 选择回调 * return 对话框ID */funshowSexPickerDialog(defValue:Int,onConfirm:(Int)-Unit):String{// 同类型弹窗只能显示一个的话则关闭现有的所有性别选择对话框// dismissDialogsByTypeSexPickerDialogParam()// 创建新对话框参数valnewDialogSexPickerDialogParam(visibletrue,isAnimateDismissfalse,defValuedefValue,onConfirmonConfirm)enqueueOrShowDialog(newDialog)returnnewDialog.id}/** * 显示单位选择对话框 * param defValue 默认值 * param onConfirm 选择回调 * return 对话框ID */funshowUnitPickerDialog(defValue:Int,onConfirm:(Int)-Unit):String{// 创建新对话框参数valnewDialogUnitPickerDialogParam(visibletrue,isAnimateDismissfalse,defValuedefValue,onConfirmonConfirm)enqueueOrShowDialog(newDialog)returnnewDialog.id}//...}设计优势统一管理所有对话框逻辑集中处理便于维护和扩展单一数据源DialogManager.dialogState 作为全局对话框状态的唯一来源解耦合UI 组件不需要直接持有对话框实例降低了组件间的耦合度易用性简单的 API 接口方便在应用的任何地方调用对话框状态集中化所有对话框的状态显示/隐藏、类型、参数等都存储在一个 DialogState 对象中响应式更新DialogManager.dialogState状态变化时的自动 UI 更新基于状态的响应式更新只有需要更新的组件才会重组可扩展性新增 Dialog 类型只需继承 DialogParams 并在 GlobalDialog() 中添加相应逻辑。4.实际应用①. 提供全局状态/** * 在 BaseComposeActivity 中通过 CompositionLocalProvider 提供全局对话框状态 * 所有子组件都能访问同一份状态数据 */abstractclassBaseComposeActivity:ComponentActivity(){//...overridefunonCreate(savedInstanceState:Bundle?){super.onCreate(savedInstanceState)enableEdgeToEdge()setContent{AppTheme{CompositionLocalProvider(DialogManager.LocalDialog provides DialogManager.dialogState){ProviderContent()GlobalDialog()}}}}ComposableabstractfunProviderContent()//...}②. 使用// 任意需要显示性别选择对话框调用valdialogIdDialogManager.showSexPickerDialog(defValue0){selectedValue-// 处理选择结果when(selectedValue){0-{/* 男性 */}1-{/* 女性 */}}}// 需要关闭对话框DialogManager.dismissDialogById(dialogId)③. 效果全局Compose Dialog管理总结这个 DialogManager 设计模式提供了一个完整的解决方案不仅解决了传统 Dialog 实现的问题还提供了良好的扩展性和维护性。通过抽象化设计使得新增 Dialog 类型变得简单同时保持了代码的整洁和一致性。这种模式特别适合需要大量交互界面的复杂应用。