Jetpack Compose Academy · Leçon

Row : placer côte à côte

Disposez les éléments enfants de gauche à droite.

Row : placer côte à côte est une leçon Jetpack Compose Academy gratuite sur CoddyKit. Ceci est la leçon 2 sur 4. Tu peux lire la leçon complète ci-dessous gratuitement — puis la pratiquer en direct dans le navigateur avec un éditeur de code intégré et un tuteur IA 24/7. Elle fait partie du parcours d'apprentissage Jetpack Compose Academy, et ta progression se synchronise sur le web et l'application CoddyKit. Le cours Jetpack Compose Academy comprend 4 leçons au total.

Certaines parties de cette leçon n'ont pas encore été traduites et s'affichent en anglais.

Side by Side

When you want children in a horizontal line, you use a Row. It is the sideways sibling of Column. ➡️

Your First Row

A Row takes a trailing lambda just like Column. Each child you call inside lands next to the previous one, left to right.

Row {
    Text("Left")
    Text("Right")
}

Order Is Left to Right

Children flow in source order across the screen. The first Composable sits at the start, the next beside it, and so on.

A Classic Icon Plus Label

Rows shine for small pairs, like an Icon next to a Text label. That side-by-side combo is everywhere in real apps.

Row {
    Icon(Icons.Default.Star, null)
    Text("Favorite")
}

Spacing Between Children

Use horizontalArrangement with spacedBy to drop an even gap between each child instead of padding them one by one.

Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
    Text("A")
    Text("B")
}

Aligning Children Vertically

Set verticalAlignment to line children up across the row's height. CenterVertically keeps an icon and tall text neatly centered.

Row(verticalAlignment = Alignment.CenterVertically) {
    Icon(Icons.Default.Star, null)
    Text("Centered")
}

Pushing Items Apart

Arrangement.SpaceBetween pins the first child to the start and the last to the end, spreading any extra space between them.

Row(horizontalArrangement = Arrangement.SpaceBetween) {
    Text("Start")
    Text("End")
}

Sharing Space with Weight

Give a child weight in its modifier to make it claim the leftover width. Two equal weights split the row evenly.

Row {
    Text("Half", Modifier.weight(1f))
    Text("Half", Modifier.weight(1f))
}

Rows Don't Scroll Yet

A plain Row does not scroll. Children that overflow the width get clipped, so keep a basic Row to content that fits.

Adding Horizontal Scroll

For wide content, attach horizontalScroll to the Row's modifier and the whole strip becomes swipeable sideways.

Row(modifier = Modifier.horizontalScroll(rememberScrollState())) {
    Text("Wide content")
}

Rows Inside Columns

Most screens combine both. A Column stacks sections vertically while each section uses a Row to lay its pieces side by side.

Quick Check

Let's confirm how a Row lays out its children.

Recap: Row

You learned Row: it places children left to right, uses arrangement and alignment to position them, and shares width with weight for flexible layouts.

Questions Fréquemment Posées

La leçon « Row : placer côte à côte » est-elle gratuite ?

Oui — le texte complet de « Row : placer côte à côte » est gratuit à lire ici sur le web. Pour la pratiquer de manière interactive (un éditeur de code intégré et un tuteur IA 24/7) et déverrouiller le reste du cours Jetpack Compose Academy, passe à CoddyKit PRO. Le cours Jetpack Compose Academy comprend 4 leçons au total.

Qu'est-ce que j'apprendrai dans « Row : placer côte à côte » ?

Disposez les éléments enfants de gauche à droite. Tu pratiques Jetpack Compose Academy avec du code pratique que tu exécutes directement dans le navigateur, et un tuteur IA 24/7 répond à tes questions au fur et à mesure que tu avances dans la leçon.

Dois-je avoir de l'expérience pour commencer Jetpack Compose Academy ?

Aucune expérience préalable n'est requise. Jetpack Compose Academy sur CoddyKit est structuré pour les débutants jusqu'aux apprenants avancés, donc tu peux commencer ici ou depuis le début et avancer à ton rythme. Ceci est la leçon 2 sur 4.

Combien de temps prend la leçon « Row : placer côte à côte » ?

La plupart des leçons CoddyKit prennent environ 5–10 minutes. Chacune est courte et interactive, tu progresses régulièrement et tu repiques exactement où tu t'es arrêté sur le web et l'app.

Peux-tu écrire et exécuter du code dans cette leçon Jetpack Compose Academy ?

Oui. Chaque leçon Jetpack Compose Academy inclut un éditeur de code intégré, tu écris et exécutes du vrai code directement dans ton navigateur et tu reçois des retours IA instantanés — aucune configuration locale requise.

Toutes les leçons de ce cours

← Retour à Jetpack Compose Academy