共有画面間を移動する
Compose Multiplatformでナビゲーション�ラフを接続します
「共有画面間を移動する」はCoddyKit上の無料Kotlin Multiplatform Academyレッスンです。 これはレッスン1/4です。 下記で完全なレッスンを無料で読むことができます。その後、ブラウザ内の組み込みコードエディタと24時間対応のAIチューターでハンズオン演習できます。 これは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. 🚀
よくある質問
「共有画面間を移動する」レッスンは無料ですか？
はい。「共有画面間を移動する」の完全なテキストはこのウェブで無料で読めます。インタラクティブに演習し（組み込みコードエディタと24時間対応のAIチューター）、Kotlin Multiplatform Academyコースの残りをアンロックするには、CoddyKit PROにアップグレードしてください。 Kotlin Multiplatform Academyコースには全4レッスンが含まれています。
「共有画面間を移動する」で何を学びますか？
Compose Multiplatformでナビゲーション�ラフを接続します ブラウザで直接実行するハンズオンコードでKotlin Multiplatform Academyを演習し、24時間対応のAIチューターがレッスンを進める中での質問に答えます。
Kotlin Multiplatform Academyを始めるのに経験は必要ですか？
事前経験は必要ありません。CoddyKitのKotlin Multiplatform Academyは初級者から上級者向けに構成されているため、ここから始めるか最初から始めて、自分のペースで進むことができます。 これはレッスン1/4です。
「共有画面間を移動する」レッスンにはどのくらい時間がかかりますか？
ほとんどのCoddyKitレッスンは約5～10分かかります。各レッスンはコンパクトでインタラクティブなので、着実に進歩し、ウェブとアプリ全体で正確に前回の場所から再開できます。
このKotlin Multiplatform Academyレッスンでコードを書いて実行できますか？
はい。すべてのKotlin Multiplatform Academyレッスンに組み込みコードエディタが含まれているため、ブラウザでリアルコードを書いて実行し、即座のAIフィードバックを取得できます。ローカル設定は不要です。