Kaip nustatyti individualų naudotojo sąsajos maketą Jetpack Compose?

Jetpack Compose'e, norint apibrėžti individualų naudotojo sąsajos maketą, naudojama funkcija Layout, leidžianti savarankiškai valdyti vaikų elementų išdėstymą ir dydį.

Pavyzdys, kaip sukurti individualų komponuotą:

@Composable
fun CustomLayout(
    modifier: Modifier = Modifier,
    content: @Composable () -> Unit
) {
    Layout(
        content = content,
        modifier = modifier
    ) { measurables, constraints ->
        // Matavimas vaikų elementų
        val placeables = measurables.map { it.measure(constraints) }

        // Nustatome konteinerio dydį
        val width = placeables.maxOfOrNull { it.width } ?: constraints.minWidth
        val height = placeables.sumOf { it.height }

        layout(width, height) {
            var yPosition = 0
            placeables.forEach { placeable ->
                placeable.placeRelative(x = 0, y = yPosition)
                yPosition += placeable.height
            }
        }
    }
}

Šiame pavyzdyje vaikų elementai išdėstomi vertikaliai vienas po kito. Šis požiūris suteikia visišką kontrolę elementų išdėstymo UI.