Type to search…

Navegació

El component de navegació fa servir un graf de navegació per gestionar la navegació de la teva aplicació.

kotlin/compose/navigation
This page hasn't been translated yet — shown in its original language:Català

Introducció

El Navigation component utilitza un graf de navegació per gestionar la navegació de la teva aplicació.

El graf de navegació és l’estructura de dades que conté cada destinació dins la teva aplicació i la connexió entre elles.

Note

El graf de navegació és diferent de la back stack, que és una pila dins del NavController que conté les destinacions que l’usuari ha visitat recentment.

Hi ha tres tipus de destinacions: hosted, dialog, i activity.

Les destinacions “hosted” són les que s’utilitzen amb més freqüència, i ocupen tota la pantalla del’amfitrió.

Entorn de treball

Crea un nou projecte compose-navigation amb Amper

Habilita la serialització i afegeix una dependència amb la biblioteca navigation-compose: module.yaml

A continuació tens una aplicació d’exemple amb dues pantalles (“screens”).

Modifica el fitxer src/main.kt:

kotlin
src/main.kt
import androidx.compose.foundation.layout.Column
import androidx.compose.material.Button
import androidx.compose.material.MaterialTheme
import androidx.compose.material.Text
import androidx.compose.runtime.*

import androidx.navigation.NavController
import androidx.navigation.compose.NavHost
import androidx.navigation.compose.composable
import androidx.navigation.compose.rememberNavController
import kotlinx.serialization.Serializable


@Composable
fun App() {
    MaterialTheme {
        val controller = rememberNavController()
        NavHost(controller, startDestination = HomeRoute) {
            composable<HomeRoute> { HomeScreen(controller) }
            composable<CityRoute> { CityScreen() }
        }
    }
}

@Serializable
object HomeRoute

@Composable
fun HomeScreen(controller: NavController) {

    Column {
        Text("Home")
        Button(onClick = { controller.navigate(CityRoute) }) {
            Text("City")
        }
    }
}

@Serializable
object CityRoute

@Composable
fun CityScreen() {
    Text("Barcelona")
}

Amb la funció “composable” NavHost crees un graf de navegació.

En cridar la funció “composable” NavHost passem com a paràmetres un NavController i una ruta pel destí inicial (la ruta Home).

Amb la funció composable() defineixes quin “composable” es el destí d’una “ruta”.

Quan defineixes una ruta mai has de dir de quin “screen” ha de venir, sinó quin “screen” ha de gestionar la “ruta”.

Note

Amb la tecla pots navegar cap enrere.

You're reading a preview.

Sign in with Google to read the full page. A Google account includes 5 free pages in total; students and teachers read their course pages without limit.

Sign in