Jetpack Compose Academy · บทเรียน

NavController และ NavHost

กำหนดกราฟการนำทางของแอป

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

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

การเปลี่ยนระหว่างหน้าจอ

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

เพิ่มการพึ่งพา

การนำทางอยู่ในส่วนประกอบของตัวเอง ให้เพิ่ม androidx.navigation:navigation-compose ลงในไฟล์สร้างของโมดูลก่อนจึงจะใช้งานได้

dependencies {
    implementation("androidx.navigation:navigation-compose:2.7.7")
}

ทำความรู้จัก NavController

NavController คือสมองของการนำทาง โดยติดตามว่าคุณอยู่ที่ใด จดจำประวัติ และดำเนินการเปลี่ยนหน้าจอทุกครั้งที่คุณสั่ง

จดจำตัวควบคุม

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

val navController = rememberNavController()

ทำความรู้จัก NavHost

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

เชื่อม Host กับ Controller

NavHost ต้องการสองสิ่ง ได้แก่ navController ที่ขับเคลื่อนการทำงาน และ startDestination ที่ระบุว่าควรแสดงหน้าจอใดเป็นหน้าจอแรก

NavHost(
    navController = navController,
    startDestination = "home"
) { }

startDestination

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

การประกาศปลายทาง

ภายในแลมบ์ดาของ NavHost ให้แสดงรายการหน้าจอด้วย composable("route") แต่ละรายการจะเชื่อมชื่อเส้นทางเข้ากับส่วนติดต่อผู้ใช้ที่ควรแสดง

NavHost(navController, startDestination = "home") {
    composable("home") { HomeScreen() }
    composable("profile") { ProfileScreen() }
}

นำทางด้วยเส้นทาง

หากต้องการเปลี่ยนหน้าจอ ให้เรียก navController.navigate("route") Host จะเห็นคำขอและสลับไปยังปลายทางที่ตรงกันทันที

Button(onClick = { navController.navigate("profile") }) {
    Text("Open profile")
}

ตัวควบคุมหนึ่งตัวกับ Host หนึ่งตัว

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

เหตุใดเส้นทางจึงเป็นสตริง

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

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

ส่วนใดเป็นผู้ดำเนินการเปลี่ยนหน้าจอจริง ๆ

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

สรุปทบทวน

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

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

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

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

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

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

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

บทเรียน “NavController และ NavHost” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “NavController และ NavHost”

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

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

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

บทเรียน “NavController และ NavHost” ใช้เวลานานแค่ไหน

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

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

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

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

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