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

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

يمكن للقوائم القابلة للتمرير في 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") }
        )
    }
}

النتائج

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

مراجع إضافية