Android Academy · درس

كشف الحالة من ViewModel

شغّل واجهة Compose من ViewModel

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

إتاحة الحالة لواجهة المستخدم

يحتفظ ViewModel بالحالة، لكن واجهة المستخدم تحتاج إلى طريقة لمراقبة هذه الحالة وإعادة العرض عند تغيّرها.

توفّر أدوات Android الحديثة أداتين شائعتين لذلك: StateFlow وState في Compose.

نمط القابل للتغيير مقابل غير القابل للتغيير

من أفضل الممارسات الاحتفاظ بخاصية خاصة قابلة للتغيير في الخلفية، وإتاحة إصدار عام للقراءة فقط.

ويمنع ذلك واجهة المستخدم من تغيير الحالة مباشرةً عن طريق الخطأ.

إتاحة الحالة باستخدام StateFlow

استخدموا MutableStateFlow داخليًا، وأتيحوه على هيئة StateFlow للقراءة فقط.

class CounterViewModel : ViewModel() {
    private val _count = MutableStateFlow(0)
    val count: StateFlow<Int> = _count.asStateFlow()

    fun increment() {
        _count.value++
    }
}

جمع StateFlow في Compose

تحوّل Composable التدفق إلى حالة Compose باستخدام collectAsState()، أو الإصدار المراعي لدورة الحياة الذي سنتناوله لاحقًا.

@Composable
fun CounterScreen(vm: CounterViewModel) {
    val count by vm.count.collectAsState()
    Text("Count: " + count)
}

لماذا يحتاج StateFlow إلى قيمة ابتدائية؟

يمتلك StateFlow دائمًا قيمة حالية. لذلك يجب أن تمنحوه قيمة ابتدائية عند إنشائه.

ويتلقى أي جامع جديد أحدث قيمة فورًا، ولا يتلقى تدفقًا فارغًا مطلقًا.

بديل: mutableStateOf في Compose

بالنسبة إلى الحالة البسيطة الخاصة بالشاشة داخل ViewModel، يمكنكم أيضًا استخدام mutableStateOf في Compose، إذ تراقبها Compose تلقائيًا.

class CounterViewModel : ViewModel() {
    var count by mutableStateOf(0)
        private set

    fun increment() { count++ }
}

StateFlow في مقابل State في Compose

StateFlow جزء من coroutines في Kotlin ويعمل في أي مكان، وليس في Compose فقط. وهو مناسب جدًا للتدفقات المشتركة التي تراعي دورة الحياة.
mutableStateOf خاص بـ Compose ومختصر جدًا.

يُفضَّل StateFlow عمومًا في ViewModels ضمن التطبيقات الكبيرة.

نمذجة حالة الشاشة ككائن واحد

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

data class ProfileUiState(
    val name: String = "",
    val isLoading: Boolean = false,
    val error: String? = null
)

إتاحة كائن حالة واجهة المستخدم

أتِيحوا تدفق StateFlow واحدًا من فئة الحالة هذه. وتقرأ واجهة المستخدم كل شيء من مصدر واحد للحقيقة.

private val _uiState = MutableStateFlow(ProfileUiState())
val uiState: StateFlow<ProfileUiState> =
    _uiState.asStateFlow()

تحديث الحالة غير القابلة للتغيير

حدّث الحالة عن طريق إنشاء نسخة تحتوي على الحقول المتغيّرة، وليس عن طريق تعديل الكائن القديم.

fun load() {
    _uiState.update { it.copy(isLoading = true) }
    // ... fetch, then:
    _uiState.update {
        it.copy(isLoading = false, name = "Ada")
    }
}

الأحداث تتدفق إلى الأعلى، والحالة تتدفق إلى الأسفل

هذا هو جوهر تدفق البيانات أحادي الاتجاه:

تتدفق الحالة إلى الأسفل من ViewModel إلى واجهة المستخدم.
تتدفق الأحداث إلى الأعلى من واجهة المستخدم إلى ViewModel عبر استدعاءات الدوال.

تحقق سريع

اختبر مدى فهمك لكيفية إتاحة الحالة.

مراجعة

لقد تعلّمت ما يلي:

احتفظ بـ MutableStateFlow خاص، وأتح StateFlow للقراءة فقط.
اجمع الحقول المرتبطة في فئة بيانات لحالة واجهة المستخدم.
حدّث باستخدام copy() عبر update {}.
تتدفق الحالة إلى الأسفل، وتتدفق الأحداث إلى الأعلى.

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

هل درس «كشف الحالة من ViewModel» مجاني؟

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

ماذا ستتعلم في «كشف الحالة من ViewModel»؟

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

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

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

كم من الوقت يستغرق درس «كشف الحالة من ViewModel»؟

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

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

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

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

← العودة إلى Android Academy