【Android之路】界面和状态交互

Jetpack Compose 中的界面与状态交互全解析 ------ 以 TipTime 示例为例

本文将通过一个完整的 小费计算应用（TipTime） 示例，深入讲解 Jetpack Compose 中的状态管理、界面与状态的交互、以及如何在 Compose 世界里构建响应式 UI。本文适合 初学者 和 想要深入理解 Compose 状态机制 的 Android 开发者。

1. 为什么要理解状态与界面交互？

在传统 Android 开发（基于 XML + View）的世界里，我们通过 findViewById 获取视图，然后在用户操作时修改视图的内容。例如，当输入框的内容发生变化时，我们需要手动监听输入事件并更新 UI。这种方式有以下缺点：

繁琐的样板代码：需要不断绑定控件、设置监听器、手动更新 UI。
容易产生状态不同步：UI 与数据状态分离，修改一方时容易忘记更新另一方。
可读性差，维护困难：UI 逻辑和数据逻辑分散在不同位置。

Jetpack Compose 则通过 声明式 UI + 响应式状态 彻底改变了这一点：

UI 是状态的函数：只要状态发生变化，界面会自动重组（Recompose）。
状态是单一数据源：界面不直接持有数据，而是订阅状态。
代码简洁易维护：不用写一堆 findViewById 和监听器。

结论：理解状态与界面交互是学会 Compose 的关键！

2. 项目简介与代码概览

本文使用的示例是一个简单的 小费计算器。它的功能包括：

输入消费金额
输入小费百分比
可选是否将小费金额向上取整
实时显示计算后的结果

主要文件是 MainActivity.kt，代码结构如下：

kotlin 复制代码

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        enableEdgeToEdge()
        super.onCreate(savedInstanceState)
        setContent {
            TipTimeTheme {
                Surface(
                    modifier = Modifier.fillMaxSize(),
                ) {
                    TipTimeLayout()
                }
            }
        }
    }
}

UI 核心部分在 TipTimeLayout() 中定义：

kotlin 复制代码

@Composable
fun TipTimeLayout() {
    var amountInput by remember { mutableStateOf("") }
    var tipInput by remember { mutableStateOf("") }
    var roundUp by remember { mutableStateOf(false) }

    val amount = amountInput.toDoubleOrNull() ?: 0.0
    val tipPercent = tipInput.toDoubleOrNull() ?: 0.0
    val tip = calculateTip(amount, tipPercent, roundUp)

    Column(
        modifier = Modifier
            .statusBarsPadding()
            .padding(horizontal = 40.dp)
            .verticalScroll(rememberScrollState())
            .safeDrawingPadding(),
        horizontalAlignment = Alignment.CenterHorizontally,
        verticalArrangement = Arrangement.Center
    ) {
        Text(
            text = stringResource(R.string.calculate_tip),
            modifier = Modifier
                .padding(bottom = 16.dp, top = 40.dp)
                .align(alignment = Alignment.Start)
        )
        EditNumberField(
            label = R.string.bill_amount,
            leadingIcon = R.drawable.money,
            keyboardOptions = KeyboardOptions.Default.copy(
                keyboardType = KeyboardType.Number,
                imeAction = ImeAction.Next
            ),
            value = amountInput,
            onValueChanged = { amountInput = it },
            modifier = Modifier.padding(bottom = 32.dp).fillMaxWidth(),
        )
        EditNumberField(
            label = R.string.how_was_the_service,
            leadingIcon = R.drawable.percent,
            keyboardOptions = KeyboardOptions.Default.copy(
                keyboardType = KeyboardType.Number,
                imeAction = ImeAction.Done
            ),
            value = tipInput,
            onValueChanged = { tipInput = it },
            modifier = Modifier.padding(bottom = 32.dp).fillMaxWidth(),
        )
        RoundTheTipRow(
            roundUp = roundUp,
            onRoundUpChanged = { roundUp = it },
            modifier = Modifier.padding(bottom = 32.dp)
        )
        Text(
            text = stringResource(R.string.tip_amount, tip),
            style = MaterialTheme.typography.displaySmall
        )
        Spacer(modifier = Modifier.height(150.dp))
    }
}

3. Jetpack Compose 中的状态管理基础

3.1 `remember` 与 `mutableStateOf`

mutableStateOf(value)

创建一个可观察的状态对象，当值变化时触发 UI 重组。
remember { ... }

在重组过程中保存状态，确保重组时不会重新创建新状态导致数据丢失。

kotlin 复制代码

var amountInput by remember { mutableStateOf("") }

amountInput 是一个字符串状态，初始值为空。
每次用户输入新内容时，这个状态都会更新。
因为用 remember 包裹，所以在界面重组时不会丢失数据。

⚠️ 如果不使用 remember，每次重组时状态会被重新初始化，导致输入框内容丢失。

3.2 `by` 与属性代理

kotlin 复制代码

var amountInput by remember { mutableStateOf("") }

等价于：

kotlin 复制代码

val state = remember { mutableStateOf("") }
var amountInput: String
    get() = state.value
    set(value) { state.value = value }

by + Kotlin 属性代理让代码更简洁，直接通过 amountInput 访问状态值，而无需写 .value。

3.3 状态是如何驱动 UI 的

Compose 的核心理念 ：UI = f(State)

在 TextField 中，我们把状态和输入框绑定：

kotlin 复制代码

TextField(
    value = amountInput,
    onValueChange = { amountInput = it }
)

value = amountInput：UI 显示当前状态值。
onValueChange = { amountInput = it }：当用户输入时更新状态。

一旦状态值更新，Compose 自动触发重组（Recomposition），重新执行 Composable 函数并刷新界面。

4. 分解 TipTimeLayout 中的状态交互

4.1 输入金额

kotlin 复制代码

EditNumberField(
    label = R.string.bill_amount,
    leadingIcon = R.drawable.money,
    keyboardOptions = KeyboardOptions.Default.copy(
        keyboardType = KeyboardType.Number,
        imeAction = ImeAction.Next
    ),
    value = amountInput,
    onValueChanged = { amountInput = it },
    modifier = Modifier.padding(bottom = 32.dp).fillMaxWidth(),
)

用户在输入框中输入数字。
onValueChanged 接收到输入的新值（it）。
状态 amountInput 更新。
计算逻辑会使用新的 amountInput 重新计算小费。

4.2 输入小费百分比

kotlin 复制代码

EditNumberField(
    label = R.string.how_was_the_service,
    leadingIcon = R.drawable.percent,
    keyboardOptions = KeyboardOptions.Default.copy(
        keyboardType = KeyboardType.Number,
        imeAction = ImeAction.Done
    ),
    value = tipInput,
    onValueChanged = { tipInput = it },
    modifier = Modifier.padding(bottom = 32.dp).fillMaxWidth(),
)

逻辑与金额输入相同，只是状态变量换成了 tipInput。

4.3 是否向上取整

kotlin 复制代码

RoundTheTipRow(
    roundUp = roundUp,
    onRoundUpChanged = { roundUp = it },
    modifier = Modifier.padding(bottom = 32.dp)
)

Switch 控件绑定 roundUp 状态。
当用户切换开关时，onRoundUpChanged 将新值赋给 roundUp。
小费计算公式重新运行，UI 自动更新。

4.4 计算小费

kotlin 复制代码

private fun calculateTip(amount: Double, tipPercent: Double = 15.0, roundUp: Boolean): String {
    var tip = tipPercent / 100 * amount
    if (roundUp) {
        tip = kotlin.math.ceil(tip)
    }
    return NumberFormat.getCurrencyInstance().format(tip)
}

使用用户输入的金额和百分比计算小费。
根据 roundUp 决定是否向上取整。
最终返回格式化的货币字符串。

注意：calculateTip 不是 Composable，它是一个纯函数。

这体现了 Compose 推荐的 UI 与业务逻辑分离 思想。

5. 自定义可复用的输入组件 ------ EditNumberField

kotlin 复制代码

@Composable
fun EditNumberField(
    @StringRes label: Int,
    @DrawableRes leadingIcon: Int,
    keyboardOptions: KeyboardOptions,
    value: String,
    onValueChanged: (String) -> Unit,
    modifier: Modifier = Modifier
) {
    TextField(
        value = value,
        singleLine = true,
        leadingIcon = { Icon(painter = painterResource(id = leadingIcon), null) },
        modifier = modifier,
        onValueChange = onValueChanged,
        label = { Text(stringResource(label)) },
        keyboardOptions = keyboardOptions
    )
}

这个函数把 文本输入框 封装成了一个可复用组件。
接收外部的 value 和 onValueChanged ，实现 单向数据流：
- 父组件管理状态。
- 子组件只负责显示和回调。
@StringRes、@DrawableRes 注解用于 编译期资源类型检查，减少出错。

6. 自定义 Switch 行 ------ RoundTheTipRow

kotlin 复制代码

@Composable
fun RoundTheTipRow(
    roundUp: Boolean,
    onRoundUpChanged: (Boolean) -> Unit,
    modifier: Modifier = Modifier
) {
    Row(
        modifier = modifier.fillMaxWidth(),
        verticalAlignment = Alignment.CenterVertically
    ) {
        Text(text = stringResource(R.string.round_up_tip))
        Switch(
            modifier = Modifier
                .fillMaxWidth()
                .wrapContentWidth(Alignment.End),
            checked = roundUp,
            onCheckedChange = onRoundUpChanged
        )
    }
}

把一个带文字和开关的行封装成可复用组件。
roundUp 状态从外部传入，内部不持有状态，保证可预测性。
这种方式称为 无状态可组合项（Stateless Composable），推荐在 Compose 中使用。

7. Compose 状态管理的最佳实践

✅ 单一数据源（Single Source of Truth）

状态尽量在上层统一管理，避免在多个地方重复存储同一数据。
TipTimeLayout 就是单一数据源，它持有 amountInput、tipInput、roundUp。

✅ Stateless + State Hoisting

子组件（如 EditNumberField、RoundTheTipRow）不存储状态。
通过参数将状态和修改状态的方法传入。
好处：
- 组件更通用，易复用。
- 测试和维护更方便。

✅ remember + mutableStateOf

UI 状态用 remember { mutableStateOf(...) } 保存。
避免在 Composable 外部声明全局变量，否则会引发不可预期的问题。

✅ 避免副作用

状态变化应尽量只引发 UI 更新，不要在 Composable 中执行网络请求、数据库操作等副作用。
需要副作用时可以用 LaunchedEffect 、SideEffect 等工具。

8. 进阶：状态与性能优化

8.1 重组（Recomposition）

当状态更新时，Compose 会重新执行依赖该状态的 Composable。
并不是整个界面都刷新，Compose 会智能地 最小化重组范围。

8.2 `derivedStateOf`

当某个状态是由其他状态计算得出的，可以使用 derivedStateOf 避免重复计算：

kotlin 复制代码

val tip by derivedStateOf {
    calculateTip(amount, tipPercent, roundUp)
}

这样可以确保只在相关状态变化时才重新计算。

9. 与 ViewModel 配合管理状态

虽然 remember 足够处理简单页面的状态，但在实际项目中，我们常常需要 跨重组甚至跨页面保存数据 ，这时可以用 ViewModel：

kotlin 复制代码

class TipViewModel : ViewModel() {
    var amountInput by mutableStateOf("")
    var tipInput by mutableStateOf("")
    var roundUp by mutableStateOf(false)
}

在界面中使用：

kotlin 复制代码

@Composable
fun TipTimeLayout(viewModel: TipViewModel = viewModel()) {
    val amount = viewModel.amountInput.toDoubleOrNull() ?: 0.0
    val tipPercent = viewModel.tipInput.toDoubleOrNull() ?: 0.0
    val tip = calculateTip(amount, tipPercent, viewModel.roundUp)

    // UI 渲染...
}

ViewModel 中的状态会在屏幕旋转或配置变化时自动保存，用户体验更好。

10. 总结与思考

通过这个 TipTime 示例，我们学会了：

状态是 Compose 的核心
- 用 mutableStateOf 创建可观察状态。
- 用 remember 保存状态避免重置。
UI 与状态单向数据流
- UI 只负责显示状态。
- 用户操作通过回调修改状态。
- 状态变化自动触发 UI 更新。
可复用、无状态组件设计
- 将状态上提（State Hoisting）。
- 组件只接收数据和回调，保持纯粹。
性能与扩展性
- 用 derivedStateOf 优化计算。
- 用 ViewModel 保存复杂状态。

💡 最后感悟

Jetpack Compose 的状态系统让我们从繁琐的 命令式 UI 编程 解放出来。过去需要写大量的监听器和更新逻辑，现在只要定义好状态，声明 UI 如何渲染状态即可。

这个思想不仅让 UI 更易读、易维护，也为更复杂的 响应式编程模式（如 MVI、MVVM）打下了基础。

一句话总结 ：
在 Compose 中，界面只是状态的投影；管理好状态，你的 UI 就能自然、流畅地响应用户的每一次操作。

复制代码

【Android之路】界面和状态交互

Jetpack Compose 中的界面与状态交互全解析 ------ 以 TipTime 示例为例

1. 为什么要理解状态与界面交互？

2. 项目简介与代码概览

3. Jetpack Compose 中的状态管理基础

3.1 remember 与 mutableStateOf

3.2 by 与属性代理

3.3 状态是如何驱动 UI 的

4. 分解 TipTimeLayout 中的状态交互

4.1 输入金额

4.2 输入小费百分比

4.3 是否向上取整

4.4 计算小费

5. 自定义可复用的输入组件 ------ EditNumberField

6. 自定义 Switch 行 ------ RoundTheTipRow

7. Compose 状态管理的最佳实践

✅ 单一数据源（Single Source of Truth）

✅ Stateless + State Hoisting

✅ remember + mutableStateOf

✅ 避免副作用

8. 进阶：状态与性能优化

8.1 重组（Recomposition）

8.2 derivedStateOf

9. 与 ViewModel 配合管理状态

10. 总结与思考

💡 最后感悟

3.1 `remember` 与 `mutableStateOf`

3.2 `by` 与属性代理

8.2 `derivedStateOf`