Compose mutableStateOf 初始值重置：定时器场景下的解决方案

2024-12-26 11:01:19

Compose 中 mutableStateOf 的初始值重置

在 Jetpack Compose 应用中，mutableStateOf 用于管理可变的状态，这些状态变化时会自动触发 UI 的更新。但当 mutableStateOf 的初始值来自外部数据，并需要在数据变化时重置状态时，开发者可能会遇到问题。一个常见的例子就是在定时器场景下，任务切换时定时器值没有重新加载。

问题剖析

考虑这样一个情景：一个定时器组件 Timer 接受一个 duration 作为初始时长，并在组件内部用 mutableStateOf 存储当前的倒计时值。当新的任务到来，duration 值改变时，理想情况下我们希望倒计时重新从新的 duration 值开始。但是，如果使用简单的 remember { mutableStateOf(duration) }，组件不会感知到 duration 的变化，只会使用首次传入的初始值。 LaunchedEffect 在首次组合后启动协程，随后的duration变化并不会重新启动计时，这就是问题所在。

解决方案

为使定时器响应 duration 值的变化，需要利用 remember 和 LaunchedEffect 之间的配合，让 LaunchedEffect 在每次 duration 值变更时都能重新运行。

方法一：使用 `key` 传入 `duration` 值

最直接的方法是把 duration 值也添加到 LaunchedEffect 的 key 中，当duration 值发生改变的时候 LaunchedEffect 会取消前一个协程并且启动一个新的协程。remember 初始化为新的duration 值，这样即可正确初始化新的计时值。

@Composable
fun Timer(duration: Long, onFinished: () -> Unit) {
    var currentTimerValue by remember { mutableStateOf(duration) }

    LaunchedEffect(key1 = duration) {
        currentTimerValue = duration
        while (currentTimerValue > 0) {
            delay(1000L)
            currentTimerValue--
        }
        onFinished.invoke()
    }

    Text(text = currentTimerValue.toString(), fontSize = 24.sp, color = Color.White)
}

步骤:

将 duration 添加到 LaunchedEffect 的 key1 参数。
每次 duration 更改，协程将被重新启动，使用新 duration 设置 currentTimerValue。

原理:
LaunchedEffect 依靠 key 的变化来判断是否需要启动一个新的协程。当传入 duration 后，每当duration 变化时协程会被取消并重新启动，currentTimerValue 也会被更新。
这种方式避免了在生命周期内的潜在泄漏，并确保了资源可以得到有效地释放，从而提高了应用的稳定性和效率。

方法二：使用 `snapshotFlow`

可以观察 duration 的值，利用 snapshotFlow 来监听，当外部 duration 的值改变，就能启动一个新的计时，也能达成相同的效果。

@Composable
fun Timer(duration: Long, onFinished: () -> Unit) {
   var currentTimerValue by remember { mutableStateOf(duration) }

   LaunchedEffect(Unit) {
       snapshotFlow { duration }
           .collect { newDuration ->
               currentTimerValue = newDuration
              while (currentTimerValue > 0) {
                    delay(1000L)
                   currentTimerValue--
               }
               onFinished.invoke()
           }
   }


   Text(text = currentTimerValue.toString(), fontSize = 24.sp, color = Color.White)
}

步骤:

在 LaunchedEffect 内，使用 snapshotFlow { duration } 创建一个监听 duration 的数据流。
利用 collect 处理 duration 的变化，将最新的值赋给 currentTimerValue 并执行定时逻辑。

原理: snapshotFlow 可以将 Compose 的 State 读取转化为 Kotlin Flow，这能确保每次外部 duration 更新都能被 collect 处理。这种方法避免直接使用duration 作为LaunchedEffect 的key值。

额外的安全建议

使用合适的默认值: 为避免空指针异常或其他错误，应在初始化 mutableStateOf 时提供默认值，尤其是在初始数据可能延迟加载的情况下。例如，可以将 duration 的默认值设置为0。
合理利用 Compose 的生命周期: LaunchedEffect 会在组件被组合时启动协程，当组件离开组合时自动取消。合理利用这个特性可以避免内存泄漏。
考虑边界情况: 当计时器到达0 或结束时，应处理好逻辑。在UI层面，考虑为倒计时0或者完成时的显示作出不同处理。

总结

本文探讨了在 Jetpack Compose 中如何有效地使用 mutableStateOf 来管理需要响应外部变化的定时器状态。两种方法，通过把 duration 作为 LaunchedEffect 的 key 或使用 snapshotFlow 都能实现重新初始化 mutableStateOf 值，并重新启动计时器，两者均可以实现状态更新的目的。理解这些机制，可以更好的使用Compose来创建出健壮的用户界面。