🎒 在 Compose 的世界里,状态 就像书包里的文具 —— 你随时需要,也要知道怎么整理。 这一节我们从零理解“什么是状态”、“为什么需要管理”以及 Compose 的核心理念。
状态 (State) 是 UI 中任何随时间变化的数据。在 Android Compose 中,状态决定了界面长什么样。
| 生活中的例子 | Compose 中的状态 |
|---|---|
| 📱 手机音量 | var volume by remember { mutableStateOf(50) } |
| ✅ 复选框勾选 | var isChecked by remember { mutableStateOf(false) } |
| 📝 输入框文字 | var text by remember { mutableStateOf("") } |
| 🔄 网络加载中 | var isLoading by remember { mutableStateOf(true) } |
简单来说:状态 = 数据 + 变化。当状态改变,Compose 会自动重新绘制相关的 UI 部分。
没有管理的状态就像散落的积木 —— 能搭,但一碰就倒。来看几个痛点:
而好的状态管理能带来:
Compose 采用 声明式 + 观察者模式。核心公式:
UI = f(State)
界面是状态的函数,状态变化 → UI 自动更新
mutableStateOf / StateFlow 等。下面展示一个简单的 计数器,体现 Compose 状态管理风格:
// 可复用的无状态组件 —— 只负责展示
@Composable
fun CounterDisplay(
count: Int, // 👈 状态提升到外部
onIncrement: () -> Unit, // 👈 事件向上传递
onReset: () -> Unit
) {
Column(horizontalAlignment = Alignment.CenterHorizontally) {
Text("当前计数: $count", style = MaterialTheme.typography.headlineMedium)
Button(onClick = onIncrement) { Text("➕ 增加") }
OutlinedButton(onClick = onReset) { Text("↺ 重置") }
}
}
// 父组件 —— 持有状态,管理逻辑
@Composable
fun CounterScreen() {
var count by remember { mutableStateOf(0) }
CounterDisplay(
count = count,
onIncrement = { count++ },
onReset = { count = 0 }
)
}
✅ 状态 count 被提升到 CounterScreen,CounterDisplay 完全无状态,便于测试和复用。
| 方式 | 作用域 | 适用场景 | 特点 |
|---|---|---|---|
remember | 当前 Composable | 简单局部状态 | 随重组保留,配置变更丢失 |
rememberSaveable | 当前 Composable | 需要屏幕旋转保留 | 通过 Bundle 保存 |
ViewModel | Activity / Fragment | 复杂业务逻辑 | 生命周期感知,配置变更保留 |
StateFlow | 跨层/跨组件 | 异步数据流 | 冷流,配合 collectAsState |
📝 小结 · 状态管理三要素