Android Jetpack Compose实现点击后按钮定时禁用再启用

要实现点击后禁用一段时间、超时自动恢复的功能，我们可以封装一个自定义Modifier，这样不仅能复用在Button上，还能应用到任意可点击的Compose组件上。

自定义Modifier实现 #

import androidx.compose.foundation.interaction.MutableInteractionSource
import androidx.compose.foundation.layout.alpha
import androidx.compose.foundation.clickable
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.composed
import androidx.compose.ui.graphics.Color
import androidx.compose.ui.semantics.Role

fun Modifier.clickableWithCooldown(
    cooldownMs: Long = 1000, // 默认冷却1秒
    enabled: Boolean = true,
    onClickLabel: String? = null,
    role: Role? = null,
    interactionSource: MutableInteractionSource = remember { MutableInteractionSource() },
    onClick: () -> Unit
): Modifier = composed {
    var isInCooldown by remember { mutableStateOf(false) }

    // 冷却超时后恢复可点击状态
    LaunchedEffect(isInCooldown) {
        if (isInCooldown) {
            kotlinx.coroutines.delay(cooldownMs)
            isInCooldown = false
        }
    }

    this
        // 冷却期间降低透明度，提供视觉反馈
        .alpha(if (enabled && !isInCooldown) 1f else 0.6f)
        .clickable(
            enabled = enabled && !isInCooldown,
            onClickLabel = onClickLabel,
            role = role,
            interactionSource = interactionSource,
            indication = null // 可根据需求保留默认点击反馈
        ) {
            isInCooldown = true
            onClick()
        }
}

使用示例 #

应用在Button上 #

Button(
    onClick = {}, // 这里留空，点击逻辑由Modifier接管
    modifier = Modifier.clickableWithCooldown(
        cooldownMs = 1500, // 自定义冷却1.5秒
        onClick = {
            // 处理点击事件
            println("Button clicked!")
        }
    )
) {
    Text(text = "Click me")
}

应用在其他组件（比如Text）上 #

Text(
    text = "Clickable Text",
    color = Color.Blue,
    modifier = Modifier.clickableWithCooldown(
        onClick = {
            println("Text clicked!")
        }
    )
)

关键说明 #

• 状态管理：用remember和mutableStateOf保存冷却状态，确保重组时状态不丢失。
• 冷却逻辑：LaunchedEffect监听冷却状态，一旦进入冷却就启动延迟任务，超时后重置状态。
• 视觉反馈：通过alpha modifier在冷却期间降低组件透明度，让用户直观感知到组件不可点击。
• 兼容性：保留了原生clickable modifier的参数（如enabled、role等），保证API一致性和扩展性。

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