Jetpack Compose Academy · บทเรียน

จำลองคลาสข้อมูล UiState

แทนหน้าจอด้วยออบเจ็กต์สถานะเดียว

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

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

ออบเจ็กต์เดียวสำหรับหน้าจอ

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

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

เหตุใดจึงใช้วัตถุสถานะเดียว

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

ทำให้ไม่เปลี่ยนแปลงได้

ใช้คุณสมบัติ val เพื่อไม่ให้ UiState ถูกเปลี่ยนแปลงโดยตรง คุณจะสร้างสถานะใหม่เสมอ ทำให้การอัปเดตของ Compose คาดเดาได้

อัปเดตด้วย copy

คลาสข้อมูลมี copy() ให้ใช้โดยอัตโนมัติ คุณจึงสร้างสถานะถัดไปได้โดยเปลี่ยนเฉพาะฟิลด์ที่แตกต่าง

val next = state.copy(isLoading = false)

จำลองสถานะกำลังโหลด

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

จำลองข้อผิดพลาด

เพิ่มฟิลด์ errorMessage ที่รับค่า null ได้ เมื่อฟิลด์นี้ไม่เป็น null หน้าจอจะแสดงข้อผิดพลาด เมื่อเป็น null ทุกอย่างก็เรียบร้อย ⚠️

data class UiState(
    val items: List<Item> = emptyList(),
    val errorMessage: String? = null
)

คลาสปิดผนึกสำหรับแต่ละระยะ

สำหรับระยะที่ไม่สามารถเกิดขึ้นพร้อมกัน ลำดับชั้นแบบปิดผนึกจะชัดเจนกว่า โดย Loading, Success และ Error จะกลายเป็นชนิดที่แยกกัน และคุณจัดการได้ครบทุกกรณี

sealed interface UiState {
    object Loading : UiState
    data class Success(val data: List<Item>) : UiState
}

ค่าเริ่มต้นที่เหมาะสม

กำหนดค่าเริ่มต้นให้ทุกคุณสมบัติ เพื่อให้สถานะเริ่มต้นเป็นนิพจน์ง่าย ๆ และหน้าจอใหม่เริ่มต้นในสภาพที่สะอาดและทราบแน่ชัด

private val _state = MutableStateFlow(ProfileUiState())

เปิดเผยแบบอ่านอย่างเดียว

เก็บสถานะที่เปลี่ยนแปลงได้ไว้ภายใน ViewModel แต่เปิดเผยออกมาเป็นชนิดที่อ่านได้อย่างเดียว เพื่อให้มีเพียง ViewModel เท่านั้นที่เปลี่ยนสถานะของหน้าจอได้

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

การแสดงผลจากสถานะ

Composable ของคุณอ่าน UiState หนึ่งรายการ แล้วตรวจสอบฟิลด์ต่าง ๆ เพื่อเลือกการทำงาน ตรรกะการแสดงผลจึงมีขนาดเล็ก เพราะสถานะระบุไว้แล้วว่าควรแสดงอะไร

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

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

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

ทดสอบความเข้าใจในการออกแบบสถานะของหน้าจอ

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

สรุปทบทวน

จำลองหน้าจอด้วย data class UiState ที่เปลี่ยนแปลงไม่ได้เพียงรายการเดียว อัปเดตด้วย copy() เปิดเผยแบบอ่านได้อย่างเดียว และให้ส่วนติดต่อผู้ใช้แสดงผลจากแหล่งข้อมูลเดียวนี้โดยตรง

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

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

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

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

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

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

บทเรียน “จำลองคลาสข้อมูล UiState” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “จำลองคลาสข้อมูล UiState”

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

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

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

บทเรียน “จำลองคลาสข้อมูล UiState” ใช้เวลานานแค่ไหน

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

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

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

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

เหตุใด ViewModel จึงคงอยู่เมื่อหมุนหน้าจอ
viewModel() ใน Composable
จำลองคลาสข้อมูล UiState
collectAsStateWithLifecycle

← กลับไปที่ Jetpack Compose Academy