Jetpack Compose Academy · Ders

Carousel'ler için LazyRow

Yatay olarak kaydırılan bir raf oluşturun.

2. ders / 413 adım

Carousel'ler için LazyRow, CoddyKit'te ücretsiz bir Jetpack Compose Academy dersidir. Bu, 4 dersinin 2. 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.

Scrolling Sideways

Sometimes content should slide left and right, like a movie shelf. For that you use LazyRow, the horizontal cousin of LazyColumn. ↔️

Why Not a Plain Row?

A plain Row composes every child immediately and cannot scroll. A LazyRow scrolls horizontally and only builds the items in view.

Basic LazyRow

You feed LazyRow items just like a column, but they line up side by side instead of stacking.

LazyRow {
    items(movies) { movie ->
        MovieCard(movie)
    }
}

Spacing Cards Apart

Carousel cards need gaps. Use horizontalArrangement with spacedBy to set a consistent space between each card.

LazyRow(
    horizontalArrangement = Arrangement.spacedBy(12.dp)
) { }

Padding at the Ends

Add contentPadding so the first card peeks in from the edge instead of being clipped flush against it.

contentPadding = PaddingValues(horizontal = 16.dp)

Sizing Each Card

Give each carousel item a fixed width so cards stay uniform as the user swipes through them.

MovieCard(movie, Modifier.width(140.dp))

A Peek of the Next Card

Make a fraction of the next card visible to hint there is more. A slightly smaller card width relative to the screen does this nicely.

val cardWidth = screenWidth * 0.8f
MovieCard(movie, Modifier.width(cardWidth))

Headers Above Carousels

A carousel usually sits under a title. Compose the LazyRow inside a Column, with a Text header above it.

Column {
    Text("Trending Now")
    LazyRow { items(movies) { MovieCard(it) } }
}

Nesting in a LazyColumn

A home screen often stacks many carousels. Place several LazyRow rows inside a parent LazyColumn for a Netflix-style feed.

LazyColumn {
    items(shelves) { shelf ->
        Shelf(shelf)
    }
}

Each Row Needs Width

A LazyRow inside a LazyColumn fills the available width automatically. Just ensure the parent gives it a finite width to measure against.

When to Use LazyRow

Reach for LazyRow for shelves, chip filters, story bubbles, and any content that invites a horizontal swipe rather than a downward scroll.

Quick Check

Think about horizontal scrolling.

İnteraktif derste cevapla

Recap: Carousels

You built horizontal shelves with LazyRow: side-by-side items, spacing, end padding, fixed-width cards, and nesting inside a feed. 🎬

Başlamak ücretsiz

Yapay zeka eğitmeniyle Kotlin öğren — ücretsiz

Tarayıcında gerçek kod yaz ve çalıştır, 7/24 yapay zeka eğitmeninden anında yardım al; web'de ya da uygulamada kaldığın yerden devam et.

Kurslar: 30
Dersler: 120

Ücretsiz öğrenmeye başla Tüm kursu görüntüle

Sıkça Sorulan Sorular

“Carousel'ler için LazyRow” dersi ücretsiz mi?

Evet — “Carousel'ler için LazyRow” 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.

“Carousel'ler için LazyRow” dersinde ne öğreneceğim?

Yatay olarak kaydırılan bir raf oluşturun. 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 2. dersidir.

“Carousel'ler için LazyRow” 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