带圆角的波纹 Jetpack Compose

Question

在这个答案中，我得到了错误的波纹 animation。 你知道如何使用 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

从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")
        }
    }

Answer 2

到目前为止，我已经确定了 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

当您使用长按或其他手势时，您可以使用修饰符.indication

val interactionSource = remember { MutableInteractionSource() }

Card(
    modifier = Modifier
      .padding(12.dp, 6.dp)
      .fillMaxWidth()
      .clip(RoundedCornerShape(12.dp))
      .indication(interactionSource, LocalIndication.current)
      .pointerInput(Unit) {
        detectTapGestures(
          onPress = { offset ->
            val press = PressInteraction.Press(offset)
            interactionSource.emit(press)
            tryAwaitRelease()
            interactionSource.emit(PressInteraction.Release(press))
          },
          onLongPress = {},
          onTap = {}
        )
      }
  )

Answer 4

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

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

简短的细节：

1. 复制您在卡片上使用的相同形状参数
2. 猜猜，您在shape参数中使用RoundedCornerShape(30.dp) ，然后只需复制它并在修改器参数中的.clip参数中使用

这是完整的代码：

Card(modifier = Modifier
    .padding(30.dp)
    .size(100.dp)
    .clip(RoundedCornerShape(30.dp))
    .clickable {
        // After click //
    },
    shape = RoundedCornerShape(30.dp),
    elevation = 4.dp
) { }