Compose Material3 1.3.0展开卡片涟漪效果异常的替代方案咨询

在Compose Material3 1.3.0的ripple API变更后，带有点击展开逻辑的卡片会出现涟漪显示异常：点击卡片展开后，涟漪是不匹配展开后卡片尺寸的圆形，且短期内官方无法修复该问题。相关示例代码如下：

var expanded by remember { mutableStateOf(false) }
val height by animateDpAsState(targetValue = if (expanded) 500.dp else 100.dp)

Card(onClick = { expanded = !expanded }) {
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .height(height)
    )
}

以下是几种无需完全禁用涟漪的可行解决办法：

• 将点击逻辑移至内部布局，绑定涟漪到动画尺寸
  把Card自带的onClick移到内部的Box上，让涟漪基于Box的实时动画尺寸计算边界，这样展开后的涟漪就能匹配卡片实际大小：

  var expanded by remember { mutableStateOf(false) }
  val height by animateDpAsState(targetValue = if (expanded) 500.dp else 100.dp)
  
  Card {
      Box(
          modifier = Modifier
              .fillMaxWidth()
              .height(height)
              .clickable(
                  onClick = { expanded = !expanded },
                  indication = rememberRipple(bounded = true),
                  interactionSource = remember { MutableInteractionSource() }
              )
      )
  }
  

• 固定涟漪边界为最大尺寸
  提前设置涟漪半径为卡片展开后的最大高度的一半，让涟漪从一开始就适配最终展开的尺寸，避免动画过程中出现不匹配的圆形：

  var expanded by remember { mutableStateOf(false) }
  val height by animateDpAsState(targetValue = if (expanded) 500.dp else 100.dp)
  val maxHeight = 500.dp
  
  Card(onClick = { expanded = !expanded }) {
      Box(
          modifier = Modifier
              .fillMaxWidth()
              .height(height)
              .indication(
                  interactionSource = remember { MutableInteractionSource() },
                  indication = rememberRipple(
                      bounded = true,
                      radius = maxHeight / 2
                  )
              )
      )
  }
  

• 用Surface替代Card并自定义交互
  Surface和Card视觉效果相近，但手动处理点击和涟漪后，能更灵活控制涟漪的计算逻辑，避免Card默认涟漪与动画尺寸的冲突：

  var expanded by remember { mutableStateOf(false) }
  val height by animateDpAsState(targetValue = if (expanded) 500.dp else 100.dp)
  
  Surface(
      shape = MaterialTheme.shapes.medium,
      color = MaterialTheme.colorScheme.surface,
      modifier = Modifier.fillMaxWidth()
  ) {
      Box(
          modifier = Modifier
              .height(height)
              .clickable(
                  onClick = { expanded = !expanded },
                  indication = rememberRipple(bounded = true),
                  interactionSource = remember { MutableInteractionSource() }
              )
      )
  }
  

内容的提问来源于stack exchange，提问作者askSoap