JetPack Compose 对可点击项目无效

Question

我有一列，中间有一张卡片。单击列时应该有操作，但单击卡片时不应发生任何操作。（比如可取消的对话框）

当我使用 XML 执行此操作时，在为列设置可点击 (true) 时解决了这个问题，但是在 Jetpack Compose 中，当我点击卡片时，有一个效果我删不掉

我将此代码设置为卡的修饰符：

.clickable{}

如何从可点击项目中删除默认效果（按下效果无波纹）？

Answer 1

您需要将 indication 设置为 null 才能在您的 Composable 被点击时不产生波纹

Modifier.clickable(
    interactionSource = MutableInteractionSource(),
    indication = null,
    onClick = {}
)

编辑

假设您不希望波纹在 Column 内的 Card 中移动并实现这一点，您可以使用包含 Column 和 Card 作为兄弟姐妹的 Box。

   Column(
        modifier = Modifier
            .size(200.dp)
            .background(Color.Green)
            .clickable { },
        verticalArrangement = Arrangement.Center,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Card(
            elevation = 4.dp,
            shape = RoundedCornerShape(5.dp),
            modifier = Modifier
                .size(100.dp)
                .clickable(
                    interactionSource = MutableInteractionSource(),
                    indication = null,
                    onClick = {
                        Toast
                            .makeText(context, "Card", Toast.LENGTH_SHORT)
                            .show()
                    }
                )
        ) {
            Text("In Card")
        }
    }

    Spacer(modifier = Modifier.height(4.dp))
    Box(
        contentAlignment = Alignment.Center
    ) {
        Column(
            modifier = Modifier
                .background(Color.Green)
                .size(200.dp)
                .clickable {
                    Toast
                        .makeText(context, "Column", Toast.LENGTH_SHORT)
                        .show()
                },

            ) {

        }

        Card(
            elevation = 4.dp,
            shape = RoundedCornerShape(5.dp),
            modifier = Modifier
                .size(100.dp)
                .clickable(
                    interactionSource = MutableInteractionSource(),
                    indication = null,
                    onClick = {
                        Toast
                            .makeText(context, "Card", Toast.LENGTH_SHORT)
                            .show()
                    }
                )
        ) {
            Text("In Card")
        }
    }

我猜第一个就是你所拥有的，如果你使用一个盒子并添加这两个项目，你将不会看到波纹在你的卡片中移动

第一个就是你所拥有的第二个是在 Card

中不会有波纹的 Box

JetPack Compose 对可点击项目无效

JetPack Compose no effect for clickable item

android

kotlin

android-jetpack

android-jetpack-compose

composable

编辑