Jetpack Compose Academy · درس

نمذجة فئة بيانات UiState

مثّل الشاشة بكائن حالة واحد

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

بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.

One Object for the Screen

Instead of juggling many separate fields, model the whole screen with a single UiState data class that describes exactly what to draw.

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

Why One State Object

Grouping fields together prevents impossible combinations and makes the UI a pure function of one value: same state in, same screen out.

Make It Immutable

Use val properties so a UiState can never be mutated in place. You always produce a new state, which keeps Compose updates predictable.

Updating With copy

Data classes give you copy() for free, so you can build the next state by changing only the fields that differ.

val next = state.copy(isLoading = false)

Modeling Loading

Capture progress with a flag like isLoading so the UI can show a spinner while work runs, all from the same state object.

Modeling Errors

Add a nullable errorMessage field. When it is non-null, the screen shows the error; when null, everything is fine. ⚠️

data class UiState(
    val items: List<Item> = emptyList(),
    val errorMessage: String? = null
)

Sealed Classes for Phases

For mutually exclusive phases, a sealed hierarchy is cleaner: Loading, Success, and Error become distinct types you handle exhaustively.

sealed interface UiState {
    object Loading : UiState
    data class Success(val data: List<Item>) : UiState
}

Sensible Defaults

Give every property a default value so the initial state is one easy expression and new screens start in a clean, known condition.

private val _state = MutableStateFlow(ProfileUiState())

Exposing It Read-Only

Hold a mutable state inside the ViewModel but expose it as a read-only type, so only the ViewModel may change the screen’s state.

val state: StateFlow<ProfileUiState> = _state.asStateFlow()

Rendering From It

Your Composable reads one UiState and branches on its fields. The render logic stays tiny because the state already says what to show.

Single Source of Truth

A UiState class becomes the single source of truth for the screen, so your UI and logic can never quietly drift out of sync. ✨

Quick Check

Test your modeling instincts for screen state.

Recap

Model the screen with one immutable UiState data class, update it with copy(), expose it read-only, and let the UI render purely from that single source.

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

هل درس «نمذجة فئة بيانات UiState» مجاني؟

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

ماذا ستتعلم في «نمذجة فئة بيانات UiState»؟

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

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

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

كم من الوقت يستغرق درس «نمذجة فئة بيانات UiState»؟

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

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

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

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

← العودة إلى Jetpack Compose Academy