Jetpack Compose Academy · درس

‏LazyRow للتنقل الدائري

أنشئ رفًا أفقيًا قابلًا للتمرير

‏LazyRow للتنقل الدائري درس مجاني في Jetpack Compose Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Jetpack Compose Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Jetpack Compose Academy 4 دروس في المجموع.

بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.

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.

Recap: Carousels

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

الأسئلة الشائعة

هل درس «‏LazyRow للتنقل الدائري» مجاني؟

نعم — نص درس «‏LazyRow للتنقل الدائري» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Jetpack Compose Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Jetpack Compose Academy 4 دروس في المجموع.

ماذا ستتعلم في «‏LazyRow للتنقل الدائري»؟

أنشئ رفًا أفقيًا قابلًا للتمرير تتمرن على Jetpack Compose Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.

هل أحتاج إلى خبرة سابقة لأبدأ Jetpack Compose Academy؟

لا تُشترط خبرة سابقة. Jetpack Compose Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.

كم من الوقت يستغرق درس «‏LazyRow للتنقل الدائري»؟

معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.

هل يمكنني كتابة وتشغيل أكواد في درس Jetpack Compose Academy هذا؟

نعم. كل درس في Jetpack Compose Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.

جميع الدروس في هذه الدورة

← العودة إلى Jetpack Compose Academy