PricingLoginStart free
Kotlin Multiplatform Academy · บทเรียน

ผูก ViewModel เข้ากับ UI แต่ละแบบ

เชื่อมสถานะ shared เข้ากับ Compose และ SwiftUI

บทเรียน 4 จาก 413 ขั้นตอน

ผูก ViewModel เข้ากับ UI แต่ละแบบ เป็นบทเรียน Kotlin Multiplatform Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Kotlin Multiplatform Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Kotlin Multiplatform Academy มีบทเรียนทั้งหมด 4 บทเรียน

ขั้นตอนสุดท้าย

ViewModel ร่วมของคุณพร้อมแล้ว ตอนนี้ส่วนติดต่อผู้ใช้แบบเนทีฟแต่ละฝั่งเพียงต้องสังเกตสถานะและส่งต่อ intents ของผู้ใช้ นี่คือการเชื่อมต่อขั้นสุดท้าย

Compose เก็บค่าจากสถานะ

บน Android ใช้ collectAsState เพื่อเปลี่ยน StateFlow ให้เป็นสถานะของ Compose ทุกการส่งค่าจะทำให้หน้าจอประกอบใหม่โดยอัตโนมัติ

val state by viewModel.state.collectAsState()

วาดผลลัพธ์จากสถานะนั้น

คอมโพสเอเบิลของคุณอ่าน state ที่เก็บมาแล้วแสดงผล ตอนนี้ส่วนติดต่อผู้ใช้เป็นฟังก์ชันบริสุทธิ์ของผลลัพธ์จาก ViewModel ร่วม

Text(state.name)
if (state.isLoading) CircularProgressIndicator()

ส่ง Intents จาก Compose

เชื่อมปุ่มเข้ากับ onIntent เมื่อผู้ใช้แตะ Compose จะส่งต่อการกระทำ และ ViewModel ร่วมจะตัดสินใจว่าจะทำอะไร

Button(onClick = {
    viewModel.onIntent(HomeIntent.Refresh)
}) { Text("Refresh") }

iOS ต้องมีตัวเชื่อมต่อ

SwiftUI ไม่สามารถเก็บค่าจาก Kotlin Flow ได้โดยตรง จึงต้องใช้ ตัวห่อหุ้มที่สังเกตได้ ขนาดเล็กเพื่อเชื่อม StateFlow ให้เป็นสิ่งที่ SwiftUI เฝ้าดูได้

ตัวห่อหุ้ม ObservableObject

ห่อ ViewModel ไว้ใน Swift ObservableObject ซึ่งเก็บสำเนาสถานะที่เผยแพร่แล้วส่งการอัปเดตให้ SwiftUI

class HomeObservable: ObservableObject {
    @Published var state = HomeState(isLoading: false, name: "")
}

เก็บค่าจาก Flow ใน Swift

ภายในตัวห่อหุ้ม ให้เก็บค่าจาก Kotlin StateFlow แล้วกำหนดแต่ละค่าให้พร็อพเพอร์ตีที่เผยแพร่ SkieKit ก็สามารถสร้างส่วนนี้ให้คุณได้เช่นกัน

แสดงผลใน SwiftUI

มุมมอง SwiftUI จะสังเกตตัวห่อหุ้มและอ่าน state ในลักษณะเดียวกัน ความจริงร่วมหนึ่งเดียวถูกวาดด้วยรูปแบบเนทีฟของ Apple

Text(observable.state.name)

ส่ง Intents จาก Swift

ปุ่มใน SwiftUI เรียก onIntent ของ ViewModel ที่ห่อไว้ได้เช่นกัน ดังนั้นการแตะบน iOS จะไหลเข้าสู่ตรรกะร่วมเดียวกันอย่างแท้จริง

Button("Refresh") {
    observable.viewModel.onIntent(intent: .refresh)
}

ล้างข้อมูลเมื่อหายไป

เมื่อหน้าจอปิด ให้เรียก clear() ของ ViewModel จากวงจรชีวิตของแต่ละแพลตฟอร์ม เพื่อยกเลิกขอบเขตและไม่ให้ทรัพยากรรั่วไหล

สมองเดียว สองใบหน้า

ตอนนี้ทั้งสองแอปใช้ ViewModel เดียวกัน: สถานะเหมือนกัน การตัดสินใจเหมือนกัน ต่างกันเพียงการแสดงผล นี่คือจุดเด่นของ KMP 🎉

ตรวจสอบอย่างรวดเร็ว

มายืนยันกันว่า SwiftUI ใช้ StateFlow ร่วมกันอย่างไร

ตอบคำถามในบทเรียนแบบโต้ตอบ

สรุป

Compose ใช้ collectAsState ส่วน SwiftUI ใช้ตัวห่อหุ้ม ObservableObject ทั้งคู่สังเกตสถานะและส่ง intents ไปยัง ViewModel ร่วมเดียวกัน 🚀

เริ่มต้นได้ฟรี

เรียนรู้ Kotlin ด้วย AI tutor — ฟรี

เขียนและเรียกใช้โค้ดจริงในเบราว์เซอร์ของคุณ รับความช่วยเหลือทันทีจาก AI tutor 24/7 และเรียนรู้ต่อจากที่คุณหยุดบนเว็บหรือในแอป

คอร์ส
30
บทเรียน
120
เริ่มเรียนฟรีดูหลักสูตรเต็ม

คำถามที่พบบ่อย

บทเรียน “ผูก ViewModel เข้ากับ UI แต่ละแบบ” ฟรีหรือไม่

ใช่ — ข้อความเต็มของ “ผูก ViewModel เข้ากับ UI แต่ละแบบ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Kotlin Multiplatform Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Kotlin Multiplatform Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “ผูก ViewModel เข้ากับ UI แต่ละแบบ”

เชื่อมสถานะ shared เข้ากับ Compose และ SwiftUI คุณปฏิบัติ Kotlin Multiplatform Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน

คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Kotlin Multiplatform Academy หรือไม่

ไม่จำเป็นต้องมีประสบการณ์มาก่อน Kotlin Multiplatform Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 4 จากทั้งหมด 4 บทเรียน

บทเรียน “ผูก ViewModel เข้ากับ UI แต่ละแบบ” ใช้เวลานานแค่ไหน

บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย

ฉันเขียนและรันโค้ดในบทเรียน Kotlin Multiplatform Academy นี้ได้ไหม

ได้ บทเรียน Kotlin Multiplatform Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ

บทเรียนทั้งหมดในหลักสูตรนี้

  1. พื้นฐาน ViewModel ข้ามแพลตฟอร์ม
  2. เปิดเผยสถานะ UI เป็น StateFlow
  3. จัดการเจตนาและการกระทำของผู้ใช้
  4. ผูก ViewModel เข้ากับ UI แต่ละแบบ
← กลับไปที่ Kotlin Multiplatform Academy