การนำทางระหว่างหน้าจอ
ไปข้างหน้าและย้อนกลับระหว่างปลายทาง
การนำทางระหว่างหน้าจอ เป็นบทเรียน Android Academy ฟรีบน CoddyKit นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน คุณสามารถอ่านบทเรียนทั้งหมดด้านล่างฟรี — จากนั้นลองปฏิบัติด้วยตัวคุณเองในเบราว์เซอร์พร้อมตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7 บทเรียนนี้เป็นส่วนหนึ่งของเส้นทางการเรียน Android Academy และความก้าวหน้าของคุณจะซิงค์ข้ามเว็บและแอป CoddyKit คอร์ส Android Academy มีบทเรียนทั้งหมด 4 บทเรียน
ก้าวต่อไป
เมื่อคุณตั้งค่า NavHost แล้ว คุณสามารถไปยังหน้าจออื่นได้โดยเรียกใช้ navigate บน NavController พร้อมระบุเส้นทางปลายทาง
navController.navigate("details")เรียกใช้จากปุ่ม
โดยปกติการนำทางจะเกิดขึ้นในฟังก์ชันเรียกกลับ เช่น onClick ของปุ่ม
Button(onClick = { navController.navigate("details") }) {
Text("Open details")
}สแตกย้อนกลับ
การเรียกใช้ navigate แต่ละครั้งจะเพิ่มปลายทางใหม่ลงใน สแตกย้อนกลับ ปุ่มย้อนกลับของระบบจะนำปลายทางนั้นออกโดยอัตโนมัติ ทำให้กลับไปยังหน้าจอก่อนหน้า
popBackStack
หากต้องการย้อนกลับด้วยโปรแกรม เช่น จากปุ่ม "ย้อนขึ้น" ที่กำหนดเอง ให้เรียกใช้ popBackStack การเรียกใช้นี้จะนำปลายทางปัจจุบันออกและกลับไปยังปลายทางก่อนหน้า
navController.popBackStack()navigateUp
navigateUp() มีการทำงานคล้ายกัน และเป็นตัวเลือกที่เหมาะสมสำหรับลูกศรย้อนขึ้นบนแถบเครื่องมือ โดยจะเคารพลำดับชั้นการนำทาง
navController.navigateUp()หลีกเลี่ยงปลายทางซ้ำ
การแตะปุ่มสองครั้งอย่างรวดเร็วอาจเพิ่มหน้าจอเดียวกันลงในสแตกถึงสองครั้ง ให้ใช้ launchSingleTop = true เพื่อหลีกเลี่ยงการซ้อนปลายทางที่ซ้ำกัน
navController.navigate("details") {
launchSingleTop = true
}popUpTo
popUpTo จะล้างบางส่วนของสแตกย้อนกลับระหว่างการนำทาง ซึ่งมีประโยชน์หลังการเข้าสู่ระบบ เช่น ข้ามไปยังหน้าหลักและนำหน้าจอเข้าสู่ระบบออก เพื่อไม่ให้การกดย้อนกลับนำกลับไปยังหน้านั้น
navController.navigate("home") {
popUpTo("login") { inclusive = true }
}inclusive
inclusive = true หมายความว่าปลายทางของ popUpTo จะถูกนำออกด้วยเช่นกัน หากใช้ inclusive = false การนำออกจะหยุดที่ด้านบนของปลายทางนั้น
แยกหน้าจอออกจากกัน
แทนที่จะส่ง NavController ทั้งตัวเข้าไปในทุกหน้าจอ ให้ส่งแลมบ์ดาแทน หน้าจอจะเรียกใช้ onOpenDetails() โดยไม่จำเป็นต้องรู้รายละเอียดภายในของการนำทาง
@Composable
fun HomeScreen(onOpenDetails: () -> Unit) {
Button(onClick = onOpenDetails) { Text("Details") }
}เชื่อมต่อแลมบ์ดา
NavHost จะเชื่อมต่อแลมบ์ดาเข้ากับการเรียกใช้ navigate จริง ทำให้ตรรกะการนำทางอยู่รวมกันในที่เดียว
composable("home") {
HomeScreen(onOpenDetails = {
navController.navigate("details")
})
}นำทุกอย่างมาประกอบกัน
หน้าหลักนำทางไปยังหน้ารายละเอียด และหน้ารายละเอียดจะย้อนกลับด้วยลูกศรย้อนขึ้น
composable("home") {
HomeScreen(onOpenDetails = { navController.navigate("details") })
}
composable("details") {
DetailsScreen(onBack = { navController.popBackStack() })
}ตรวจสอบความเข้าใจ
การเรียกใช้ใดจะนำผู้ใช้กลับไปยังหน้าจอก่อนหน้าด้วยโปรแกรม
สรุปทบทวน
การนำทาง:
navigate("route")จะเพิ่มปลายทางลงในสแตกpopBackStack()/navigateUp()ใช้ย้อนกลับ- ใช้
launchSingleTopและpopUpTo { inclusive }เพื่อควบคุมสแตก - ส่งแลมบ์ดาแทนตัวควบคุม เพื่อให้สามารถนำหน้าจอกลับมาใช้ซ้ำได้
คำถามที่พบบ่อย
บทเรียน “การนำทางระหว่างหน้าจอ” ฟรีหรือไม่
ใช่ — ข้อความเต็มของ “การนำทางระหว่างหน้าจอ” ฟรีให้อ่านที่นี่บนเว็บ เพื่อปฏิบัติแบบโต้ตอบ (ตัวแก้ไขโค้ดในตัวและติวเตอร์ AI ตลอด 24/7) และปลดล็อคส่วนที่เหลือของคอร์ส Android Academy ให้อัปเกรดเป็น CoddyKit PRO คอร์ส Android Academy มีบทเรียนทั้งหมด 4 บทเรียน
คุณจะเรียนรู้อะไรในบทเรียน “การนำทางระหว่างหน้าจอ”
ไปข้างหน้าและย้อนกลับระหว่างปลายทาง คุณปฏิบัติ Android Academy ด้วยโค้ดที่ใช้งานได้จริงที่คุณเรียกใช้โดยตรงในเบราว์เซอร์ และติวเตอร์ AI ตลอด 24/7 ตอบคำถามของคุณขณะที่คุณไปผ่านบทเรียน
คุณต้องมีประสบการณ์ก่อนที่จะเริ่มเรียน Android Academy หรือไม่
ไม่จำเป็นต้องมีประสบการณ์มาก่อน Android Academy บน CoddyKit ออกแบบมาสำหรับผู้เริ่มต้นไปจนถึงผู้เรียนขั้นสูง คุณสามารถเริ่มต้นที่นี่หรือเริ่มจากตัวแรกและเรียนด้วยความเร็วของคุณเอง นี่คือบทเรียนที่ 2 จากทั้งหมด 4 บทเรียน
บทเรียน “การนำทางระหว่างหน้าจอ” ใช้เวลานานแค่ไหน
บทเรียน CoddyKit ส่วนใหญ่ใช้เวลาประมาณ 5–10 นาที แต่ละบทเรียนจึงสั้นและเป็นแบบโต้ตอบ คุณสามารถก้าวหน้าอย่างต่อเนื่องและกลับมาเรียนต่อจากตรงที่เพิ่งหยุดบนเว็บและแอปได้เลย
ฉันเขียนและรันโค้ดในบทเรียน Android Academy นี้ได้ไหม
ได้ บทเรียน Android Academy ทุกบทมีตัวแก้ไขโค้ดในตัว คุณจึงเขียนและรันโค้ดจริงได้เลยในเบราว์เซอร์ และได้รับข้อเสนอแนะจาก AI ในทันที — ไม่ต้องติดตั้งในเครื่องของคุณ
บทเรียนทั้งหมดในหลักสูตรนี้
- การตั้งค่า NavHost
- การนำทางระหว่างหน้าจอ
- การส่งอาร์กิวเมนต์
- การนำทางด้านล่าง