0Pricing
Kotlin Multiplatform Academy · บทเรียน

StateFlow สำหรับสถานะ UI แบบ shared

เปิดเผยสถานะที่สังเกตได้ให้ทั้งสองแอปรวบรวมได้

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

สถานะต้องมีตัวเก็บ

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

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

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

MutableStateFlow สำหรับเขียนค่า

คุณสร้างสถานะด้วย MutableStateFlow โดยส่งค่าเริ่มต้นเข้าไป นี่คือส่วนที่เขียนค่าได้ ซึ่งตรรกะที่ใช้ร่วมกันจะอัปเดตไปตามเวลา

private val _count = MutableStateFlow(0)

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

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

val count: StateFlow<Int> = _count.asStateFlow()

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

เขียนสถานะใหม่โดยกำหนดค่าให้กับ .value ของกระแสข้อมูลที่เปลี่ยนแปลงได้ ตัวรวบรวมทุกตัวจะได้รับแจ้งการเปลี่ยนแปลงทันที

_count.value = _count.value + 1

อัปเดตแบบอะตอมิก {}

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

_count.update { current -> current + 1 }

การอ่านจะแตกต่างกัน

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

แหล่งความจริงเพียงหนึ่งเดียว

เก็บสถานะของหน้าจอไว้ใน StateFlow เดียว แล้วให้ทั้งสองแอปอ่านจากที่นั่น วิธีนี้ทำให้ตรรกะที่ใช้ร่วมกันเป็น แหล่งความจริง เพียงหนึ่งเดียวของหน้าจอ ✨

จำลองทั้งหน้าจอ

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

data class UiState(
    val loading: Boolean = false,
    val items: List<String> = emptyList()
)

การรวบรวมจะได้รับค่าล่าสุด

เมื่อหน้าจอเริ่มรวบรวมข้อมูล หน้าจอจะได้รับสถานะปัจจุบันทันที จากนั้นจะได้รับทุกการอัปเดตที่ตามมา ไม่มีการกะพริบและไม่มีการพลาด การแสดงผล ครั้งแรก

StateFlow เทียบกับกระแสข้อมูล

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

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

แนวคิดสำคัญหนึ่งข้อที่ควรจดจำ

สรุปทบทวน

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

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

บทเรียน “StateFlow สำหรับสถานะ UI แบบ shared” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “StateFlow สำหรับสถานะ UI แบบ shared”

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

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

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

บทเรียน “StateFlow สำหรับสถานะ UI แบบ shared” ใช้เวลานานแค่ไหน

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

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

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

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

  1. พื้นฐาน Flow ในโค้ด shared
  2. StateFlow สำหรับสถานะ UI แบบ shared
  3. ตัวดำเนินการ: map, filter, combine
  4. รวบรวม Flow บน Android และ iOS
← กลับไปที่ Kotlin Multiplatform Academy