Jetpack Compose Academy · درس

حالة التمرير والتمرير البرمجي

اقرأ موضع تمرير القائمة وتحكم فيه

الدرس 4 من 413 خطوة

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

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

Controlling the Scroll

Sometimes you need to read how far a list has scrolled, or jump it somewhere yourself. That is the job of a scroll state. 🎚️

rememberLazyListState

Create and hold a list state with rememberLazyListState, then pass it to your LazyColumn, LazyRow, or grid.

val listState = rememberLazyListState()
LazyColumn(state = listState) { }

Grids Have State Too

A grid uses its own holder, rememberLazyGridState. Wire it the same way to track and drive a LazyVerticalGrid.

val gridState = rememberLazyGridState()
LazyVerticalGrid(state = gridState, columns = GridCells.Fixed(2)) { }

Reading the First Item

Ask the state for firstVisibleItemIndex to know which item sits at the top of the viewport right now.

val firstIndex = listState.firstVisibleItemIndex

Detecting Scroll Direction

The flag isScrollInProgress tells you whether the user is actively scrolling, handy for hiding a toolbar while they move.

if (listState.isScrollInProgress) hideToolbar()

Jump Instantly

To snap straight to an item with no animation, call scrollToItem from a coroutine scope.

scope.launch {
    listState.scrollToItem(index = 0)
}

Scroll Smoothly

For a gentle glide instead of a jump, use animateScrollToItem. It is great for a back-to-top button.

scope.launch {
    listState.animateScrollToItem(0)
}

Why a Coroutine Scope

Scrolling is a suspend operation, so it must run in a coroutine. Grab a rememberCoroutineScope to launch it from a click.

val scope = rememberCoroutineScope()
Button(onClick = { scope.launch { listState.animateScrollToItem(0) } }) { }

Show a Back-to-Top Button

Combine the two ideas: derive a visibility flag from firstVisibleItemIndex, then animate-scroll to zero on tap.

val showFab by remember {
    derivedStateOf { listState.firstVisibleItemIndex > 5 }
}

Survives Recomposition

Because the state is remembered, the scroll position survives recomposition. Use rememberSaveable variants to keep it across rotation.

State Drives the UI

The pattern is consistent: hold a scroll state, read it to react to position, and call its scroll functions to move the list yourself.

Quick Check

One on smooth scrolling.

Recap: Scroll Control

You learned to hold a scroll state, read firstVisibleItemIndex, and drive lists with scrollToItem and animateScrollToItem from a coroutine. 🚀

البدء مجانًا

تعلم Kotlin مع معلم ذكاء اصطناعي — مجانًا

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

الدورات
30
الدروس
120

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

هل درس «حالة التمرير والتمرير البرمجي» مجاني؟

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

ماذا ستتعلم في «حالة التمرير والتمرير البرمجي»؟

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

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

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

كم من الوقت يستغرق درس «حالة التمرير والتمرير البرمجي»؟

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

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

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

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

  1. معارض LazyVerticalGrid
  2. ‏LazyRow للتنقل الدائري
  3. خلايا الشبكة المتكيفة مقابل الثابتة
  4. حالة التمرير والتمرير البرمجي
← العودة إلى Jetpack Compose Academy