Jetpack Compose Row - 绘制覆盖子元素兄弟节点

Question

我有一个LazyColumn，它的子项是Row

我想在其中一个行元素上绘制一个圆形，使其与其他子元素重叠，但是圆形被画在了左侧和底部的兄弟元素下面

我尝试使用Modifier.zIndex进行调整，但没有成功。

这是我的代码：

@Composable
fun HorizontalGrid() {
    val days = (1..300).toList()
    val weekChunks: List<List<Int>> = days.chunked(7)
    LazyColumn {
        items(weekChunks) { days: List<Int> ->
            Week(days)
        }
    }
}

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

@Composable
fun Day(dayOfWeek: Int) {
    Box(
        modifier = Modifier
            .size(48.dp)
            .padding(4.dp)
            .background(Color.LightGray)
    ) {
        Text(
            modifier = Modifier
                .drawWithContent {
                    if (dayOfWeek == 17) {
                        drawContent()
                        drawCircle(Color.Gray, radius = 150F, center = Offset(50f, 50f))
                    }
                },
            text = dayOfWeek.toString()
        )
    }
}

这是我的理解：

这是我得到的：

我需要的是圆形覆盖所有的正方形。

- Carlos Rojas

---

你把 z-index 加在哪个可组合元素上了？你是在 Box 上试过了吗？还是只在 Text 上试过了？ - Johann

Answer 1

有两个地方需要添加 zIndex

代码

@Composable
fun HorizontalGrid() {
    val days = (1..300).toList()
    val weekChunks: List<List<Int>> = days.chunked(7)
    LazyColumn {
        items(items = weekChunks) { days: List<Int> ->
            Week(days)
        }
    }
}

@Composable
fun Week(days: List<Int>) {
    Row(
        horizontalArrangement = Arrangement.SpaceEvenly,
        modifier = Modifier
            .fillMaxSize()
            .zIndex(if (days.contains(17)) 2f else 1f)
    ) {
        days.forEach {
            Day(it)
        }
    }
}

@Composable
fun Day(dayOfWeek: Int) {
    Box(
        modifier = Modifier
            .zIndex(if (dayOfWeek == 17) 2f else 1f)
            .size(48.dp)
            .padding(4.dp)
            .background(Color.LightGray)
    ) {
        Text(
            modifier = Modifier
                .drawWithContent {
                    if (dayOfWeek == 17) {
                        drawContent()
                        drawCircle(Color.Gray, radius = 150F, center = Offset(50f, 50f))
                    }
                },
            text = dayOfWeek.toString()
        )
    }
}

结果

- Sergei S