如何在Android的Kotlin Jetpack Compose中使用Chronometer？

android.widget.Chronometer并非只能在XML布局中使用，你完全可以通过Jetpack Compose提供的AndroidView组件，将这个原生计时器控件嵌入到Compose界面中。以下是具体的实现步骤和示例：

核心原理 #

AndroidView是Compose专门用来集成传统Android View的组件，它会自动管理原生View的生命周期（创建、更新、销毁），让原生控件能和Compose的状态系统协同工作。

完整实现示例 #

下面是一个包含启动、暂停、重置功能的计时器示例：

import android.widget.Chronometer
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Spacer
import androidx.compose.foundation.layout.height
import androidx.compose.material3.Button
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
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.viewinterop.AndroidView
import androidx.compose.ui.unit.dp

@Composable
fun ComposeChronometer() {
    // 管理计时器运行状态
    var isRunning by remember { mutableStateOf(false) }
    // 管理计时器的基础时间（用于重置）
    var baseTime by remember { mutableStateOf(System.currentTimeMillis()) }
    // 标记是否需要重置计时器
    var needReset by remember { mutableStateOf(false) }

    Column {
        // 嵌入原生Chronometer控件
        AndroidView(
            factory = { context ->
                Chronometer(context).apply {
                    // 初始化基础时间
                    base = baseTime
                    // 设置时间显示格式，比如只显示分秒
                    format = "mm:ss"
                    // 可选：监听计时器每秒的tick事件
                    setOnChronometerTickListener { chrono ->
                        val elapsedSeconds = (System.currentTimeMillis() - chrono.base) / 1000
                        // 这里可以处理时间变化逻辑，比如更新UI或记录数据
                    }
                }
            },
            update = { chronometer ->
                // 根据状态更新计时器
                when {
                    needReset -> {
                        chronometer.base = baseTime
                        chronometer.stop()
                        isRunning = false
                        needReset = false
                    }
                    isRunning -> {
                        if (!chronometer.isRunning) {
                            // 暂停后重新启动，计算偏移量修正基础时间
                            val elapsed = System.currentTimeMillis() - chronometer.base
                            chronometer.base = System.currentTimeMillis() - elapsed
                            chronometer.start()
                        }
                    }
                    else -> {
                        if (chronometer.isRunning) chronometer.stop()
                    }
                }
            }
        )

        Spacer(modifier = Modifier.height(16.dp))

        Button(onClick = { isRunning = !isRunning }) {
            Text(if (isRunning) "暂停" else "启动")
        }

        Spacer(modifier = Modifier.height(8.dp))

        Button(onClick = {
            baseTime = System.currentTimeMillis()
            needReset = true
        }) {
            Text("重置")
        }
    }
}

关键细节说明 #

• factory参数：负责创建Chronometer实例，在这里可以完成初始化配置，比如设置时间格式format、初始基础时间base，以及绑定tick监听器。
• update参数：当Compose的状态（比如isRunning、needReset）发生变化时，会触发这个lambda，用来更新原生Chronometer的状态，处理启动、暂停、重置逻辑。
• 状态管理：用remember和mutableStateOf来保存状态，确保状态变化能触发Compose重组，从而更新原生控件。
• 时间格式：format支持标准的时间占位符，比如HH:mm:ss显示时分秒，mm:ss显示分秒，你可以根据需求调整。

内容的提问来源于stack exchange，提问作者skd