Jetpack Compose Academy · Lezione

NavController e NavHost

Definisca il grafo di navigazione dell'app.

NavController e NavHost è una lezione Jetpack Compose Academy gratuita su CoddyKit. Questa è la lezione 1 di 4. Puoi leggere la lezione completa qui gratuitamente — poi esercitati direttamente nel browser con un editor di codice integrato e un tutor IA disponibile 24/7. Fa parte del percorso di apprendimento Jetpack Compose Academy, e i tuoi progressi si sincronizzano tra il web e l'app CoddyKit. Il corso Jetpack Compose Academy include 4 lezioni in totale.

Parti di questa lezione non sono ancora state tradotte e vengono mostrate in inglese.

Moving Between Screens

Real apps have many screens. Navigation Compose is the official library that lets you move between them without juggling fragments or activities. 🧭

Add the Dependency

Navigation lives in its own artifact. Add androidx.navigation:navigation-compose to your module's build file before you can use any of it.

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

Meet the NavController

The NavController is the brain of navigation. It tracks where you are, remembers history, and carries out every move you ask for.

Remember the Controller

You create one with rememberNavController() so it survives recomposition. Make it once near the top of your app and pass it down.

val navController = rememberNavController()

Meet the NavHost

The NavHost is the container that swaps screens in and out. It shows exactly one destination at a time, based on the controller.

Wire Host to Controller

A NavHost needs two things: the navController that drives it and a startDestination that says which screen to show first.

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

The startDestination

The startDestination is the route shown when the app opens. It is also the screen users land on after the back stack empties.

Declaring Destinations

Inside the NavHost lambda you list your screens with composable("route"). Each one ties a route name to the UI it should show.

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

Navigate by Route

To change screens, call navController.navigate("route"). The host sees the request and swaps in the matching destination instantly.

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

One Controller, One Host

Keep a single NavController paired with a single NavHost for an app's main flow. Sharing one source of truth avoids confusing, out-of-sync history.

Why Routes Are Strings

Routes are just String identifiers, like tiny URLs inside your app. This keeps destinations decoupled and easy to link later.

Quick Check

Which piece actually performs the screen change?

Recap

You met the duo behind navigation: the NavController drives moves and history, while the NavHost shows one destination at a time from your route list. 🎉

Domande Frequenti

La lezione «NavController e NavHost» è gratuita?

Sì — il testo completo di «NavController e NavHost» è gratuito qui sul web. Per esercitarvi in modo interattivo (un editor di codice integrato e un tutor IA 24/7) e sbloccare il resto del corso Jetpack Compose Academy, passa a CoddyKit PRO. Il corso Jetpack Compose Academy include 4 lezioni in totale.

Cosa imparerò in «NavController e NavHost»?

Definisca il grafo di navigazione dell'app. Eserciti Jetpack Compose Academy con codice pratico che esegui direttamente nel browser, e un tutor IA 24/7 risponde alle tue domande mentre lavori sulla lezione.

Ho bisogno di esperienza per iniziare Jetpack Compose Academy?

Non è richiesta alcuna esperienza precedente. Jetpack Compose Academy su CoddyKit è strutturato per principianti e studenti avanzati, quindi puoi iniziare da qui o dall'inizio e procedere al tuo ritmo. Questa è la lezione 1 di 4.

Quanto tempo richiede la lezione «NavController e NavHost»?

La maggior parte delle lezioni CoddyKit richiede circa 5–10 minuti. Ogni lezione è breve e interattiva, quindi fai progressi costanti e riprendi esattamente da dove hai lasciato su web e app.

Posso scrivere ed eseguire codice in questa lezione Jetpack Compose Academy?

Sì. Ogni lezione Jetpack Compose Academy include un editor di codice integrato, quindi scrivi ed esegui codice reale direttamente nel tuo browser e ricevi feedback istantaneo dall'IA — nessuna configurazione locale necessaria.

Tutte le lezioni di questo corso

← Torna a Jetpack Compose Academy