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

สถานะและการจัดองค์ประกอบใหม่ใน UI shared

ขับเคลื่อน Compose จาก StateFlow แบบ shared

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

ส่วนติดต่อผู้ใช้คือฟังก์ชันของสถานะ

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

อธิบายการจัดองค์ประกอบใหม่

การวาดใหม่โดยอัตโนมัตินี้เรียกว่า การจัดองค์ประกอบใหม่ Compose จะเรียกใช้คอมโพสสิเบิลที่ได้รับผลกระทบอีกครั้งด้วยค่าใหม่ และปรับปรุงหน้าจอให้คุณ

จดจำสถานะภายใน

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

val count = remember { mutableStateOf(0) }

อ่านและเขียนสถานะ

ห่อค่าด้วย by เพื่ออ่านและเขียนเหมือนตัวแปรทั่วไป การอ่านจะทำให้คอมโพสสิเบิลสมัครรับการเปลี่ยนแปลง ดังนั้นการเขียนจึงทำให้เกิดการวาดใหม่

var count by remember { mutableStateOf(0) }
Button(onClick = { count++ }) {
    Text("Count: " + count)
}

ยกสถานะขึ้นด้านบน

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

@Composable
fun Counter(value: Int, onInc: () -> Unit) {
    Button(onClick = onInc) { Text("" + value) }
}

สถานะอยู่ในโค้ดที่ใช้ร่วมกัน

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

val uiState: StateFlow<ScreenState> = _state

รวบรวม StateFlow ใน Compose

เชื่อมกระแสนั้นเข้ากับ Compose ด้วย collectAsState โดย composable จะเฝ้าสังเกตกระแสนี้และจัดองค์ประกอบใหม่ทุกครั้งที่สถานะที่ใช้ร่วมกันส่งค่าใหม่ออกมา

val state by viewModel.uiState.collectAsState()
Text(state.title)

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

เนื่องจากสถานะไหลจากโค้ดที่ใช้ร่วมกันเข้าสู่ Compose ทั้ง Android และ iOS จึงแสดงหน้าจอเดียวกันทุกประการจาก แหล่งข้อมูลจริงเพียงหนึ่งเดียว โดยไม่เกิดความคลาดเคลื่อน

หลีกเลี่ยงผลข้างเคียงใน Composable

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

ใช้ LaunchedEffect สำหรับงานเบื้องหลัง

เมื่อจำเป็นต้องเริ่มคอร์รูทีนที่ผูกกับ UI ให้ใช้ LaunchedEffect ซึ่งจะทำงานหนึ่งครั้งต่อคีย์ และยกเลิกโดยอัตโนมัติเมื่อ Composable ถูกนำออก

LaunchedEffect(Unit) {
    viewModel.load()
}

สถานะที่คำนวณและเสถียร

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

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

อะไรทำให้ค่าคงอยู่ข้ามการจัดองค์ประกอบใหม่ได้

ทบทวน: สถานะขับเคลื่อน UI

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

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

บทเรียน “สถานะและการจัดองค์ประกอบใหม่ใน UI shared” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “สถานะและการจัดองค์ประกอบใหม่ใน UI shared”

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

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

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

บทเรียน “สถานะและการจัดองค์ประกอบใหม่ใน UI shared” ใช้เวลานานแค่ไหน

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

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

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

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

  1. เปิดใช้ Compose Multiplatform
  2. เลย์เอาต์ โมดิไฟเออร์ และธีม
  3. สถานะและการจัดองค์ประกอบใหม่ใน UI shared
  4. โฮสต์ UI shared บน iOS และเดสก์ท็อป
← กลับไปที่ Kotlin Multiplatform Academy