Jetpack Compose点击后水波纹显示不全，如何同时实现alpha变化与水波纹效果

问题根因 #

你当前的代码中alpha修饰符写在clickable修饰符之前，alpha会对整个视图的所有绘制内容生效，包括clickable生成的水波纹。点击触发状态切换后，alpha会立刻变为0.5，正在扩散的水波纹也会被同步降低透明度，因此看起来无法完全展示。

解决方案 #

方案1：调整Modifier顺序

把alpha修饰符移到clickable之后，水波纹由clickable绘制，不会被后续的alpha影响，仅内容区域会跟随状态调整透明度：

fun Greeting2(name: String) {
    val isProcessing = remember { mutableStateOf(false) }
    Column(
        modifier = Modifier
            .padding(36.dp)
            .clickable(
                interactionSource = remember { MutableInteractionSource() },
                indication = rememberRipple(bounded = false),
            ) {
                isProcessing.value = !isProcessing.value
            }
            .alpha(if (isProcessing.value) 0.5f else 1f)
    ) {
        Image(
            painter = painterResource(R.drawable.ic_btn_speak_now),
            contentDescription = "",
            modifier = Modifier
                .width(80.dp)
                .height(80.dp)
        )
        Text(text = "Hello $name!")
    }
}

方案2：嵌套布局隔离作用域

外层用Box承载点击事件和水波纹，内层Column单独控制内容透明度，逻辑更清晰，不会因Modifier顺序问题出错：

fun Greeting2(name: String) {
    val isProcessing = remember { mutableStateOf(false) }
    Box(
        modifier = Modifier
            .padding(36.dp)
            .clickable(
                interactionSource = remember { MutableInteractionSource() },
                indication = rememberRipple(bounded = false),
            ) {
                isProcessing.value = !isProcessing.value
            }
    ) {
        Column(
            modifier = Modifier.alpha(if (isProcessing.value) 0.5f else 1f)
        ) {
            Image(
                painter = painterResource(R.drawable.ic_btn_speak_now),
                contentDescription = "",
                modifier = Modifier
                    .width(80.dp)
                    .height(80.dp)
            )
            Text(text = "Hello $name!")
        }
    }
}

以上两种方案都可以同时实现alpha调整和完整的水波纹播放效果。

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