Comment peut-on définir une mise en page utilisateur individuelle dans Jetpack Compose?

Dans Jetpack Compose, pour définir une mise en page personnalisée de l'interface utilisateur, la fonction Layout est utilisée, ce qui permet de gérer indépendamment le placement et la taille des éléments enfants.

Exemple de création d'un compositeur personnalisé :

@Composable
fun CustomLayout(
    modifier: Modifier = Modifier,
    content: @Composable () -> Unit
) {
    Layout(
        content = content,
        modifier = modifier
    ) { measurables, constraints ->
        // Mesurer les éléments enfants
        val placeables = measurables.map { it.measure(constraints) }

        // Définir la taille du conteneur
        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
            }
        }
    }
}

Dans cet exemple, les éléments enfants sont placés verticalement les uns sous les autres. Cette approche donne un contrôle total sur la disposition des éléments dans l'UI.