android - 带圆角的波纹 Jetpack Compose

Question

在 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(这是卡片的高度)波纹工作不正常。

Answer 1

以 1.0.0-beta08 开头您可以使用 解决此问题onClick Card 中的参数而不是 clickable修饰符:

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

直到 1.0.0-beta07申请 .clickable Card 的修饰符涟漪不会被布局的边界剪裁。
作为解决方法，您可以应用 .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")
        }
    }