Jetpack Compose Row - 在子元素兄弟元素上绘制

Question

我有LazyColumn一个Rows小时候

我试图在与其他子元素重叠的行元素之一上绘制一个圆圈，但该圆圈是在左侧和底部的兄弟姐妹下方绘制的

我尝试过玩，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()
        )
    }
}

这是我得到的：

我需要的是所有正方形上的圆圈。

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()
        )
    }
}

结果