Jetpack Compose中Row子元素绘制的圆形被同级组件遮挡如何解决

• Compose 中 zIndex 仅在同一个直接父容器的同级组件之间生效，之前调整不生效是因为没有覆盖两个层级的排序规则：
  1. 单周 Row 内的 Day 从左到右按添加顺序绘制，默认左侧先绘制的组件会被右侧后绘制的组件覆盖，需要单独给 17 号对应的 Day 设置更高的 zIndex，才能让它覆盖同周左侧的其他格子。
  2. LazyColumn 内的每周 Row 从上到下按添加顺序绘制，默认上方先绘制的行会被下方后绘制的行覆盖，需要单独给包含 17 号的周 Row 设置更高的 zIndex，才能让它覆盖下方其他周的格子。
• Compose 组件默认开启边界裁剪，在 Day 内部绘制的超出自身尺寸的圆形部分会被直接剪掉，无法显示到其他组件区域。

@Composable
fun HorizontalGrid() {
    val days = (1..300).toList()
    val weekChunks: List<List<Int>> = days.chunked(7)
    LazyColumn {
        items(weekChunks) { days: List<Int> ->
            // 给包含17号的周设置更高zIndex，整行优先级高于其他周
            Week(
                days = days,
                modifier = if (days.contains(17)) Modifier.zIndex(1f) else Modifier
            )
        }
    }
}

@Composable
fun Week(days: List<Int>, modifier: Modifier = Modifier) {
    Row(
        horizontalArrangement = Arrangement.SpaceEvenly,
        modifier = modifier.fillMaxWidth()
    ) {
        days.forEach { day ->
            Day(dayOfWeek = day)
        }
    }
}

@Composable
fun Day(dayOfWeek: Int) {
    Box(
        modifier = Modifier
            .size(48.dp)
            .padding(4.dp)
            .background(Color.LightGray)
            // 关闭边界裁剪，允许绘制内容超出当前组件的尺寸范围
            .clipToBounds(false)
            // 给17号格子设置更高zIndex，优先级高于同周其他格子
            .zIndex(if (dayOfWeek == 17) 1f else 0f)
            .drawWithContent {
                drawContent()
                if (dayOfWeek == 17) {
                    drawCircle(Color.Gray, radius = 150F, center = Offset(50f, 50f))
                }
            }
    ) {
        Text(text = dayOfWeek.toString())
    }
}

修改后绘制的圆形就会显示在所有方格组件的上层。

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