إدارة حالة القائمة

رمز التقييم بثلاث نجوم

يمكن للقوائم القابلة للتمرير في Jetpack Compose، مثل LazyColumn وLazyRow، عرض كميات كبيرة من البيانات بكفاءة. ومع ذلك، يمكن أن تؤدي تغييرات الإعدادات، مثل تدوير الجهاز أو طي جهاز قابل للطي أو فتحه، إلى إعادة ضبط حالة القائمة، ما يجبر المستخدمين على التمرير مرة أخرى إلى موضعهم السابق.

أفضل الممارسات

يجب أن تحتفظ القوائم القابلة للتمرير بحالتها، وخاصةً موضع التمرير وحالة عناصر القائمة الفردية (مثل مربّعات إدخال النصوص)، أثناء جميع تغييرات الإعدادات لتوفير تجربة سلسة للمستخدمين.

المكوّنات

  • rememberLazyListState(): ينشئ ويتذكّر LazyListState يُستخدَم للتحكّم في موضع التمرير في القائمة ومراقبته. ويتم الاحتفاظ به تلقائيًا أثناء تغييرات الإعدادات.
  • rememberSaveable: يتذكّر قيمة الحالة أثناء تغييرات الإعدادات، ما يكون مفيدًا للاحتفاظ بحالات عناصر القائمة الفردية (مثل إدخالات مربّعات النص).

الخطوات

في Jetpack Compose، يتم الاحتفاظ تلقائيًا بموضع التمرير في القائمة عند استخدام حالة التمرير. للاحتفاظ بحالة عناصر القائمة الفردية المعقّدة (مثل إدخالات TextField)، استخدِم rememberSaveable.

‫1. الاحتفاظ بحالة تمرير القائمة

لحفظ موضع التمرير في قائمتك واستعادته أثناء تغييرات الإعدادات، أنشئ LazyListState باستخدام rememberLazyListState() ومرِّره كالمَعلمة state لقائمتك القابلة للتمرير، مثل LazyColumn.

تحتفظ Compose تلقائيًا بموضع التمرير نيابةً عنك.

‫2. الاحتفاظ بحالة عنصر القائمة الفردي

إذا كانت قائمتك تحتوي على عناصر ذات حالة (على سبيل المثال، عناصر تتضمّن مربّعات نص)، يمكن أن تفقد حالة هذه العناصر الفردية عند تمريرها خارج الشاشة وإعادة استخدامها، أو أثناء تغييرات الإعدادات.

للاحتفاظ بحالة العنصر الفردي، استخدِم rememberSaveable داخل نطاق عنصر القائمة. ويضمن ذلك استعادة حالة العنصر عند إعادة تركيبه أو تمريره مرة أخرى إلى العرض.

في ما يلي عملية تنفيذ كاملة وقابلة للتحويل البرمجي توضّح استعادة حالة التمرير وحالة العنصر:

// Scroll state is automatically saved and restored by rememberLazyListState
val listState = rememberLazyListState()

LazyColumn(state = listState) {
    items(100) { index ->
        // Use rememberSaveable to preserve individual item state (e.g., text input)
        var text by rememberSaveable { mutableStateOf("") }
        TextField(
            value = text,
            onValueChange = { text = it },
            label = { Text("Item $index") }
        )
    }
}

النتائج

يمكن الآن لقائمتك القابلة للتمرير استعادة موضع التمرير وحالة كل عنصر في القائمة.

مراجع إضافية