Android Academy · บทเรียน

การเปิดเผยสถานะจาก ViewModel

ขับเคลื่อน UI ของ Compose จาก ViewModel

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

เปิดเผยสถานะให้ส่วนติดต่อผู้ใช้

ViewModel เก็บสถานะไว้ แต่ส่วนติดต่อผู้ใช้ต้องมีวิธีสังเกตสถานะนั้นและเรนเดอร์ใหม่เมื่อสถานะเปลี่ยนแปลง

ใน Android สมัยใหม่ เครื่องมือสองชนิดที่ใช้ทำเช่นนี้คือ StateFlow และ State ของ Compose

รูปแบบ Mutable กับ Immutable

แนวทางปฏิบัติที่ดีคือเก็บคุณสมบัติสำรองที่เปลี่ยนแปลงได้และเป็นส่วนตัว แล้วเปิดเผยเวอร์ชันอ่านได้อย่างเดียวและเป็นสาธารณะ

วิธีนี้ป้องกันไม่ให้ส่วนติดต่อผู้ใช้แก้ไขสถานะโดยตรงโดยไม่ได้ตั้งใจ

เปิดเผยด้วย 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 กับสถานะของ Compose

StateFlow เป็นส่วนหนึ่งของโครูทีน Kotlin และทำงานได้ทุกที่ ไม่ใช่เฉพาะใน Compose เหมาะอย่างยิ่งสำหรับโฟลว์ที่ใช้ร่วมกันและตระหนักถึงวงจรชีวิต
mutableStateOf เป็นสิ่งเฉพาะของ Compose และมีรูปแบบกระชับมาก

โดยทั่วไปแล้ว StateFlow เป็นตัวเลือกที่ต้องการสำหรับ ViewModel ในแอปขนาดใหญ่

จำลองสถานะหน้าจอเป็นออบเจ็กต์เดียว

แทนที่จะใช้โฟลว์แยกกันหลายรายการ ให้รวมฟิลด์ที่เกี่ยวข้องไว้ในคลาสข้อมูลสถานะส่วนติดต่อผู้ใช้เดียว วิธีนี้ทำให้การอัปเดตเป็นอะตอมิกและคาดเดาได้

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” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Android Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Android Academy มีบทเรียนทั้งหมด 4 บทเรียน

คุณจะเรียนรู้อะไรในบทเรียน “การเปิดเผยสถานะจาก ViewModel”

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

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

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

บทเรียน “การเปิดเผยสถานะจาก ViewModel” ใช้เวลานานแค่ไหน

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

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

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

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

← กลับไปที่ Android Academy