viewModel() داخل Composable
احصل على ViewModel وحدد نطاقه بشكل صحيح
viewModel() داخل Composable درس مجاني في Jetpack Compose Academy على CoddyKit. هذا هو الدرس 2 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Jetpack Compose Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Jetpack Compose Academy 4 دروس في المجموع.
بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.
Getting a ViewModel
Inside a Composable you don’t construct a ViewModel with new. Instead you call the viewModel() function to fetch the right instance.
val vm: CounterViewModel = viewModel()Where It Comes From
The viewModel() helper looks up the nearest lifecycle owner and returns the ViewModel scoped to it, creating one only if none exists yet.
Same Instance on Recomposition
Recomposition runs your function many times, yet viewModel() returns the same instance each time, so your state never resets unexpectedly.
Reading State From It
Once you hold the ViewModel, read its observable state and your Composable redraws whenever that state changes. The UI follows the data. 🔗
val vm: CounterViewModel = viewModel()
Text("Count: " + vm.count)Calling Its Functions
Send user actions to the ViewModel by calling its functions from event lambdas, keeping the decision-making logic out of your Composable.
Button(onClick = { vm.increment() }) {
Text("Add")
}The Import
The function comes from the lifecycle Compose artifact. Import androidx.lifecycle.viewmodel.compose.viewModel to use it.
import androidx.lifecycle.viewmodel.compose.viewModelScoping by Default
By default the ViewModel is scoped to the host Activity or navigation destination, so all Composables in that scope share one instance. 🎯
Constructor Arguments
Need to pass dependencies? Provide a factory so the framework knows how to build a ViewModel that has constructor parameters.
val vm: CartViewModel = viewModel(factory = CartFactory(repo))Hoist, Don’t Pass Down
Call viewModel() high up, near the screen root, then pass plain state and callbacks down to keep child Composables reusable.
Preview-Friendly Design
Because viewModel() needs a real owner, design children to take simple parameters so they still render in an isolated @Preview.
A Quick Pattern
The common flow is simple: obtain the ViewModel, read its state, and forward events to its functions. Three steps, every screen. ✨
Quick Check
Check how you obtain a ViewModel from a Composable.
Recap
Call viewModel() to fetch a scoped ViewModel, read its state to drive the UI, and forward user events to its functions instead of constructing it yourself.
الأسئلة الشائعة
هل درس «viewModel() داخل Composable» مجاني؟
نعم — نص درس «viewModel() داخل Composable» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Jetpack Compose Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Jetpack Compose Academy 4 دروس في المجموع.
ماذا ستتعلم في «viewModel() داخل Composable»؟
احصل على ViewModel وحدد نطاقه بشكل صحيح تتمرن على Jetpack Compose Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Jetpack Compose Academy؟
لا تُشترط خبرة سابقة. Jetpack Compose Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 2 من أصل 4.
كم من الوقت يستغرق درس «viewModel() داخل Composable»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Jetpack Compose Academy هذا؟
نعم. كل درس في Jetpack Compose Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- لماذا يصمد ViewModel أمام التدوير
- viewModel() داخل Composable
- نمذجة فئة بيانات UiState
- collectAsStateWithLifecycle