Kotlin Multiplatform Academy · บทเรียน

นำทางระหว่างหน้าจอ shared

เชื่อมกราฟการนำทางใน Compose Multiplatform

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

บางส่วนของบทเรียนนี้ยังไม่ได้รับการแปล และแสดงเป็นภาษาอังกฤษ

More Than One Screen

Real apps have many screens: a list, a detail, a settings page. Navigation is how you move between them in shared Compose code. 🧭

One Graph for Every Platform

You define a single navigation graph in commonMain, and Android, iOS and desktop all follow the same route map.

Add the Navigation Library

Compose Multiplatform ships its own navigation-compose artifact. Add it to commonMain and the routing toolkit comes with it.

commonMain.dependencies {
    implementation(libs.navigation.compose)
}

Screens Are Just Routes

Each destination is identified by a route string. Think of it like a tiny address for one screen in your app.

Create the NavController

A NavController remembers where you are and lets you move around. You create one and hand it to your graph.

val navController = rememberNavController()

Declare the NavHost

The NavHost hosts your screens and shows whichever route is current. You give it a controller and a start destination.

NavHost(navController, startDestination = "home") {
    composable("home") { HomeScreen() }
    composable("details") { DetailsScreen() }
}

Pick a Start Destination

The startDestination is the first screen users see. It is just one of your route strings, chosen as the entry point.

Navigate Forward

To open another screen you call navigate with its route. The NavHost swaps in that destination for you.

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

Go Back Cleanly

Calling popBackStack returns to the previous screen. Compose tracks the history so back behaves the way users expect.

navController.popBackStack()

The Back Stack

Every screen you open is pushed onto a back stack. Going back pops the top entry, just like a stack of cards.

Shared Routing, Native Hosting

The graph is shared, but each platform still hosts it in its own entry point. One route map, two native containers. 🙂

Quick Check

Which component actually performs the move from one screen to another?

Recap: A Shared Map of Screens

You added navigation, built a NavHost with routes, and used the NavController to move forward and back. One graph, every platform. 🚀

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

บทเรียน “นำทางระหว่างหน้าจอ shared” ฟรีหรือไม่

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

คุณจะเรียนรู้อะไรในบทเรียน “นำทางระหว่างหน้าจอ shared”

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

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

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

บทเรียน “นำทางระหว่างหน้าจอ shared” ใช้เวลานานแค่ไหน

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

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

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

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

← กลับไปที่ Kotlin Multiplatform Academy