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

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

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

النتائج

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

مراجع إضافية