kotlin - Jetpack Compose Row - 绘制子元素 sibling

Question

我有一个 LazyColumn 和 Rows 作为 child

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

我曾尝试使用 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()
        )
    }
}

结果