1. 支付页面状态设计：理解 Compose 单向数据流、State Hoisting 核心原则、支付页面常见状态分类

1.1 单向数据流原理

Jetpack Compose 遵循严格的单向数据流（Unidirectional Data Flow, UDF）架构：

• 状态向下传递：父 Composable 将不可变状态作为参数传递给子 Composable。
• 事件向上传递：子 Composable 通过回调函数（lambda 或接口）将用户操作或系统事件通知父组件。
• 唯一可信源：状态只存储在单一的“可信源”中（通常是 ViewModel 或父 Composable 的 remember 状态）。

在支付页面中，所有 UI 状态（输入框内容、验证错误、请求进度等）均集中管理，避免多份副本导致的逻辑歧义。

1.2 State Hoisting 核心原则

1.3 支付页面常见状态分类

支付流程涉及多种子状态，合理分类有助于设计健壮的状态机：

sealed class PaymentState {
    object Idle : PaymentState()
    data class Ready(val form: PaymentForm) : PaymentState()
    data class Validating(val form: PaymentForm) : PaymentState()
    data class Processing(val form: PaymentForm) : PaymentState()
    data class Success(val transactionId: String) : PaymentState()
    data class Error(val message: String) : PaymentState()
    object Timeout : PaymentState()
    object Cancelled : PaymentState()
}

1.4 简单代码示例：State Hoisting 实现

以下代码展示了支付页面中状态提升与事件向上传递的最小实现：

// 状态定义（提升到父 Composable）
@Composable
fun PaymentScreen() {
    var state by remember { mutableStateOf(PaymentState.Idle) }

    // 事件处理
    val onCardChanged: (String) -> Unit = { newCard ->
        // 仅更新表单部分，其他字段不变
        val currentForm = (state as? PaymentState.Ready)?.form ?: PaymentForm()
        state = PaymentState.Ready(currentForm.copy(cardNumber = newCard))
    }
    val onSubmit: () -> Unit = {
        state = PaymentState.Validating(currentForm)
        // 触发网络请求等
    }

    // UI 层（子 Composable 只接收不可变状态和回调）
    CardInputForm(
        form = (state as? PaymentState.Ready)?.form ?: PaymentForm(),
        onCardChanged = onCardChanged,
        onSubmit = onSubmit,
        isProcessing = state is PaymentState.Processing
    )
}

// 子 Composable：仅依赖参数，不持有状态
@Composable
fun CardInputForm(
    form: PaymentForm,
    onCardChanged: (String) -> Unit,
    onSubmit: () -> Unit,
    isProcessing: Boolean
) {
    TextField(
        value = form.cardNumber,
        onValueChange = onCardChanged,
        enabled = !isProcessing
    )
    Button(onClick = onSubmit, enabled = !isProcessing) {
        Text("立即支付")
    }
}

1.5 支付页面状态流动 SVG 图

1.6 常见错误与调试

• 状态提升位置过低：将 cardNumber 放在 CardInputField 内部，导致其他需要该状态的 Composable 无法访问。应提升到 PaymentScreen 级。
• 直接修改可变状态：使用 mutableStateOf 的 .value = ... 替代 copy() 创建不可变实例，会导致重组遗漏。
• 回调定义在错误的作用域：将 onCardChanged 定义在 CardInputForm 内部，破坏了向上事件流。
• 忘记处理背压：快速点击“支付”时多次触发 Processing 状态，应使用 snapshotFlow { state }.debounce() 或按钮禁用。

1.7 性能与稳定性优化