Jetpack Compose Academy · Ders

LazyVerticalGrid Galerileri

Öğeleri kaydırılabilir bir ızgarada düzenleyin.

LazyVerticalGrid Galerileri, CoddyKit'te ücretsiz bir Jetpack Compose Academy dersidir. Bu, 4 dersinin 1. dersidir. Aşağıdan dersin tamamını ücretsiz okuyabilir, sonra tarayıcıda yerleşik kod editörü ve 7/24 yapay zeka koçu ile uygulamalı olarak pratik yapabilirsin. Bu, Jetpack Compose Academy öğrenme yolunun bir parçasıdır ve ilerlemeniz web ve CoddyKit uygulaması arasında senkronize olur. Jetpack Compose Academy kursu toplamda 4 dersten oluşur.

Bu dersin bazı bölümleri henüz çevrilmemiş olup İngilizce olarak gösterilmektedir.

Grids in Compose

When a screen full of photos needs neat rows and columns, you reach for LazyVerticalGrid. It scrolls vertically and only composes the cells you can see. 🖼️

Why Lazy?

Like LazyColumn, a lazy grid skips off-screen items. A thousand-image gallery stays smooth because Compose builds cells on demand, not all at once.

The Basic Setup

You give LazyVerticalGrid a column count and feed it items. Each item becomes one cell, and Compose flows them left to right, then down.

LazyVerticalGrid(columns = GridCells.Fixed(2)) {
    items(photos) { photo ->
        PhotoCell(photo)
    }
}

GridCells.Fixed

Use GridCells.Fixed(n) when you want an exact column count, like a tidy 3-across icon grid that never changes.

columns = GridCells.Fixed(3)

Spacing Between Cells

Add breathing room with Arrangement parameters. They control the gap between rows and the gap between columns separately.

LazyVerticalGrid(
    columns = GridCells.Fixed(2),
    verticalArrangement = Arrangement.spacedBy(8.dp),
    horizontalArrangement = Arrangement.spacedBy(8.dp)
) { }

Padding Around the Grid

Use contentPadding to inset the whole grid from the screen edges. It keeps the first and last cells from hugging the borders.

contentPadding = PaddingValues(16.dp)

Items From a List

The items builder takes your data list and a cell lambda. Each element of the list maps to exactly one composed cell.

items(galleryPhotos) { photo ->
    AsyncImage(model = photo.url, contentDescription = null)
}

A Single Special Cell

Need a header or a one-off cell? Use item (singular) for content that should not repeat over your list.

item { GalleryTitle() }
items(photos) { PhotoCell(it) }

Spanning Across Columns

A cell can stretch across the whole row with a span. This is perfect for a section title sitting above its photos.

item(span = { GridItemSpan(maxLineSpan) }) {
    SectionHeader("Recent")
}

Keep Cells Square

Photo galleries look best when cells are square. Apply aspectRatio(1f) to each cell so height tracks its width.

Box(Modifier.aspectRatio(1f)) { PhotoCell(photo) }

Grid vs List

Choose a grid when items are visual and equally weighted, like thumbnails. Choose a list when each row is a distinct, full-width record.

Quick Check

A quick one on column counts.

Recap: Grid Galleries

You met LazyVerticalGrid: lazy cells, a column count, spacing, padding, and spans. It is your go-to for scrollable photo galleries. ✨

Sıkça Sorulan Sorular

“LazyVerticalGrid Galerileri” dersi ücretsiz mi?

Evet — “LazyVerticalGrid Galerileri” dersin tüm metni burada web'de ücretsiz olarak okunabilir. Etkileşimli olarak pratik yapmak (yerleşik kod editörü ve 7/24 yapay zeka koçu) ve Jetpack Compose Academy kursunun geri kalanını açmak için CoddyKit PRO'ya yükselt. Jetpack Compose Academy kursu toplamda 4 dersten oluşur.

“LazyVerticalGrid Galerileri” dersinde ne öğreneceğim?

Öğeleri kaydırılabilir bir ızgarada düzenleyin. Jetpack Compose Academy ile uygulamalı kodu tarayıcıda doğrudan çalıştırarak pratik yaparsın ve 7/24 yapay zeka koçu dersi çalışırken sorularını yanıtlar.

Jetpack Compose Academy öğrenmeye başlamak için deneyim gerekli mi?

Önceden deneyim gerekmez. CoddyKit'te Jetpack Compose Academy, başlangıçtan ileri seviyeye kadar yapılandırıldığı için buradan başlayabilir veya başından başlayıp kendi hızında ilerleme yapabilirsin. Bu, 4 dersinin 1. dersidir.

“LazyVerticalGrid Galerileri” dersi ne kadar sürer?

Çoğu CoddyKit dersi yaklaşık 5–10 dakika sürer. Her biri kısa ve etkileşimli olduğu için sabit ilerleme yaparsın ve web ile uygulama arasında tam olarak bıraktığın yerden devam edebilirsin.

Bu Jetpack Compose Academy dersinde kod yazıp çalıştırabilir miyim?

Evet. Her Jetpack Compose Academy dersi yerleşik bir kod editörü içerir, bu sayede tarayıcıda gerçek kod yazıp çalıştırabilir ve anlık yapay zeka geri bildirimi alırsın — yerel kurulum gerekli değildir.

Bu kursun tüm dersleri

← Jetpack Compose Academy Sayfasına Dön