带有圆角的波纹 Jetpack Compose

Question

在这个答案中，我弄错了波纹动画。您知道如何使用 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（它是卡片的高度）波纹效果不正常。

Answer 1

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

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

如果您需要clickable或combinedClickable修饰符，则必须使用不带参数的变体onClick，并将clip修饰符也应用于Card使用相同Card形状的：

val shape = RoundedCornerShape(30.dp)

Card(
    shape = shape,
    modifier = Modifier
        //...height, width, padding
        .clip(shape)
        .combinedClickable(
            onLongClick =  { /** do something */ },
            onClick = { /** do something */ }
        )
){
   //card content
}

使用 M3，Card您也可以做同样的事情。

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

作为解决方法，您可以将.clickable修饰符应用于卡片的内容（例如 a 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")
        }
    }

Answer 2

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

1. 除了设置形状之外，还可以使用.clip修改器使用相同的形状来裁剪卡片：

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

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

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

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

Answer 3

我检查了卡片/表面可组合项的来源，发现您需要具有相同形状的背景和剪辑修改器。例如，下面的 Box 具有圆角形状，并且点击波纹以相同的边界被切割：

val shape = RoundedCornerShape(16.dp)
Box(
    modifier = Modifier
        .background(
            color = Color.Yellow,
            shape = shape
        )
        .clip(shape)
        .clickable { onClick() },
) {
 // your content here
}

Answer 4

希望这能为您提供最简单的解决方案

只需在修饰符参数中添加.clip(RoundedCornerShape(30.dp))

这是完整的代码：

Card(modifier = Modifier
    .padding(30.dp)
    .size(100.dp)
    .clip(RoundedCornerShape(30.dp))
    .clickable {
        // After clip //
    }) { }