带圆角的波纹 Jetpack Compose答案

【问题标题】：Ripple with rounded corners Jetpack Compose带圆角的波纹 Jetpack Compose
【发布时间】：2021-06-23 11:24:18
【问题描述】：

在this 的回答中，我得到了错误的波纹动画。你知道如何使用 Jetpack Compose 创建圆角波纹吗？

使用默认波纹我有这个：

代码：

Card(shape = RoundedCornerShape(30.dp),
        border = BorderStroke(width = 2.dp, color = buttonColor(LocalContext.current)),
        backgroundColor = backColor(LocalContext.current),
        modifier = Modifier
            .fillMaxWidth()
            .padding(10.dp)
            .clickable(
                interactionSource = remember { MutableInteractionSource() },
                indication = rememberRipple(radius = 30.dp)
            ) { show = !show }
    ) { ... } //Show is animation of other element.

//如果我将波纹半径设置为 200 dp（这是卡片的高度），则波纹工作不正常。

【问题讨论】：

标签： android android-jetpack-compose ripple-effect

【解决方案1】：

从1.0.0-beta08 开始，您可以使用Card 中的onClick 参数代替clickable 修饰符来解决此问题：

Card(shape = RoundedCornerShape(30.dp),
    modifier = Modifier
        .fillMaxWidth()
        .padding(10.dp),
    onClick = { show = !show }
)

在1.0.0-beta07 对Card 应用.clickable 修饰符之前，波纹不会被布局的边界剪裁。

作为解决方法，您可以将.clickable 修饰符应用于卡片的内容（例如Box）：

    Card(
        shape = RoundedCornerShape(30.dp),
        border = BorderStroke(width = 2.dp, color = Color.Blue),
        backgroundColor = Color.White,
        modifier = Modifier
            .fillMaxWidth()
            .padding(10.dp)

    ) {
        Box(Modifier
              .clickable(
                  onClick = { /* ...*/ }
              )
        ){
            Text("Text")
        }
    }

【讨论】：

如果我点击元素的第一面，它可以正常工作，但如果我点击第二面，波纹效果会越过角落。
@RenatteleRenattele 什么是第一面和第二面？
元素上的随机点。
最近发帖有问题。
@RenatteleRenattele 这似乎是卡的错误。涟漪不会被布局的边界剪裁。发布了解决方法。

【解决方案2】：

到目前为止，我已经确定了 2 个选项：

除了设置形状外，使用.clip修饰符将卡片剪裁成同样的形状：

Card(
    shape = RoundedCornerShape(30.dp),
    modifier = Modifier
        .clip(RoundedCornerShape(30.dp))
        .clickable {
                //do something
        }
) {
    Box {
        Text("Text")
    }
}

这种方法的缺点是高程阴影也会被剪辑，因此您的卡片会丢失它的阴影。

在可组合的卡片内容上设置.clickable：

 Card(
    shape = RoundedCornerShape(30.dp)
) {
    Box(
        modifier = Modifier.clickable {
                //do something
        }
    ) {
        Text("Text")
    }
}

【讨论】：