Jetpack Compose中Modifier点击事件(不显示波纹、防连点)

发表于 更新于 分类于
Jetpack Compose中Modifier点击事件(不显示波纹、防连点)

前言

在 Compose 中，Modifier 的clickable点击事件默认会有一个涟漪效果，我们可以扩展方法去除涟漪效果。

也可以扩展实现按钮的防连点。

去除涟漪效果

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
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

fun Modifier.clickableNoRipple(onClick: () -> Unit): Modifier = composed {
    clickable(
        indication = null,
        interactionSource = remember { MutableInteractionSource() }) {
        onClick()
    }
}

防连点

这里准确来说不是防抖，是让点击事件直接触发，后续500毫秒内不能再触发。

而防抖是：

让函数在事件停止触发后，延迟一段时间再执行；如果在延迟期间事件再次触发，则重新计时。

扩展

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
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

//防连点
fun Modifier.clickableDebounced(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()
    }
}

使用方法

1
2
3
4
Modifier
.clickableDebounced {

},

防连点无涟漪

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
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

//防连点无涟漪效果
fun Modifier.clickableDebouncedNoRipple(delay: Long = 500, onClick: () -> Unit) = composed {
    //按钮是否可点击
    var canClick by remember {
        mutableStateOf(true)
    }
    LaunchedEffect(key1 = canClick, block = {
        if (!canClick) {
            delay(delay)
            canClick = true
        }
    })

    clickable(
        enabled = canClick,
        indication = null,
        interactionSource = remember { MutableInteractionSource() }) {
        canClick = false
        onClick()
    }
}