Jetpack Compose Academy · บทเรียน

คงสถานะแท็บเมื่อสลับ

เก็บการเลื่อนและสถานะของแต่ละแท็บไว้

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

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

ปัญหาตำแหน่งการเลื่อนหาย

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

เหตุผลที่เกิดปัญหา

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

บันทึกเมื่อออก

เมื่อคุณนำแท็บเดิมออก ให้เพิ่ม saveState เพื่อเก็บสถานะส่วนติดต่อผู้ใช้ไว้ แทนการทิ้งไป

popUpTo(startRoute) {
  saveState = true
}

กู้คืนเมื่อเข้า

เมื่อนำทางไปยังแท็บ ให้กำหนด restoreState เพื่อให้สถานะที่บันทึกไว้ก่อนหน้านี้กลับมา

navController.navigate(tab.route) {
  restoreState = true
}

การใช้แฟล็กร่วมกันสามตัว

เมื่อใช้ saveState, restoreState และ launchSingleTop ร่วมกัน จะได้พฤติกรรมการสลับแท็บที่ลื่นไหลและเป็นรูปแบบมาตรฐานที่ผู้ใช้คาดหวัง

popUpTo(start) { saveState = true }
launchSingleTop = true
restoreState = true

rememberSaveable ก็ช่วยได้เช่นกัน

สำหรับค่าภายในหน้าจอ rememberSaveable จะช่วยคงข้อมูลอย่างช่องข้อความไว้เมื่อสร้างหน้าจอใหม่ และช่วยเสริมการบันทึกสถานะการนำทาง

var query by rememberSaveable { mutableStateOf("") }

รายการต้องบันทึกตำแหน่งการเลื่อน

LazyColumn จะคงตำแหน่งการเลื่อนไว้เมื่อใช้ rememberLazyListState และสถานะการนำทางที่บันทึกไว้จะทำให้ตำแหน่งนั้นอยู่ต่อได้เมื่อสลับแท็บไปกลับ

val listState = rememberLazyListState()
LazyColumn(state = listState) { /* ... */ }

ระวังเส้นทางเริ่มต้น

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

popUpTo(navController.graph.findStartDestination().id)

ตรวจสอบด้วยการสลับแท็บ

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

กรณีที่ไม่ควรกู้คืน

บางครั้งแท็บควรโหลดใหม่เมื่อเข้าใช้งาน เช่น ฟีด ในกรณีนั้นให้ ข้าม restoreState สำหรับเส้นทางนั้น แล้วปล่อยให้สร้างใหม่

สถานะที่อยู่นอกเหนือหน้าจอเดียว

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

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

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

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

สรุปทบทวน

คุณทำให้แท็บคงสถานะไว้ได้: saveState + restoreState + launchSingleTop ช่วยคงตำแหน่งการเลื่อนและข้อมูลที่ป้อน โดยมี rememberSaveable ช่วยสำรองค่าภายในหน้าจอ ลื่นไหลมาก! ✨

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

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

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

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

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

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

บทเรียน “คงสถานะแท็บเมื่อสลับ” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “คงสถานะแท็บเมื่อสลับ”

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

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

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

บทเรียน “คงสถานะแท็บเมื่อสลับ” ใช้เวลานานแค่ไหน

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

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

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

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

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