如何实现点击Re-send按钮时显示1分钟文本计时器？

实现思路 #

通过Compose状态管理控制文本显示内容，结合LaunchedEffect处理倒计时逻辑：

• 用状态变量记录剩余倒计时秒数，0时显示“Re-send”，大于0时显示倒计时文本
• 点击按钮启动倒计时，每秒更新剩余秒数，倒计时结束自动恢复原按钮文本
• 倒计时期间禁用按钮点击事件

完整代码实现 #

import androidx.compose.foundation.clickable
import androidx.compose.foundation.layout.padding
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.unit.dp
import kotlinx.coroutines.delay

@Composable
fun ResendTimerButton() {
    // 剩余倒计时秒数，0表示未进入倒计时状态
    var remainingSeconds by remember { mutableStateOf(0) }

    // 判断是否处于倒计时中
    val isCountingDown = remainingSeconds > 0

    Text(
        text = if (isCountingDown) "${remainingSeconds}s 后重新发送" else "Re-send",
        modifier = Modifier
            .clickable(enabled = !isCountingDown) {
                // 点击后启动60秒倒计时
                remainingSeconds = 60
            }
            .padding(16.dp),
        color = if (isCountingDown) Color.Gray else Color.Blue
    )

    // 倒计时逻辑：当剩余秒数大于0时，每秒减1
    LaunchedEffect(remainingSeconds) {
        if (remainingSeconds > 0) {
            delay(1000L)
            remainingSeconds -= 1
        }
    }
}

代码说明 #

• 状态管理：remainingSeconds记录倒计时进度，isCountingDown控制按钮文本和点击可用性
• 倒计时逻辑：LaunchedEffect监听remainingSeconds变化，当大于0时延迟1秒后减1，直到秒数归0
• 交互控制：倒计时期间按钮变为灰色且不可点击，避免重复触发；倒计时结束后恢复蓝色可点击状态

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