Adaptive und feste Grid-Zellen
Machen Sie Grids an die Bildschirmbreite anpassbar.
Adaptive und feste Grid-Zellen ist eine kostenlose Jetpack Compose Academy-Lektion auf CoddyKit. Dies ist Lektion 3 von 4. Du kannst die komplette Lektion unten kostenlos lesen – dann übst du sie direkt im Browser mit einem integrierten Code-Editor und einem KI-Tutor rund um die Uhr. Sie ist Teil des Jetpack Compose Academy-Lernpfads, und dein Fortschritt wird über Web und CoddyKit-App synchronisiert. Der Jetpack Compose Academy-Kurs umfasst insgesamt 4 Lektionen.
Teile dieser Lektion wurden noch nicht übersetzt und werden auf Englisch angezeigt.
Two Ways to Size Cells
A grid needs to know how wide its columns are. Compose offers two strategies: Fixed column counts and Adaptive minimum widths. 📐
Fixed Recap
You already met GridCells.Fixed(n). It always shows n columns, so cells grow or shrink to fit the screen width.
columns = GridCells.Fixed(3)The Problem With Fixed
On a phone, 3 columns look great. On a tablet, those same 3 columns become awkwardly wide. Fixed does not adapt to bigger screens.
Enter Adaptive
With GridCells.Adaptive(minSize), you specify a minimum cell width. Compose fits as many columns as possible, then stretches them to fill.
columns = GridCells.Adaptive(minSize = 120.dp)How Adaptive Counts
Compose divides the available width by your minSize to decide the column count. A wider screen simply gets more columns, automatically.
Responsive by Default
Adaptive grids look right on phones, foldables, and tablets without any extra code. One minSize value handles every screen. 📱
Choosing a minSize
Pick a minSize that keeps content readable at its smallest. Too tiny and cells feel cramped; too large and small phones show one column.
GridCells.Adaptive(minSize = 96.dp)When Fixed Still Wins
Use Fixed when the design demands an exact count, like a 7-day calendar week that must always be 7 columns wide.
GridCells.Fixed(7)Mixing With Spacing
Both strategies pair with arrangements. The minSize in Adaptive is measured before spacing, so leave room for your gaps.
LazyVerticalGrid(
columns = GridCells.Adaptive(120.dp),
horizontalArrangement = Arrangement.spacedBy(8.dp)
) { }LazyHorizontalGrid Too
The same Fixed and Adaptive cells work in LazyHorizontalGrid, which scrolls sideways and fills rows top to bottom.
LazyHorizontalGrid(rows = GridCells.Adaptive(80.dp)) { }A Simple Rule
Default to Adaptive for content galleries so they scale across devices. Reserve Fixed for layouts that need a precise, meaningful column count.
Quick Check
Pick the responsive choice.
Recap: Sizing Cells
You compared Fixed exact counts with Adaptive minimum widths. Adaptive scales across devices; Fixed locks an intentional column count. 🎯
Häufig gestellte Fragen
Ist die Lektion „Adaptive und feste Grid-Zellen“ kostenlos?
Ja — der vollständige Text von „Adaptive und feste Grid-Zellen“ ist hier im Web kostenlos zu lesen. Um sie interaktiv zu üben (integrierter Code-Editor und 24/7 KI-Tutor) und den Rest des Jetpack Compose Academy-Kurses freizuschalten, upgrade auf CoddyKit PRO. Der Jetpack Compose Academy-Kurs umfasst insgesamt 4 Lektionen.
Was lerne ich in „Adaptive und feste Grid-Zellen“?
Machen Sie Grids an die Bildschirmbreite anpassbar. Du übst Jetpack Compose Academy mit praktischem Code, den du direkt im Browser ausführst, und ein 24/7 KI-Tutor beantwortet deine Fragen während du die Lektion bearbeitest.
Brauche ich Erfahrung, um Jetpack Compose Academy zu starten?
Keine Vorkenntnisse erforderlich. Jetpack Compose Academy auf CoddyKit ist für Anfänger bis fortgeschrittene Lernende strukturiert, sodass du hier starten oder von Anfang an beginnen und in deinem eigenen Tempo voranschreiten kannst. Dies ist Lektion 3 von 4.
Wie lange dauert die Lektion „Adaptive und feste Grid-Zellen“?
Die meisten CoddyKit-Lektionen dauern etwa 5–10 Minuten. Jede ist kompakt und interaktiv, sodass du stetig Fortschritte machst und genau dort weitermachst, wo du aufgehört hast – im Web und in der App.
Kann ich in dieser Jetpack Compose Academy-Lektion Code schreiben und ausführen?
Ja. Jede Jetpack Compose Academy-Lektion enthält einen integrierten Code-Editor, sodass du echten Code direkt in deinem Browser schreibst und ausführst und sofort KI-Feedback erhältst — ohne lokale Einrichtung erforderlich.
Alle Lektionen in diesem Kurs
- LazyVerticalGrid-Galerien
- LazyRow für Karussells
- Adaptive und feste Grid-Zellen
- Scroll-State und programmgesteuertes Scrollen