كيفية الحفاظ على البيانات عند تدوير الشاشة في Kotlin Compose

استخدام ViewModel و rememberSaveable في Kotlin Compose

أفضل طرق حفظ الحالة في Jetpack Compose

عندما تقوم بتطوير تطبيقات Android باستخدام لغة Kotlin او اي لغه اخرى، يواجه المطورون تحديًا شائعًا وهو في فقدان البيانات أو تغيير حالة الواجهة عند تدوير الشاشة وهذا الامر مزعج بشكل كبير للمستخدمين. يحدث هذا لأن نظام Android يقوم بتدمير النشاط (Activity) وإعادة إنشائه عند تغيير اتجاه الشاشة مما يأثر على فقد البيانات. في هذا المقال، سنستعرض طرقًا فعالة للحفاظ على البيانات وحالة الواجهة عند تدوير الشاشة في Kotlin.

استخدام onSaveInstanceState لحفظ الحالة المؤقتة

onSaveInstanceState هو طريقة تُستخدم لحفظ الحالة المؤقتة للبيانات قبل تدميره. يمكن استخدامه لحفظ البيانات الصغيرة مثل النصوص أو الحالات البسيطة ولكن هذا في Kotlin ويعتبر يوجد نفس الشيئ في compose ولكن عن طريق rememberSaveable و remember 

الفرق بين remember و rememberSaveable في Jetpack Compose ؟

عند تطوير واجهات المستخدم لتطبيقات أندرويد باستخدام Jetpack Compose، تكون إدارة الحالة ضرورية، خصوصًا عند التعامل مع التغييرات في دورة حياة الشاشة، مثل دوران الجهاز، وما إلى ذلك. يوفر Jetpack Compose مجموعة متنوعة من الأدوات للحفاظ على حالة الواجهة، مثل RememberSaveable، وتوفر أدوات متنوعة للحفاظ على حالة الواجهة.

ما هو remember ؟

remember هي إحدى الأدوات التي يوفرها Jetpack Composition للحفاظ على حالة معينة أثناء إعادة بناء الواجهات. بمجرد حفظ البيانات باستخدام remember، يتم الاحتفاظ بالبيانات طوال عمر الصفحه، ولكن تُفقد إذا تم إتلاف الصفحه، على سبيل المثال عند تدوير الشاشة.يُعاد تعيين قيمة العد إلى الصفر عند تدوير المستخدم للشاشة. هذا لأن remember لا يحتفظ بالحالة للتغييرات في دورة حياة النشاط.

@Composable
fun MyComposable() {
    var count by remember { mutableStateOf(0) }

    Button(onClick = { count++ }) {
        Text("Count: $count")
    }
}

ما هي rememberSaveable ؟

التذكّر القابل للحفظ هو نسخة محسّنة من التذكّر تحتفظ بالحالة بعد تغيير دورة الحياة، مثل تدوير الشاشة. يتم ذلك عن طريق تخزين الحالة في حزمة تدير تلقائيًا تخزين البيانات واستعادتها.

@Composable
fun MyComposable() {
    var count by rememberSaveable { mutableStateOf(0) }

    Button(onClick = { count++ }) {
        Text("Count: $count")
    }
}