LazyColumn/LazyRow中阴影异常裁剪问题的解决求助

下面是几个针对性的解决思路，可解决阴影被异常裁剪的问题：

• 给LazyRow预留阴影空间并关闭裁剪
  LazyRow默认会裁剪超出自身边界的内容，先给它添加与阴影半径匹配的水平内边距，确保阴影有足够绘制区域，同时关闭裁剪：

  LazyRow(
      modifier = Modifier.clip(false),
      contentPadding = PaddingValues(horizontal = 40.dp) // 数值与阴影半径一致
  ) {
      // 你的item列表逻辑
  }
  

• 用父容器包裹单个item，转移阴影绘制层级
  将每个LazyRow的item放在Box中，给Box添加额外padding，再把阴影Modifier应用在Box上，让阴影绘制在padding扩展的区域内，避免和相邻元素重叠时被裁剪：

  LazyRow {
      items(dataList) { item ->
          val isFocused = remember { mutableStateOf(false) }
          Box(
              modifier = Modifier
                  .padding(horizontal = 20.dp, vertical = 20.dp)
                  .shadow(
                      elevation = if (isFocused.value) 40.dp else 0.dp,
                      shape = RoundedCornerShape(8.dp)
                  )
                  .onFocusChanged { isFocused.value = it.isFocused }
          ) {
              // 原item内容组件
              ItemContent(item)
          }
      }
  }
  

• 自定义阴影Modifier时手动控制裁剪逻辑
  如果用drawBehind仍有问题，换成drawWithContent手动放开阴影绘制的裁剪限制：

  fun Modifier.focusShadow(elevation: Dp, shape: Shape) = this.drawWithContent {
      val pxElevation = elevation.toPx()
      val outline = shape.createOutline(size, layoutDirection, this)
      drawIntoCanvas { canvas ->
          // 临时扩大裁剪范围，绘制阴影
          canvas.save()
          canvas.clipRect(
              left = -pxElevation,
              top = -pxElevation,
              right = size.width + pxElevation,
              bottom = size.height + pxElevation,
              clipOp = ClipOp.Difference
          )
          drawShadow(
              path = outline.toPath(),
              elevation = pxElevation,
              ambientColor = Color.Black.copy(alpha = 0.2f),
              spotColor = Color.Black.copy(alpha = 0.3f)
          )
          canvas.restore()
          // 绘制原内容
          drawContent()
      }
  }
  

  使用时直接给焦点元素添加Modifier.focusShadow(40.dp, RoundedCornerShape(8.dp))即可。

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