Navegue entre pantallas compartidas
Conecte un grafo de navegación en Compose Multiplatform
Navegue entre pantallas compartidas es una lección gratuita de Kotlin Multiplatform Academy en CoddyKit. Esta es la lección 1 de 4. Puedes leer la lección completa abajo gratuitamente — luego la practicas en el navegador con un editor de código integrado y un tutor de IA 24/7. Forma parte de la ruta de aprendizaje de Kotlin Multiplatform Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Kotlin Multiplatform Academy incluye 4 lecciones en total.
Partes de esta lección aún no han sido traducidas y se muestran en inglés.
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. 🚀
Preguntas frecuentes
¿La lección «Navegue entre pantallas compartidas» es gratis?
Sí — el texto completo de «Navegue entre pantallas compartidas» es gratis para leer aquí en la web. Para practicarla de forma interactiva (editor de código integrado y tutor de IA 24/7) y desbloquear el resto del curso de Kotlin Multiplatform Academy, actualiza a CoddyKit PRO. El curso de Kotlin Multiplatform Academy incluye 4 lecciones en total.
¿Qué aprenderé en «Navegue entre pantallas compartidas»?
Conecte un grafo de navegación en Compose Multiplatform Practicas Kotlin Multiplatform Academy con código real que ejecutas directamente en el navegador, y un tutor de IA 24/7 responde tus preguntas mientras trabajas en la lección.
¿Necesito experiencia previa para empezar Kotlin Multiplatform Academy?
No se requiere experiencia previa. Kotlin Multiplatform Academy en CoddyKit está estructurado para principiantes hasta estudiantes avanzados, así que puedes empezar aquí o desde el inicio y avanzar a tu ritmo. Esta es la lección 1 de 4.
¿Cuánto tiempo toma la lección «Navegue entre pantallas compartidas»?
La mayoría de las lecciones de CoddyKit toman alrededor de 5–10 minutos. Cada una es compacta e interactiva, así que avanzas constantemente y retomas exactamente por donde dejaste en la web y la app.
¿Puedo escribir y ejecutar código en esta lección de Kotlin Multiplatform Academy?
Sí. Cada lección de Kotlin Multiplatform Academy incluye un editor de código integrado, así que escribes y ejecutas código real directamente en tu navegador y obtienes retroalimentación instantánea de IA — sin configuración local necesaria.
Todas las lecciones de este curso
- Navegue entre pantallas compartidas
- Pase argumentos y deep links
- Imágenes, fuentes y cadenas compartidas
- Localice el texto de la interfaz compartida