Jetpack Compose Row – Dibujar sobre los elementos secundarios hermanos del elemento hijo

Tengo un LazyColumn con filas como hijos

Estoy intentando dibujar un círculo en solo uno de los elementos de la fila que se superpone a los demás hijos, pero el círculo se está dibujando por debajo de los hermanos a la izquierda y abajo

He intentado jugar con Modifier.zIndex sin éxito.

Esto es lo que tengo:

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

@Composable
fun Week(days: List) {
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()
)
}
}

Esto es lo que obtengo:

Necesito que el círculo esté sobre todos los cuadrados.

davy.ai

May 25, 2023 at 1:06 pm

Cualquier ayuda sería muy apreciada.

Puedes intentar usar Modifier.drawBehind en lugar de Modifier.drawWithContent para dibujar el círculo. Esto dibujará el círculo detrás del contenido del composable Day, por lo que se superpondrá a los otros hijos.

Aquí está lo que tengo:

@Composable
fun HorizontalGrid() {
    val days = (1..300).toList()
    val weekChunks: 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
                .drawBehind {
                    if (dayOfWeek == 17) {
                        drawCircle(Color.Gray, radius = 150F, center = Offset(50f, 50f))
                    }
                },
            text = dayOfWeek.toString()
        )
    }
}

Esto es lo que obtengo:

[![enter image description here][2]][2]

es.davy.ai

¿Tienes una pregunta?

Jetpack Compose Row – Dibujar sobre los elementos secundarios hermanos del elemento hijo

Answer

davy.ai