Kotlin Multiplatform Academy · บทเรียน

เปิดเผยสถานะ UI เป็น StateFlow

เผยแพร่แหล่งความจริงเดียวสำหรับหน้าจอ

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

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

แหล่งข้อมูลจริงเพียงหนึ่งเดียว

หน้าจอของคุณต้องมีภาพข้อมูลที่เชื่อถือได้เพียงหนึ่งเดียว StateFlow มอบสิ่งนั้นให้พอดี: ค่าที่สังเกตได้หนึ่งค่าซึ่งส่วนติดต่อผู้ใช้ไว้วางใจได้

จำลองหน้าจอเป็นสถานะ

รวมทุกสิ่งที่หน้าจอแสดงไว้ใน data class ที่เปลี่ยนแปลงไม่ได้ การโหลด ข้อมูล และข้อผิดพลาดล้วนอยู่ร่วมกันในออบเจ็กต์เดียว

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

เก็บ MutableStateFlow ไว้เป็นส่วนตัว

ภายใน ViewModel ให้เก็บ MutableStateFlow ไว้เป็นส่วนตัว มีเพียงโค้ดของคุณที่เปลี่ยนค่าได้ สถานะจึงยังอยู่ภายใต้การควบคุมและคาดเดาได้

private val _state =
    MutableStateFlow(HomeState())

เปิดเผยเฉพาะมุมมองแบบอ่านอย่างเดียว

เผยแพร่เป็น StateFlow แบบอ่านอย่างเดียว ส่วนติดต่อผู้ใช้เก็บค่าได้ แต่ไม่สามารถเขียนค่าโดยตรง การห่อหุ้มจึงยังสะอาด

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

มีค่าอยู่เสมอ

ต่างจาก Flow ธรรมดา StateFlow จะเก็บค่าปัจจุบันไว้เสมอ ตัวเก็บค่าใหม่จะได้รับสถานะล่าสุดทันทีโดยไม่ต้องรอ

อัปเดตด้วย .update

เปลี่ยนสถานะอย่างปลอดภัยด้วย update เมธอดนี้จะคัดลอกค่าปัจจุบันและนำการเปลี่ยนแปลงไปใช้แบบอะตอมิก แม้ทำงานข้ามเธรด

_state.update { it.copy(isLoading = true) }

copy ช่วยให้ไม่เปลี่ยนแปลงค่าเดิม

เนื่องจากสถานะเป็น data class copy จึงสร้างออบเจ็กต์ใหม่โดยเปลี่ยนเพียงฟิลด์เดียว สถานะเก่าจะไม่ถูกแก้ไขโดยตรง

โหลดข้อมูล แล้วส่งค่าออก

เปิดใช้โครูทีน ดึงข้อมูล แล้ว emit สถานะใหม่ ส่วนติดต่อผู้ใช้จะวาดใหม่โดยอัตโนมัติเมื่อค่าเปลี่ยนแปลง ✨

scope.launch {
    val name = repo.greet()
    _state.update { it.copy(name = name) }
}

StateFlow เทียบกับ LiveData

นักพัฒนา Android คุ้นเคยกับ LiveData แต่ใช้ได้เฉพาะ JVM เท่านั้น ส่วน StateFlow ทำงานบนทุกเป้าหมายของ KMP จึงเป็นตัวเลือกที่พกพาได้

อ่านค่าโดยตรง

ต้องการสถานะปัจจุบันโดยไม่เก็บค่าหรือไม่ เพียงอ่าน .value เหมาะสำหรับการทดสอบหรือการตรวจสอบครั้งเดียวภายใน ViewModel

val current = _state.value

ส่วนติดต่อผู้ใช้ไม่ต้องรู้ตรรกะ

หน้าจอเพียงเก็บ state แล้ววาดผลลัพธ์ การตัดสินใจทั้งหมดอยู่ในโค้ดร่วม ดังนั้นทั้งสองแอปจึงทำงานเหมือนกัน

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

มายืนยันกันว่าเหตุใดเราจึงแยกโฟลว์ที่เปลี่ยนแปลงได้ออกจากโฟลว์แบบอ่านอย่างเดียว

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

สรุป

รวมข้อมูลหน้าจอไว้ในคลาสสถานะ เก็บไว้ใน MutableStateFlow ส่วนตัว และเปิดเผย StateFlow แบบอ่านอย่างเดียวให้ส่วนติดต่อผู้ใช้สังเกตเท่านั้น 🚀

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

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

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

คอร์ส: 30
บทเรียน: 120

เริ่มเรียนฟรี ดูหลักสูตรเต็ม

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

บทเรียน “เปิดเผยสถานะ UI เป็น StateFlow” ฟรีหรือไม่

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

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

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

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

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

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

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

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

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

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

← กลับไปที่ Kotlin Multiplatform Academy