Jetpack Compose—打造独一无二的倒计时APP

Android

2023-12-20 13:36:33

使用 Jetpack Compose 构建倒计时应用程序：一个循序渐进的指南

简介

在 Jetpack Compose 中构建一个倒计时应用程序是一个绝佳的学习方式，可以深入了解这个强大的 UI 框架。本文将带您逐步完成构建一个简单的倒计时应用程序的过程，涵盖从设置可变状态到使用动画创建逼真的计时器的一切内容。

设置可变状态

Jetpack Compose 允许您使用称为“状态”的可变变量管理您的应用程序数据。在我们的倒计时应用程序中，我们将使用三个状态变量：

timeLeft： 存储倒计时的剩余时间。
running： 指示倒计时是否正在运行。
timer： 一个协程作用域，用于每秒更新“timeLeft”变量。

创建计时器

在设置了状态变量之后，我们需要创建一个计时器来管理倒计时。这个计时器将每秒递减“timeLeft”变量，直到它达到零。我们使用 rememberCoroutineScope().launch 来创建此计时器：

val timer = rememberCoroutineScope().launch {
    while (running) {
        delay(1000)
        timeLeft--
    }
}

启动、停止和重置计时器

接下来，我们需要创建三个函数来管理计时器：

startTimer： 启动计时器。
stopTimer： 停止计时器。
resetTimer： 重置计时器。

这些函数只需更新“running”状态变量，从而启用或禁用计时器：

fun startTimer() {
    running = true
}

fun stopTimer() {
    running = false
}

fun resetTimer() {
    timeLeft = 10
}

显示计时器

现在我们已经设置了计时器，我们需要创建一个 Compose 函数来显示倒计时。该函数将使用我们的“timeLeft”状态变量来显示剩余时间：

@Composable
fun TimerView() {
    Text(text = timeLeft.toString())
}

应用生命周期

在 Android 应用程序中，管理应用程序生命周期很重要。在我们的倒计时应用程序中，我们需要在 onCreate 方法中启动计时器，并在 onDestroy 方法中停止计时器：

override fun onCreate(savedInstanceState: Bundle?) {
    super.onCreate(savedInstanceState)
    setContent {
        TimerView()
    }
    startTimer()
}

override fun onDestroy() {
    super.onDestroy()
    stopTimer()
}

代码示例

以下是完整的 MainActivity.kt 文件，展示了所有代码段：

import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.padding
import androidx.compose.material.Button
import androidx.compose.material.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.rememberCoroutineScope
import androidx.compose.ui.Modifier
import androidx.compose.ui.text.font.FontWeight
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import kotlinx.coroutines.delay
import kotlinx.coroutines.launch

class MainActivity : ComponentActivity() {

    var timeLeft by mutableStateOf(10)
    var running by mutableStateOf(false)

    val timer = rememberCoroutineScope().launch {
        while (running) {
            delay(1000)
            timeLeft--
        }
    }

    fun startTimer() {
        running = true
    }

    fun stopTimer() {
        running = false
    }

    fun resetTimer() {
        timeLeft = 10
    }

    @Composable
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            TimerView()
        }
        startTimer()
    }

    @Composable
    fun TimerView() {
        Box(modifier = Modifier.fillMaxSize(), contentAlignment = Alignment.Center) {
            Column {
                Text(text = timeLeft.toString(), modifier = Modifier.padding(8.dp), fontSize = 40.sp, fontWeight = FontWeight.Bold)
                Row {
                    Button(onClick = { startTimer() }, modifier = Modifier.padding(8.dp)) {
                        Text(text = "Start")
                    }
                    Button(onClick = { stopTimer() }, modifier = Modifier.padding(8.dp)) {
                        Text(text = "Stop")
                    }
                    Button(onClick = { resetTimer() }, modifier = Modifier.padding(8.dp)) {
                        Text(text = "Reset")
                    }
                }
            }
        }
    }

    override fun onDestroy() {
        super.onDestroy()
        stopTimer()
    }
}