Column : disposition verticale et configuration du conteneur dans Compose

Qu'est-ce que Column dans Jetpack Compose

Column est une fonction Composable qui accepte des paramètres optionnels : modifier, verticalArrangement, horizontalAlignment et content — un lambda avec ColumnScope. À l'intérieur de Column, les fonctions Composable enfants sont disposées de haut en bas dans l'ordre de déclaration. La hauteur de Column est égale à la somme des hauteurs des enfants plus l'espace spécifié par Arrangement. La largeur est égale à la largeur maximale de l'enfant en tenant compte d'Alignment.

Column est un conteneur invisible : il n'a pas de fond ni de bordure par défaut. Si vous avez besoin d'un fond, ajoutez Modifier.background() à Column lui-même. Contrairement à LazyColumn, Column rend tous les éléments enfants simultanément et ne prend pas en charge la virtualisation. Cela signifie que Column ne convient qu'aux petits ensembles de données — jusqu'à 10-15 éléments. Pour les longues listes, utilisez LazyColumn.

ColumnScope est le receiver du lambda content de Column. Il fournit des modificateurs supplémentaires qui ne fonctionnent qu'à l'intérieur de Column : weight(), align(), alignByBaseline(). Ces modificateurs n'ont pas de sens en dehors de Column car ils dépendent des spécificités de la disposition verticale. Par exemple, Modifier.align(Alignment.CenterHorizontally) aligne un élément enfant au centre de Column horizontalement.

Paramètres de Column : Arrangement, Alignment, Modifier

VerticalArrangement détermine comment l'espace vertical est distribué entre les éléments. Valeurs disponibles : Arrangement.Top (par défaut), Bottom, Center, SpaceBetween, SpaceEvenly, SpaceAround. Si la hauteur de Column est supérieure à la somme des hauteurs des éléments, Arrangement distribue l'espace libre. Si les éléments occupent toute la hauteur, Arrangement n'a aucun effet.

HorizontalAlignment définit l'alignement horizontal de chaque élément enfant. Alignment.Start (par défaut pour LTR), CenterHorizontally, End. Alignment agit sur chaque élément indépendamment : si un élément est étroit et un autre large, le premier sera aligné, le second peut dépasser les limites de Column. Alignment ne fonctionne que si Column a une largeur fixe ou fillMaxWidth.

Modifier pour Column : Column accepte un Modifier qui s'applique au conteneur lui-même. Modifier.fillMaxWidth(), fillMaxHeight(), size(), padding() — tous les modificateurs standard fonctionnent. Note spéciale : Modifier.height(IntrinsicSize.Min) force Column à calculer la hauteur minimale en fonction des éléments enfants en utilisant la mesure Intrinsic.

@Composable
fun ColumnArrangementDemo() {
    Column(
        modifier = Modifier.fillMaxSize().background(Color(0xFFF5F5F5)),
        verticalArrangement = Arrangement.SpaceEvenly,
        horizontalAlignment = Alignment.CenterHorizontally
    ) {
        Text("Haut", modifier = Modifier.background(Color.Cyan))
        Text("Milieu", modifier = Modifier.background(Color.Magenta))
        Text("Bas", modifier = Modifier.background(Color.Yellow))
    }
}

    // IntrinsicSize : Column ajuste la hauteur au contenu
@Composable
fun IntrinsicColumn() {
    Column(
        modifier = Modifier
            .height(IntrinsicSize.Min)
            .width(200.dp)
    ) {
        Text("Texte court")
        Text("Un texte très long qui s'adaptera à l'intérieur de la colonne")
    }
}

Column weight : répartition de l'espace entre les éléments

Modifier.weight() est un modificateur ColumnScope qui distribue l'espace vertical libre entre les éléments de Column proportionnellement aux poids spécifiés. Si Column occupe 400dp de hauteur et que les éléments enfants totalisent 100dp, les 300dp restants sont répartis entre les éléments weight. Un élément avec weight(2f) recevra deux fois plus d'espace qu'un élément avec weight(1f).

fill — le deuxième paramètre de weight : weight(weight: Float, fill: Boolean = true). Si fill = true (par défaut), l'élément s'étend sur toute la hauteur disponible. Si fill = false, l'élément n'occupe que sa hauteur intrinsèque et l'espace restant reste vide. Ceci est utile lorsqu'un élément doit être collé d'un côté mais que weight ne définit que la proportion de distribution de l'espace vide.

Limitations de weight : weight ne fonctionne que dans Column avec une hauteur fixe ou fillMaxHeight(). Si la hauteur de Column est déterminée par les éléments enfants (wrap content), les poids n'ont pas de sens — il n'y a pas d'espace libre à distribuer. De plus, weight ne peut pas être combiné avec Modifier.height() sur le même élément — ils entrent en conflit et weight est ignoré.

@Composable
fun WeightedColumn() {
    Column(
        modifier = Modifier.fillMaxHeight().width(300.dp)
    ) {
        // Prend 1/6 de la hauteur (weight 1 de somme 1+2+3=6)
        Box(
            modifier = Modifier
                .weight(1f)
                .fillMaxWidth()
                .background(Color.Red)
        )
        // Prend 2/6 de la hauteur
        Box(
            modifier = Modifier
                .weight(2f)
                .fillMaxWidth()
                .background(Color.Green)
        )
        // Prend 3/6 de la hauteur
        Box(
            modifier = Modifier
                .weight(3f)
                .fillMaxWidth()
                .background(Color.Blue)
        )
    }
}

Column vs LazyColumn : quand utiliser quoi

Column rend tous les éléments enfants immédiatement. S'il y a plus de 10-15 éléments, Column crée une charge importante sur la composition et la mesure. LazyColumn, en revanche, ne rend que les éléments visibles et réutilise les invisibles. Pour les longues listes, les listes avec des milliers d'éléments, les listes infinies ou les chats — LazyColumn est obligatoire.

Quand Column est meilleur : écrans de formulaires (3-10 champs), cartes de profil, colonnes verticales avec icônes, menus. Column prend également en charge IntrinsicSize, utile pour la hauteur adaptative. De plus, Column est plus facile à déboguer — pas de virtualisation, tous les éléments sont visibles dans Layout Inspector. Pour une UI statique, Column est le bon choix.

LazyColumn fournit : mise en cache des éléments, identité basée sur la clé, animation d'ajout/suppression (animateItemPlacement), en-têtes fixes (sticky headers). Si la liste contient des éléments de différents types (différents viewType), utilisez LazyColumn avec sealed class dans items. Column ne prend pas en charge les sticky headers (ils doivent être émulés via une Column défilante). De plus, LazyColumn prend en charge LazyVerticalGrid lors de l'utilisation de GridCells.

Exemples pratiques d'utilisation de Column

Examinons un écran de profil utilisateur où Column est utilisé comme conteneur principal pour l'avatar, le nom, la bio et les boutons d'action. Ici, Column avec IntrinsicSize.Min s'adapte au contenu et weight est utilisé pour répartir l'espace entre les sections.

@Composable
fun UserProfileCard(name: String, bio: String) {
    Card(
        modifier = Modifier.fillMaxWidth().padding(16.dp),
        elevation = CardDefaults.cardElevation(defaultElevation = 4.dp)
    ) {
        Column(
            modifier = Modifier.fillMaxWidth().padding(16.dp),
            horizontalAlignment = Alignment.CenterHorizontally,
            verticalArrangement = Arrangement.spacedBy(8.dp)
        ) {
            // Avatar
            Icon(
                imageVector = Icons.Default.AccountCircle,
                contentDescription = "Avatar",
                modifier = Modifier.size(64.dp)
            )
            // Nom
            Text(name, style = MaterialTheme.typography.headlineSmall)
            // Bio
            Text(bio, style = MaterialTheme.typography.bodyMedium,
                modifier = Modifier.padding(top = 4.dp))
            // Boutons d'action
            Row(
                horizontalArrangement = Arrangement.spacedBy(12.dp),
                modifier = Modifier.padding(top = 12.dp)
            ) {
                Button(onClick = { }) { Text("Message") }
                OutlinedButton(onClick = { }) { Text("Suivre") }
            }
        }
    }
}

Dans l'exemple, Column utilise Arrangement.spacedBy(8.dp) pour un espacement uniforme entre les éléments. horizontalAlignment = CenterHorizontally centre l'avatar, le nom et la bio. Le Row à l'intérieur de Column est un conteneur imbriqué pour les boutons sur une ligne. Cette combinaison de Column (disposition verticale) et Row (disposition horizontale) est un modèle typique de construction d'UI dans Compose.