JetPack Compose 對可點擊項目沒有影響

Question

我有一列中間有一張卡片。 單擊列時應該有一個動作，但單擊卡片時應該沒有任何反應。 （如可取消的對話框）

當我使用 XML 執行此操作時，為列設置可單擊（true）時解決了此問題，但是在 Jetpack Compose 中，當我單擊卡時，出現無法刪除的效果

我將此代碼設置為卡片修飾符：

.clickable{}

如何從可點擊項目中刪除默認效果（按效果無波紋）？

Answer 1

您需要將指示設置為 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")
        }
    }

我猜第一個是你所擁有的，如果你使用一個盒子並添加兩個項目，你將不會看到卡內的波紋移動

第一個是你所擁有的第二個是帶有不會在卡中產生波紋的盒子