當用戶點擊它時，邊界半徑不會根據形狀改變

Question

大家好，我在Surface上使用RoundedCornerShape(4.dp) ，看起來不錯。 當我嘗試單擊該項目時，它沒有在 Surface 中顯示4dp角。 我嘗試了這個堆棧溢出 1和堆棧溢出 2 ，但沒有任何效果。

binding.itemComposable.setContent {
            Column(modifier = Modifier.fillMaxSize(), verticalArrangement = Arrangement.spacedBy(12.dp)) {
                val options = getOptions()
                options.forEachIndexed { _, optionText ->
                    val interactionSource = remember { MutableInteractionSource() }
                    val isPressed by interactionSource.collectIsPressedAsState()
                    val backgroundColor = if (isPressed) DuckEggBlue else OffWhite
                    val textColor = if (isPressed) TealBlue else Slate
                    val borderWidth = if (isPressed) 1.dp else 0.dp
                    val borderColor = if (isPressed) Aqua else OffWhite
                    val clickable = Modifier.clickable(
                        interactionSource = interactionSource,
                        indication = rememberRipple(true)
                    ) {
                        println("Item Click")
                    }
                    Surface(
                        modifier = Modifier
                            .then(clickable)
                            .border(borderWidth, borderColor),
                        shape = RoundedCornerShape(4.dp)
                    ) {
                        Text(
                            modifier = Modifier
                                .fillMaxWidth()
                                .background(backgroundColor)
                                .padding(16.dp),
                            text = optionText,
                            style = Typography.h3,
                            fontWeight = FontWeight.Medium,
                            color = textColor
                        )
                    }
                }
            }
        }

沒有點擊項目角落是4 dp

當我點擊它沒有改變角落

Answer 1

為shape創建變量

 val shape = RoundedCornerShape(4.dp)

像這樣在Modifier.clip()和Modifier.border()中使用它，

Surface(
    modifier = Modifier
        .clip(shape)
        .border(
            width = borderWidth,
            color = borderColor,
            shape = shape,
        )
        .then(clickable),
    // shape = shape,
)

• shape in border()指定邊框的形狀，默認為RectangleShape 。 因此，您會看到矩形邊框。

• clip()中的shape在添加單擊操作之前更改可組合對象的形狀。 這是為了使波紋效果僅出現在給定的形狀上。

注意：修飾符的順序很重要。

在進行這些更改后，可能不需要Surface中的shape 。

Answer 2

如果您使用 Surface 包裝內容，請嘗試在內容中添加一個容器，例如 Box 或 Column。 然后將您的 Surface 僅用作形狀蒙版，背景和其他內容將根據需要靈活調整。

這是示例

Surface(
        modifier = Modifier
            .then(clickable)
            .border(borderWidth, borderColor),
        shape = RoundedCornerShape(4.dp)
    ) {
        Box(modifier = Modifier
            .fillMaxWidth()
            .fillMaxHeight()
            .background(Color.Green)){
            Text(
                modifier = Modifier
                    .fillMaxWidth()
                    .padding(16.dp),
                text = optionText,
                style = Typography.h3,
                fontWeight = FontWeight.Medium,
                color = textColor
            )
        }
    }

Answer 3

如果要處理Surface上的點擊，則必須使用接受onClick()的function ：

Surface(
    onClick = {},
    shape = RoundedCornerShape(4.dp),
    border = BorderStroke(borderWidth,borderColor),
    interactionSource = interactionSource
)