Jetpack Compose 实战：如何优雅地封装全局弹窗-洪萨配资

在开发 Compose 应用时，弹窗管理往往是一个让人头疼的问题。

通常会把Dialog代码直接写在 UI 组件内部：

@Composable fun HomeScreen() { var showDialog by remember { mutableStateOf(false) } if (showDialog) { AlertDialog( ... ) } }

这种写法在简单的 Demo 里没问题，但在企业级项目里，它有三个致命痛点：

代码冗余：每个页面都要写一遍AlertDialog的模板代码。
耦合度高：ViewModel 想要弹窗，必须通过 LiveData/StateFlow 层层回调给 UI 层。
无法全局覆盖：如果我想在网络请求拦截器里弹出一个“登录失效”的弹窗，这种局部写法根本做不到。

今天，我们就来设计一套基于单例状态管理的全局弹窗方案，让你在 App 的任何角落（包括 ViewModel 和纯 Kotlin 类中）都能一句话唤起弹窗。

1. 核心思路：状态提升到顶层

Compose 的本质是“状态驱动 UI”。要实现全局弹窗，我们只需要做两件事：

状态源：搞一个单例对象（Controller），专门存“当前要显示什么弹窗”。
渲染层：在MainActivity的最顶层放一个“宿主组件”（Host），监听上面的状态源。

只要状态源一变，宿主组件就会自动重组，显示或隐藏弹窗。

2. 第一步：定义弹窗模型

首先，我们需要用密封类（Sealed Class）来描述“弹窗”长什么样。

// DialogEvent.kt sealed class DialogEvent { // 1. 空状态（不显示弹窗） data object None : DialogEvent() // 2. 通用警告弹窗 data class Alert( val title: String, val message: String, val confirmText: String = "确定", val onConfirm: (() -> Unit)? = null, val cancelText: String? = "取消", val onCancel: (() -> Unit)? = null ) : DialogEvent() // 3. 全局 Loading 弹窗（可选） data class Loading(val message: String = "加载中...") : DialogEvent() }

3. 第二步：打造全局控制器

这个单例对象是整个方案的大脑。它持有一个StateFlow，供 UI 层监听。

// DialogController.kt import kotlinx.coroutines.flow.MutableStateFlow import kotlinx.coroutines.flow.asStateFlow object DialogController { private val _dialogState = MutableStateFlow<DialogEvent>(DialogEvent.None) val dialogState = _dialogState.asStateFlow() /** * 显示通用弹窗 */ fun show( title: String, message: String, confirmText: String = "确定", cancelText: String? = "取消", onConfirm: (() -> Unit)? = null, onCancel: (() -> Unit)? = null ) { _dialogState.value = DialogEvent.Alert( title = title, message = message, confirmText = confirmText, cancelText = cancelText, onConfirm = { onConfirm?.invoke() dismiss() // 点击确认后自动关闭 }, onCancel = { onCancel?.invoke() dismiss() // 点击取消后自动关闭 } ) } /** * 显示 Loading */ fun showLoading(message: String = "加载中...") { _dialogState.value = DialogEvent.Loading(message) } /** * 关闭弹窗 */ fun dismiss() { _dialogState.value = DialogEvent.None } }

4. 第三步：构建宿主组件 (Host)

这个组件就像一个“播放器”，它负责把DialogEvent渲染成真正的 Compose UI。

// GlobalDialogHost.kt @Composable fun GlobalDialogHost() { // 监听全局状态 val dialogState by DialogController.dialogState.collectAsState() when (val state = dialogState) { is DialogEvent.None -> { // 什么都不做 } is DialogEvent.Alert -> { AlertDialog( onDismissRequest = { DialogController.dismiss() }, title = { Text(state.title) }, text = { Text(state.message) }, confirmButton = { TextButton(onClick = { state.onConfirm?.invoke() }) { Text(state.confirmText) } }, dismissButton = { state.cancelText?.let { TextButton(onClick = { state.onCancel?.invoke() }) { Text(it) } } } ) } is DialogEvent.Loading -> { // 这里可以自定义一个全屏透明背景的 Loading Dialog(onDismissRequest = { /* 禁止点击外部关闭 */ }) { Box( modifier = Modifier .size(120.dp) .background(Color.White, RoundedCornerShape(8.dp)), contentAlignment = Alignment.Center ) { Column(horizontalAlignment = Alignment.CenterHorizontally) { CircularProgressIndicator() Spacer(Modifier.height(16.dp)) Text(state.message) } } } } } }

5. 第四步：接入到 MainActivity

这是最后也是最关键的一步。我们需要把GlobalDialogHost放在整个 App 的最顶层（通常在NavHost的外面）。

这样做的目的是：无论页面如何跳转，弹窗永远悬浮在最上层，不会随着页面销毁而消失。

// MainActivity.kt class MainActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { super.onCreate(savedInstanceState) setContent { AppTheme { // 使用 Box 叠加布局 Box(modifier = Modifier.fillMaxSize()) { // 1. 你的主界面 / 导航图 AppNavHost() // 2. 全局弹窗宿主 (一定要放在最后，确保 z-index 最高) GlobalDialogHost() } } } } }

6. 使用演示

现在，这套系统已经搭建完毕。看看我们在 ViewModel 里调用有多爽：

class UserViewModel : ViewModel() { fun deleteUser() { // 直接调用，无需 Context，无需 View 引用 DialogController.show( title = "警告", message = "确定要删除该用户吗？此操作无法撤销。", onConfirm = { // 执行删除逻辑 performDelete() } ) } fun loadData() { viewModelScope.launch { DialogController.showLoading() try { // 模拟网络请求 delay(2000) } catch (e: Exception) { DialogController.show("错误", "网络请求失败") } finally { DialogController.dismiss() } } } }

7. 总结

这套方案的优势在于：

完全解耦：ViewModel 不需要知道 UI 是怎么画的，只负责发指令。
全局可用：不管是网络拦截器、Service 还是工具类，只要能访问DialogController单例，就能弹窗。
生命周期安全：基于 Compose 状态机制，不会出现传统 View 体系中WindowLeaked或Can not perform this action after onSaveInstanceState的崩溃问题。

可以根据项目需求，在DialogEvent里扩展更多类型（如Toast,BottomSheet），原理都是一样的。