Tema 3. Navigation Compose

 1// build.gradle.kts — plugins (nivel de proyecto)
 2plugins {
 3    id("org.jetbrains.kotlin.plugin.serialization") version libs.versions.kotlin apply false
 4}
 5
 6// build.gradle.kts (app) — plugins del módulo
 7plugins {
 8    id("org.jetbrains.kotlin.plugin.serialization")
 9}
10
11// build.gradle.kts (app) — dependencias
12dependencies {
13    // Navigation Compose (API tipada disponible desde 2.8.0)
14    implementation("androidx.navigation:navigation-compose:2.9.8")
15
16    // Kotlin Serialization — imprescindible para las rutas @Serializable
17    implementation("org.jetbrains.kotlinx:kotlinx-serialization-json:1.11.0")
18}

Enfoque clásico (Bloque 1)          Enfoque moderno (este tema)
─────────────────────────           ──────────────────────────
MainActivity                        MainActivity
ListadoActivity               →         setContent {
DetalleActivity                             NavHost {
FavoritosActivity                               Pantalla Listado
                                                Pantalla Detalle
                                                Pantalla Favoritos
                                            }
                                        }

1// Crear el NavController — siempre en el nivel más alto posible
2// (normalmente en MainActivity o en el composable raíz)
3val navController = rememberNavController()

 1NavHost(
 2    navController = navController,
 3    startDestination = Listado   // objeto @Serializable, no un String
 4) {
 5    composable<Listado> {
 6        PantallaListado(onNavegaADetalle = { id -> navController.navigate(Detalle(id)) })
 7    }
 8    composable<Detalle> { backStackEntry ->
 9        val ruta = backStackEntry.toRoute<Detalle>()
10        PantallaDetalle(libroId = ruta.id, onVolver = { navController.navigateUp() })
11    }
12}

Inicio:   [Listado]
navigate(Detalle(1)):  [Listado] → [Detalle(1)]
navigate(Favoritos):   [Listado] → [Detalle(1)] → [Favoritos]
navigateUp():          [Listado] → [Detalle(1)]
navigateUp():          [Listado]

1// ❌ API antigua (antes de Navigation 2.8) — evitar en proyectos nuevos
2composable("detalle/{id}") { backStackEntry ->
3    val id = backStackEntry.arguments?.getString("id")?.toInt() ?: 0
4    PantallaDetalle(libroId = id)
5}
6navController.navigate("detalle/42")

1// ✅ API tipada (Navigation 2.8+) — recomendada
2@Serializable
3data object Listado   // sin argumentos → data object
4
5@Serializable
6data class Detalle(val id: Int)   // con argumentos → data class
7
8navController.navigate(Detalle(id = 42))   // tipado, seguro en compilación

 1import kotlinx.serialization.Serializable
 2
 3// Sin argumentos → data object
 4@Serializable
 5data object Listado
 6
 7@Serializable
 8data object Favoritos
 9
10// Con argumento requerido → data class
11@Serializable
12data class Detalle(val id: Int)
13
14// Con argumento opcional (nullable) → tipo nullable con valor por defecto
15@Serializable
16data class Busqueda(val query: String? = null)
17
18// Con varios argumentos y valores por defecto
19@Serializable
20data class Edicion(
21    val id: Int,
22    val esNueva: Boolean = false
23)

1composable<Detalle> { backStackEntry ->
2    // toRoute<T>() deserializa la ruta y devuelve el objeto con los argumentos
3    val ruta: Detalle = backStackEntry.toRoute<Detalle>()
4
5    PantallaDetalle(
6        libroId = ruta.id,
7        onVolver = { navController.navigateUp() }
8    )
9}

1class DetalleViewModel(
2    savedStateHandle: SavedStateHandle
3) : ViewModel() {
4    // toRoute<T>() también está disponible en SavedStateHandle
5    private val ruta: Detalle = savedStateHandle.toRoute<Detalle>()
6    val libroId: Int = ruta.id
7}

 1// ✅ Patrón recomendado — la pantalla no sabe nada de Navigation
 2// ─── screens/detalle/PantallaDetalle.kt ──────────────────────────────────────────────────────────
 3@OptIn(ExperimentalMaterial3Api::class)
 4@Composable
 5fun PantallaDetalle(
 6    libroId: Int,
 7    onVolver: () -> Unit = {},
 8    onCompartir: (String) -> Unit = {},
 9    viewModel: DetalleViewModel = viewModel(factory = DetalleViewModel.Factory)
10) {
11    val uiState by viewModel.uiState.collectAsStateWithLifecycle()
12
13    Scaffold(
14        topBar = {
15            TopAppBar(
16                title = { Text("Detalle") },
17                navigationIcon = {
18                    IconButton(onClick = onVolver) {
19                        Icon(Icons.AutoMirrored.Filled.ArrowBack, contentDescription = "Volver")
20                    }
21                }
22            )
23        }
24    ) { padding ->
25        // contenido de la pantalla...
26    }
27}

1// ❌ Antipatrón — la pantalla está acoplada a Navigation
2@Composable
3fun PantallaDetalleMal(
4    libroId: Int,
5    navController: NavController   // difícil de testear, acoplado a Navigation
6) {
7    // ...
8    Button(onClick = { navController.navigateUp() }) { Text("Volver") }
9}

1import kotlinx.serialization.Serializable
2
3// ─── navegacion/Rutas.kt ─────────────────────────────────────────────────────────────────────────
4
5@Serializable data object Inicio
6@Serializable data object Listado
7@Serializable data class Detalle(val id: Int)
8@Serializable data object Favoritos

 1// ─── navegacion/AppNavigation.kt ─────────────────────────────────────────────────────────────────
 2@Composable
 3fun AppNavigation(navController: NavHostController = rememberNavController()) {
 4    Scaffold(
 5        bottomBar = {
 6            AppDummyBottomBar(navController = navController)
 7        }
 8    ) { innerPadding ->
 9        NavHost(
10            navController = navController,
11            startDestination = Listado,
12            modifier = Modifier.padding(innerPadding)
13        ) {
14
15            composable<Listado> {
16                PantallaListado(    // <- Composable de la pantalla listado.
17                    onNavegaADetalle = { id ->
18                        navController.navigate(Detalle(id = id))    // <- Ruta de Navegación a la pantalla detalle con el id del libro.
19                    }
20                )
21            }
22
23            composable<Detalle> { backStackEntry ->
24                val ruta: Detalle = backStackEntry.toRoute<Detalle>()
25                PantallaDetalle(
26                    libroId = ruta.id,
27                    onVolver = { navController.navigateUp() }
28                )
29            }
30        }
31    }
32}

 1// MainActivity.kt
 2class MainActivity : ComponentActivity() {
 3    override fun onCreate(savedInstanceState: Bundle?) {
 4        super.onCreate(savedInstanceState)
 5        setContent {
 6            AppDummyTheme {
 7                AppNavigation()
 8            }
 9        }
10    }
11}

 1import androidx.compose.material.icons.Icons
 2import androidx.compose.material.icons.filled.*
 3import androidx.compose.ui.graphics.vector.ImageVector
 4
 5// ─── navegacion/ItemsNavegacion.kt ───────────────────────────────────────────────────────────────
 6
 7data class ItemNavegacion<T : Any>(
 8    val etiqueta: String,
 9    val ruta: T,
10    val icono: ImageVector,
11    val iconoSeleccionado: ImageVector = icono
12)
13
14val itemsNavegacionPrincipal = listOf(
15    ItemNavegacion(
16        etiqueta = "Catálogo",
17        ruta = Listado, // <- Ruta de Navegación a la pantalla listado.
18        icono = Icons.Outlined.Book,
19        iconoSeleccionado = Icons.Filled.Book
20    ),
21    ItemNavegacion(
22        etiqueta = "Favoritos",
23        ruta = Favoritos,
24        icono = Icons.Default.FavoriteBorder,
25        iconoSeleccionado = Icons.Filled.Favorite
26    )
27)

 1import androidx.compose.material3.*
 2import androidx.compose.runtime.*
 3import androidx.navigation.NavController
 4import androidx.navigation.NavDestination.Companion.hasRoute
 5import androidx.navigation.NavDestination.Companion.hierarchy
 6import androidx.navigation.NavGraph.Companion.findStartDestination
 7import androidx.navigation.compose.currentBackStackEntryAsState
 8
 9// ─── navegacion/AppDummyBottomBar.kt ─────────────────────────────────────────────────────────────
10@Composable
11fun AppDummyBottomBar(navController: NavController) {
12    // currentBackStackEntryAsState: State reactivo del destino actual
13    // Cuando el usuario navega, este State cambia y la barra se recompone
14    val navBackStackEntry by navController.currentBackStackEntryAsState()
15    val destinoActual = navBackStackEntry?.destination
16
17    // Solo mostrar el BottomBar en las pantallas principales
18    // (no en PantallaDetalle, por ejemplo)
19    val mostrarBottomBar = itemsNavegacionPrincipal.any { item ->
20        destinoActual?.hierarchy?.any { it.hasRoute(item.ruta::class) } == true
21    }
22
23    if (mostrarBottomBar) {
24        NavigationBar {
25            itemsNavegacionPrincipal.forEach { item ->
26                // hierarchy: recorre la cadena de destinos desde el actual hasta la raíz
27                // Útil con grafos anidados para resaltar el ítem correcto
28                val seleccionado = destinoActual?.hierarchy?.any {
29                    it.hasRoute(item.ruta::class)
30                } == true
31
32                NavigationBarItem(
33                    selected = seleccionado,
34                    onClick = {
35                        navController.navigate(item.ruta) {
36                            // popUpTo: vuelve al inicio antes de navegar
37                            // evita acumular destinos en la pila al cambiar de pestaña
38                            popUpTo(navController.graph.findStartDestination().id) {
39                                saveState = true   // guarda el estado de la pantalla anterior
40                            }
41                            // launchSingleTop: no apila múltiples copias del mismo destino
42                            launchSingleTop = true
43                            // restoreState: restaura el estado guardado con saveState
44                            restoreState = true
45                        }
46                    },
47                    icon = {
48                        Icon(
49                            imageVector = if (seleccionado) item.iconoSeleccionado else item.icono,
50                            contentDescription = item.etiqueta
51                        )
52                    },
53                    label = { Text(item.etiqueta) }
54                )
55            }
56        }
57    }
58}

1// ✅ Para el botón Atrás en la barra superior → navigateUp()
2IconButton(onClick = { navController.navigateUp() }) {
3    Icon(Icons.AutoMirrored.Filled.ArrowBack, contentDescription = "Volver")
4}
5
6// ✅ Para volver al listado desde cualquier punto → popBackStack tipado
7navController.popBackStack<Listado>(inclusive = false)

1navController.navigate(Listado) {
2    // Eliminar todo hasta PantallaListado antes de navegar
3    popUpTo<Listado> {
4        inclusive = true    // true: también elimina PantallaListado
5        saveState = true    // guarda el estado para poder restaurarlo
6    }
7    launchSingleTop = true  // no crear una nueva instancia si ya está en la cima
8    restoreState = true     // restaurar estado guardado previamente con saveState
9}

 1NavHost(...) {
 2    composable<Detalle> { backStackEntry ->
 3        val ruta = backStackEntry.toRoute<Detalle>()
 4
 5        // Este ViewModel se destruye al salir de PantallaDetalle
 6        val viewModel: DetalleViewModel = viewModel(
 7            factory = DetalleViewModel.factoryConId(ruta.id)
 8        )
 9        PantallaDetalle(viewModel = viewModel, onVolver = { navController.navigateUp() })
10    }
11}

 1// Rutas del flujo de edición
 2@Serializable data object GrafoPedido      // identificador del grafo anidado
 3@Serializable data object PasoSeleccion
 4@Serializable data object PasoConfirmacion
 5
 6NavHost(...) {
 7    // Grafo anidado — las pantallas dentro comparten el mismo ViewModel
 8    navigation<GrafoPedido>(startDestination = PasoSeleccion) {
 9
10        composable<PasoSeleccion> { backStackEntry ->
11            val entradaPadre = remember(backStackEntry) {
12                navController.getBackStackEntry<GrafoPedido>()
13            }
14            // El Factory puede ser el mismo para ambas pantallas
15            val viewModelCompartido: PedidoViewModel = viewModel(
16                viewModelStoreOwner = entradaPadre,
17                factory = PedidoViewModel.Factory
18            )
19            PantallaPasoSeleccion(
20                viewModel = viewModelCompartido,
21                onSiguiente = { navController.navigate(PasoConfirmacion) }
22            )
23        }
24
25        composable<PasoConfirmacion> { backStackEntry ->
26            val entradaPadre = remember(backStackEntry) {
27                navController.getBackStackEntry<GrafoPedido>()
28            }
29            val viewModelCompartido: PedidoViewModel = viewModel(
30                viewModelStoreOwner = entradaPadre,
31                factory = PedidoViewModel.Factory
32            )
33            PantallaPasoConfirmacion(
34                viewModel = viewModelCompartido,
35                onConfirmar = { navController.popBackStack<GrafoPedido>(inclusive = true) }
36            )
37        }
38    }
39}

 1// ─── datal/model/Libro.kt ────────────────────────────────────────────────────────────────────────
 2data class Libro(
 3    val id: Int = 0,
 4    val titulo: String = "",
 5    val autor: String = "",
 6    val year: Int? = 1900,
 7    val isbn: String = "",
 8    val cover: String = "",
 9    val esFavorito: Boolean = false,
10    val leido: Boolean = false
11)

1// ─── navegacion/Rutas.kt ─────────────────────────────────────────────────────────────────────────
2import kotlinx.serialization.Serializable
3
4@Serializable data object Inicio
5@Serializable data object Listado
6@Serializable data class Detalle(val id: Int)
7@Serializable data object Favoritos

1// ─── screens/detalle/DetalleUiState.kt ───────────────────────────────────────────────────────────
2sealed class DetalleUiState {
3    data object Cargando : DetalleUiState()
4    data class Exito(val libro: Libro) : DetalleUiState()
5    data object NoEncontrado : DetalleUiState()
6}

 1// ─── screens/detalle/DetalleViewModel.kt ─────────────────────────────────────────────────────────
 2class DetalleViewModel(
 3    private val libroId: Int,
 4    private val repository: LibrosRepository
 5) : ViewModel() {
 6
 7    private val _uiState = MutableStateFlow<DetalleUiState>(DetalleUiState.Cargando)
 8    val uiState: StateFlow<DetalleUiState> = _uiState.asStateFlow()
 9
10    init {
11        cargarDetalle()
12    }
13
14    private fun cargarDetalle() {
15        viewModelScope.launch {
16            val libro = repository.getLibroPorId(libroId)
17            _uiState.value = if (libro != null) DetalleUiState.Exito(libro)
18            else DetalleUiState.NoEncontrado
19        }
20    }
21
22    companion object {
23        fun factoryConId(id: Int): ViewModelProvider.Factory = viewModelFactory {
24            initializer {
25                DetalleViewModel(
26                    libroId = id,
27                    repository = LibrosRepository()
28                )
29            }
30        }
31    }
32}

 1// ─── screens/detalle/PantallaDetalle.kt ──────────────────────────────────────────────────────────
 2@OptIn(ExperimentalMaterial3Api::class)
 3@Composable
 4fun PantallaDetalle(
 5    libroId: Int,
 6    onVolver: () -> Unit,
 7    viewModel: DetalleViewModel = viewModel(factory = DetalleViewModel.factoryConId(libroId))
 8) {
 9    val uiState by viewModel.uiState.collectAsStateWithLifecycle()
10
11    Scaffold(
12        topBar = {
13            TopAppBar(
14                title = {
15                    val titulo = (uiState as? DetalleUiState.Exito)?.libro?.titulo ?: "Detalle"
16                    Text(titulo)
17                },
18                navigationIcon = {
19                    IconButton(onClick = onVolver) {
20                        Icon(Icons.AutoMirrored.Filled.ArrowBack, contentDescription = "Volver")
21                    }
22                }
23            )
24        }
25    ) { padding ->
26        Box(modifier = Modifier.fillMaxSize().padding(padding)) {
27            when (val estado = uiState) {
28                is DetalleUiState.Cargando ->
29                    CircularProgressIndicator(modifier = Modifier.align(Alignment.Center))
30
31                is DetalleUiState.Exito -> {
32                    Column(
33                        modifier = Modifier
34                            .fillMaxSize()
35                            .padding(24.dp),
36                        verticalArrangement = Arrangement.spacedBy(12.dp)
37                    ) {
38                        Text(
39                            text = estado.libro.titulo,
40                            style = MaterialTheme.typography.headlineMedium
41                        )
42                        Row(horizontalArrangement = Arrangement.spacedBy(8.dp)) {
43                            AssistChip(
44                                onClick = {},
45                                label = { Text(estado.libro.autor) }
46                            )
47                            AssistChip(
48                                onClick = {},
49                                label = { Text("${estado.libro.year}") }
50                            )
51                        }
52                        HorizontalDivider()
53                        Text(
54                            text = "Sinopsis del libro.",
55                            style = MaterialTheme.typography.bodyLarge
56                        )
57                    }
58                }
59
60                is DetalleUiState.NoEncontrado -> {
61                    Column(
62                        modifier = Modifier.fillMaxSize().padding(32.dp),
63                        horizontalAlignment = Alignment.CenterHorizontally,
64                        verticalArrangement = Arrangement.Center
65                    ) {
66                        Icon(
67                            Icons.Default.SearchOff,
68                            contentDescription = null,
69                            modifier = Modifier.size(64.dp),
70                            tint = MaterialTheme.colorScheme.onSurfaceVariant
71                        )
72                        Spacer(modifier = Modifier.height(16.dp))
73                        Text("Libro no encontrado")
74                        Spacer(modifier = Modifier.height(16.dp))
75                        Button(onClick = onVolver) { Text("Volver al catálogo") }
76                    }
77                }
78            }
79        }
80    }
81}

 1// ─── navegacion/AppNavigation.kt ─────────────────────────────────────────────────────────────────
 2@Composable
 3fun AppNavigation(
 4    navController: NavHostController = rememberNavController()
 5) {
 6    Scaffold(
 7        bottomBar = { AppDummyBottomBar(navController = navController) }
 8    ) { innerPadding ->
 9        NavHost(
10            navController = navController,
11            startDestination = Listado,
12            modifier = Modifier.padding(innerPadding)
13        ) {
14
15            composable<Listado> {
16                PantallaListado(    // <- Composable de la pantalla listado.
17                    onNavegaADetalle = { id ->
18                        navController.navigate(Detalle(id = id))    // <- Ruta de Navegación a la pantalla detalle con el id del libro.
19                    }
20                )
21            }
22
23            composable<Detalle> { backStackEntry ->
24                val ruta: Detalle = backStackEntry.toRoute<Detalle>()
25                PantallaDetalle(
26                    libroId = ruta.id,
27                    onVolver = { navController.navigateUp() }
28                )
29            }
30
31            composable<Favoritos> {
32                PantallaFavoritos(
33                    onNavegaADetalle = { id ->
34                        navController.navigate(Detalle(id = id))
35                    }
36                )
37            }
38        }
39    }
40}

[PantallaListado] ──navigate(Detalle(id))──► [PantallaDetalle]
       ▲                                                      │
       │◄──────────────────navigateUp()───────────────────────┘
       │
BottomBar ──── navigate(Favoritos) ──► [PantallaFavoritos]
                                                      │
                    ◄──navigate(Detalle(id))──────────┘