ربط ViewModel بكل واجهة
توصيل الحالة المشتركة بـ Compose وSwiftUI
ربط ViewModel بكل واجهة درس مجاني في Kotlin Multiplatform Academy على CoddyKit. هذا هو الدرس 4 من أصل 4. يمكنك قراءة الدرس كاملاً أدناه مجاناً — ثم تمرن عليه مباشرة في المتصفح باستخدام محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7. هذا الدرس جزء من مسار التعلم في Kotlin Multiplatform Academy، وتقدمك يتزامن عبر الويب وتطبيق CoddyKit. تتضمن دورة Kotlin Multiplatform Academy 4 دروس في المجموع.
بعض أجزاء هذا الدرس لم تُترجم بعد وتظهر باللغة الإنجليزية.
The Last Mile
Your shared ViewModel is ready. Now each native UI just needs to observe its state and forward user intents. That is the final wiring.
Compose Collects State
On Android, use collectAsState to turn the StateFlow into Compose state. Every emission recomposes the screen automatically.
val state by viewModel.state.collectAsState()Draw from That State
Your composable reads the collected state and renders it. The UI is now a pure function of the shared ViewModel's output.
Text(state.name)
if (state.isLoading) CircularProgressIndicator()Send Intents from Compose
Wire a button to onIntent. The user taps, Compose forwards the action, and the shared ViewModel decides what to do.
Button(onClick = {
viewModel.onIntent(HomeIntent.Refresh)
}) { Text("Refresh") }iOS Needs a Bridge
SwiftUI cannot collect a Kotlin Flow directly. A tiny observable wrapper bridges StateFlow into something SwiftUI can watch.
An ObservableObject Wrapper
Wrap the ViewModel in a Swift ObservableObject. It holds a published copy of the state and feeds SwiftUI updates.
class HomeObservable: ObservableObject {
@Published var state = HomeState(isLoading: false, name: "")
}Collect the Flow in Swift
Inside the wrapper, collect the Kotlin StateFlow and assign each value to the published property. SkieKit can also generate this for you.
Render in SwiftUI
The SwiftUI view observes the wrapper and reads state the same way. One shared truth, drawn in Apple's native style.
Text(observable.state.name)Send Intents from Swift
Buttons in SwiftUI call the wrapped ViewModel's onIntent too, so iOS taps flow into the exact same shared logic.
Button("Refresh") {
observable.viewModel.onIntent(intent: .refresh)
}Clear on Disappear
When a screen closes, call the ViewModel's clear() from each platform's lifecycle so the scope cancels and nothing leaks.
Same Brain, Two Faces
Both apps now share one ViewModel: identical state, identical decisions, only the rendering differs. That is KMP at its best. 🎉
Quick Check
Let's confirm how SwiftUI consumes a shared StateFlow.
Recap
Compose uses collectAsState; SwiftUI uses an ObservableObject wrapper. Both observe state and send intents to one shared ViewModel. 🚀
تعلم Kotlin مع معلم ذكاء اصطناعي — مجانًا
اكتب وقم بتشغيل أكوادك الفعلية في المتصفح، واحصل على مساعدة فورية من معلم ذكاء اصطناعي متاح 24/7، واستمر من حيث توقفت على الويب أو في التطبيق.
- الدورات
- 30
- الدروس
- 120
الأسئلة الشائعة
هل درس «ربط ViewModel بكل واجهة» مجاني؟
نعم — نص درس «ربط ViewModel بكل واجهة» كامل متاح مجاناً هنا على الويب. لتمرينه بشكل تفاعلي (محرر أكواد مدمج ومدرس ذكاء اصطناعي متاح 24/7) وفتح باقي دورة Kotlin Multiplatform Academy، انتقل إلى CoddyKit PRO. تتضمن دورة Kotlin Multiplatform Academy 4 دروس في المجموع.
ماذا ستتعلم في «ربط ViewModel بكل واجهة»؟
توصيل الحالة المشتركة بـ Compose وSwiftUI تتمرن على Kotlin Multiplatform Academy مع أكواد عملية تشغلها مباشرة في المتصفح، ومدرس ذكاء اصطناعي متاح 24/7 يجيب على أسئلتك أثناء عملك.
هل أحتاج إلى خبرة سابقة لأبدأ Kotlin Multiplatform Academy؟
لا تُشترط خبرة سابقة. Kotlin Multiplatform Academy على CoddyKit منظم للمبتدئين حتى المتقدمين، لذا يمكنك البدء من هنا أو من البداية والتقدم بسرعتك الخاصة. هذا هو الدرس 4 من أصل 4.
كم من الوقت يستغرق درس «ربط ViewModel بكل واجهة»؟
معظم دروس CoddyKit تستغرق حوالي 5–10 دقائق. كل منها موجز وتفاعلي، لذا تحرز تقدماً مستمراً وتستأنف من حيث توقفت عبر الويب والتطبيق.
هل يمكنني كتابة وتشغيل أكواد في درس Kotlin Multiplatform Academy هذا؟
نعم. كل درس في Kotlin Multiplatform Academy يتضمن محرر أكواد مدمج، لذا تكتب وتشغل أكواداً حقيقية مباشرة في متصفحك وتحصل على تعليقات فورية من الذكاء الاصطناعي — بدون إعداد محلي.
جميع الدروس في هذه الدورة
- قاعدة ViewModel متعددة المنصات
- كشف حالة الواجهة باعتبارها StateFlow
- معالجة نوايا المستخدم وإجراءاته
- ربط ViewModel بكل واجهة