Android使用Jetpack Compose开发防止按钮连点及去除涟漪效果

码客说

发布于 2024-04-25 16:16:12

4250

发布于 2024-04-25 16:16:12

文章被收录于专栏：码客

防止按钮连点

import android.annotation.SuppressLint
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
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 kotlinx.coroutines.delay

@SuppressLint("ModifierFactoryUnreferencedReceiver")
fun Modifier.debouncedClickable(delay: Long = 500, onClick: () -> Unit) = composed {
    //按钮是否可点击
    var canClick by remember {
        mutableStateOf(true)
    }
    LaunchedEffect(key1 = canClick, block = {
        if (!canClick) {
            delay(delay)
            canClick = true
        }
    })

    Modifier.clickable(canClick) {
        canClick = false
        onClick()
    }
}

这里准确来说不是按钮防抖，也不是节流，只是控制按钮在短时间不能连点。

使用方法：

Box(
    modifier = Modifier
        .align(Alignment.Bottom)
        .padding(0.dp, 0.dp, 6.dp, 0.dp)
        .size(72.dp, 28.dp)
        .clip(RoundedCornerShape(6.dp))
        .debouncedClickable {
            event(BtnType.UNINSTALL, appItem)
        }) {
    ZBtnView2("卸载")
}

也就是把clickable更换为debouncedClickable即可。

去除涟漪效果

import android.annotation.SuppressLint
import androidx.compose.foundation.clickable
import androidx.compose.foundation.interaction.MutableInteractionSource
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 kotlinx.coroutines.delay

@SuppressLint("ModifierFactoryUnreferencedReceiver")
inline fun Modifier.noRippleClickable(crossinline onClick: () -> Unit): Modifier = composed {
    clickable(indication = null,
        interactionSource = remember { MutableInteractionSource() }) {
        onClick()
    }
}

使用方法：

把clickable更换为noRippleClickable即可。

本文参与腾讯云自媒体同步曝光计划，分享自作者个人站点/博客。

原始发表：2024-04-24，如有侵权请联系 cloudcommunity@tencent.com 删除

import