Android笔记【14】结合LaunchedEffect实现计时器功能。

一、问题

cy老师第五次作业

结合LaunchedEffect实现计时器功能。要求：动态计时，每秒修改时间，计时的时间格式为“00：00：00”（小时：分钟：秒）提交源代码的文本和运行截图。

二、结果

三、代码

package com.example.test02import androidx.compose.foundation.background
import androidx.compose.foundation.layout.Arrangement
import androidx.compose.foundation.layout.Box
import androidx.compose.foundation.layout.Column
import androidx.compose.foundation.layout.Row
import androidx.compose.foundation.layout.fillMaxSize
import androidx.compose.foundation.layout.fillMaxWidth
import androidx.compose.foundation.layout.padding
import androidx.compose.foundation.layout.size
import androidx.compose.foundation.layout.width
import androidx.compose.foundation.layout.wrapContentSize
import androidx.compose.material.icons.Icons
import androidx.compose.material.icons.automirrored.filled.ExitToApp
import androidx.compose.material.icons.filled.PlayArrow
import androidx.compose.material3.Icon
import androidx.compose.material3.IconButton
import androidx.compose.material3.LinearProgressIndicator
import androidx.compose.material3.MaterialTheme
import androidx.compose.material3.Text
import androidx.compose.runtime.Composable
import androidx.compose.runtime.LaunchedEffect
import androidx.compose.runtime.MutableState
import androidx.compose.runtime.mutableIntStateOf
import androidx.compose.runtime.mutableLongStateOf
import androidx.compose.runtime.mutableStateOf
import androidx.compose.runtime.remember
import androidx.compose.runtime.rememberUpdatedState
import androidx.compose.ui.Alignment
import androidx.compose.ui.Modifier
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.tooling.preview.Preview
import androidx.compose.ui.unit.dp
import androidx.compose.ui.unit.sp
import kotlinx.coroutines.delay@Preview
@Composable
fun MainScreen_04(){//函数作用域内val timer = remember{ mutableLongStateOf(0) }var runningState = remember{ mutableStateOf(true) }val timerState = rememberUpdatedState(newValue = timer)val formattedTime = formatTime(timerState.value.value)LaunchedEffect(Unit){while(runningState.value){delay(100)timerState.value.value +=1
//            if(timerState.value.value == 100)
//                runningState.value =false}}Box(modifier = Modifier.fillMaxSize(),contentAlignment = Alignment.Center){Column(modifier = Modifier.fillMaxWidth(),horizontalAlignment = Alignment.CenterHorizontally,verticalArrangement = Arrangement.Center){
//            LinearProgressIndicator(
//                progress = { timer.value.toFloat()/100 },
//                modifier = Modifier.size(800.dp,10.dp),
//                color = Color.Green,
//                trackColor = Color.LightGray,
//            )Text(text = "计时器",fontSize=30.sp,color= MaterialTheme.colorScheme.primary)Text(text = "${timerState.value.value}秒",fontSize = 24.sp)
//            TimerDisplay(timerState.value)Row(modifier = Modifier.fillMaxWidth(),horizontalArrangement = Arrangement.Center){IconButton(modifier =  Modifier.width(100.dp),onClick={runningState.value = truetimer.value = 0}){Row{Icon(imageVector = Icons.Filled.PlayArrow,tint = Color.Green,contentDescription = null)Text("计时")}}IconButton(modifier = Modifier.width(100.dp),onClick={runningState.value  = falsetimer.value +=1}){Row{Icon(imageVector = Icons.AutoMirrored.Filled.ExitToApp,tint = Color.Green,contentDescription = null)Text("停止")}}}}}}@Composable
fun TimerDisplay(timerState: MutableState<Long>) {val formattedTime = formatTime(timerState.value)Text(text = formattedTime,color = Color.Red, // 字体颜色为红色fontSize = 24.sp, // 字体大小)}private fun formatTime(seconds: Long): String {return String.format(" %02d:%02d:%02d",seconds/3600, seconds / 60, seconds % 60)
}