如何在Kotlin Jetpack Compose应用中实现每秒自动刷新时间显示

阿华AIGC实验室

2026-4-7

嘿，我明白你现在遇到的问题了——刚回到Android开发，用Compose写时钟但没法每秒刷新，还被Composable的调用规则卡着，确实有点头疼。我来帮你理清楚问题所在，然后给出符合Compose最佳实践的解决方案：

为什么你之前的方法行不通？

你尝试用Handler和Runnable手动调用UpdateTime()，但Compose有个核心规则：@Composable函数只能在其他@Composable函数或者Compose上下文（比如setContent）中调用。而Runnable的run()方法不是Composable上下文，直接调用UpdateTime()肯定会报错；就算你强行加@Composable注解，也会和Runnable接口的抽象方法签名冲突，这就是你看到第二个错误的原因。

在Compose里，我们不能像传统View体系那样手动触发UI更新，而是要通过状态驱动UI：当状态值变化时，Compose会自动重组对应的UI部分，这才是正确的打开方式。

符合Compose最佳实践的解决方案

我们需要用Compose的状态API（mutableStateOf）保存当前时间，再用LaunchedEffect启动一个协程来每秒更新这个状态，状态变化后UI会自动刷新。下面是修改后的完整代码：

package com.example.talkingclockversion1

import android.os.Build
import android.os.Bundle
import android.view.View
import androidx.activity.ComponentActivity
import androidx.activity.compose.setContent
import androidx.activity.enableEdgeToEdge
import androidx.annotation.RequiresApi
import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.material3.Scaffold
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.getValue
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.setValue
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.text.style.TextAlign
import androidx.compose.ui.unit.sp
import com.example.talkingclockversion1.ui.theme.TalkingClockVersion1Theme
import kotlinx.coroutines.delay
import java.time.LocalDateTime
import java.time.format.DateTimeFormatter

class MainActivity : ComponentActivity() {
    @RequiresApi(Build.VERSION_CODES.O)
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        enableEdgeToEdge()
        setContent {
            TalkingClockVersion1Theme {
                Scaffold(modifier = Modifier.fillMaxSize()) { innerPadding ->
                    // 隐藏导航栏和状态栏
                    window.decorView.apply {
                        systemUiVisibility = View.SYSTEM_UI_FLAG_HIDE_NAVIGATION or View.SYSTEM_UI_FLAG_FULLSCREEN
                    }
                    SetScreenBackgroundToBlack()
                    UpdateTime()
                }
            }
        }
    }
}

@Composable
@RequiresApi(Build.VERSION_CODES.O)
fun UpdateTime() {
    val formatter = DateTimeFormatter.ofPattern("HH:mm:ss")
    // 用mutableStateOf保存时间状态，remember让状态在重组时保留
    var currentTime by remember { mutableStateOf("") }

    // LaunchedEffect：在Composable进入组合时启动协程，离开时自动取消
    LaunchedEffect(Unit) {
        // 循环每秒更新时间
        while (true) {
            currentTime = LocalDateTime.now().format(formatter)
            // 等待1秒，这里用delay是协程的挂起函数，不会阻塞主线程
            delay(1000)
            
            // 之后你要加的闹钟检查逻辑，就可以放在这个循环里，比如：
            // checkForAlarms()
        }
    }

    TimeDisplay(
        name = currentTime,
        modifier = Modifier.fillMaxWidth()
    )
}

@Composable
fun SetScreenBackgroundToBlack() {
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.Black)
    )
}

@Composable
fun TimeDisplay(name: String, modifier: Modifier = Modifier) {
    Text(
        text = name,
        color = Color.White,
        fontSize = 300.sp,
        lineHeight = 500.sp,
        textAlign = TextAlign.Center,
        modifier = modifier.background(Color.Black)
    )
}

关键部分解释

状态管理：var currentTime by remember { mutableStateOf("") }
- mutableStateOf创建了一个可观察的状态对象，当它的值变化时，Compose会自动重组所有使用这个状态的UI组件（也就是TimeDisplay）。
- remember确保这个状态在Composable重组时不会被重新初始化，保留之前的值。
LaunchedEffect：
- 它是Compose专门用来处理异步副作用的API，传入Unit作为key意味着这个协程只会在Composable第一次进入组合时启动一次，之后不会重复触发。
- 协程里的while(true)循环会一直运行，直到Composable离开组合（比如Activity销毁），这时候LaunchedEffect会自动取消协程，不用担心内存泄漏。
协程的delay：
- 这里用delay(1000)而不是Thread.sleep(1000)，因为delay是协程的挂起函数，不会阻塞主线程，而Thread.sleep会导致UI卡顿，这在Compose里是绝对要避免的。