0Pricing
Android Academy · Lección

Configurar NavHost

Defina un grafo de navegación en Compose

Configurar NavHost es una lección gratuita de Android 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 Android Academy, y tu progreso se sincroniza en la web y la app de CoddyKit. El curso de Android Academy incluye 4 lecciones en total.

Navegar entre pantallas

La mayoría de las aplicaciones tienen más de una pantalla. La biblioteca Navigation Compose permite moverse entre pantallas composables manteniendo una pila de retroceso.

La dependencia

Añada la biblioteca de navegación a su archivo de Gradle y obtendrá NavController, NavHost y funciones auxiliares.

// build.gradle (module)
implementation("androidx.navigation:navigation-compose:2.7.0")

El NavController

NavController es el objeto que realiza la navegación y recuerda la pila de retroceso. Créelo con rememberNavController().

val navController = rememberNavController()

El NavHost

NavHost es un composable que muestra el destino actual. Necesita el controlador y una ruta startDestination.

NavHost(
    navController = navController,
    startDestination = "home"
) {
    // destinations go here
}

Definir destinos

Dentro de la lambda de NavHost, declare cada pantalla con composable("route"). La cadena es la ruta del destino.

composable("home") {
    HomeScreen()
}

Las rutas son cadenas

Una ruta es un identificador de cadena único para un destino, similar a la ruta de una URL. Navega mediante la ruta y NavHost muestra el composable correspondiente.

Un grafo de dos pantallas

Este es un grafo de navegación mínimo con dos destinos. "home" se muestra primero porque es el startDestination.

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

startDestination

startDestination es la primera pantalla que ve el usuario y la raíz de la pila de retroceso. La aplicación no puede quitar elementos de la pila más allá de ella.

Pasar el controlador hacia abajo

Las pantallas que inician la navegación necesitan el NavController. Páselo como parámetro o, mejor aún, pase lambdas sencillas como onContinue para que las pantallas sean reutilizables.

composable("home") {
    HomeScreen(onOpenDetails = {
        navController.navigate("details")
    })
}

Un NavHost por área

Normalmente tendrá un único NavHost en la parte superior de la aplicación. El controlador se crea una vez con rememberNavController() y se comparte entre los destinos.

Cómo unirlo todo

Una configuración completa: controlador, host y dos destinos.

@Composable
fun App() {
    val navController = rememberNavController()
    NavHost(
        navController = navController,
        startDestination = "home"
    ) {
        composable("home") { HomeScreen() }
        composable("details") { DetailsScreen() }
    }
}

Comprobación rápida

¿Qué objeto recuerda la pila de retroceso y realiza la navegación?

Resumen

Configuración de la navegación:

  • rememberNavController() crea el controlador.
  • NavHost muestra los destinos y necesita un startDestination.
  • Declare las pantallas con composable("route"); las rutas son cadenas únicas.

Preguntas frecuentes

¿La lección «Configurar NavHost» es gratis?

Sí — el texto completo de «Configurar NavHost» 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 Android Academy, actualiza a CoddyKit PRO. El curso de Android Academy incluye 4 lecciones en total.

¿Qué aprenderé en «Configurar NavHost»?

Defina un grafo de navegación en Compose Practicas Android 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 Android Academy?

No se requiere experiencia previa. Android 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 «Configurar NavHost»?

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 Android Academy?

Sí. Cada lección de Android 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

  1. Configurar NavHost
  2. Navegar entre pantallas
  3. Pasar argumentos
  4. Navegación inferior
← Volver a Android Academy