android - 如何在 Jetpack Compose 中分分钟重构？

Question

我想在我的可组合项中显示一个倒计时的计时器，但我不确定如何实现。

我正在考虑设置一分钟的延迟/超时并以这种方式触发重组，但我不确定这是否是正确的思考方式。

@Composable
fun Countdown(completedAt: Date) {
    val minutesLeft = ceil((completedAt.time - Date().time) / 60_000.0).toInt()

    Handler(Looper.getMainLooper()).postDelayed({
        // TODO: Recompose
    }, 60_000)

    Text(text = "$minutesLeft minutes until completed")
}

我的目标是让文本每分钟更新一次。我该怎么做？

Answer 1

将分钟数存储为状态。

还要确保清除 DisposableEffect 中的 postDelayed 回调以防止冲突延迟和内存泄漏。

我已将此逻辑移动到 minutesLeft 可组合函数中，以便可以重复使用。

@Composable
fun minutesLeft(until: Date): Int {
    var value by remember { mutableStateOf(getMinutesLeft(until)) }

    DisposableEffect(Unit) {
        val handler = Handler(Looper.getMainLooper())

        val runnable = {
            value = getMinutesLeft(until)
        }

        handler.postDelayed(runnable, 60_000)

        onDispose {
            handler.removeCallbacks(runnable)
        }
    }

    return value
}

private fun getMinutesLeft(until: Date): Int {
    return ceil((until.time - Date().time) / 60_000.0).toInt()
}

用法

@Composable
fun Countdown(completedAt: Date) {
    val minutes = minutesLeft(until = completedAt)

    Text(text = "$minutes minutes until completed")
}