Ejemplo práctico 12: Aplicación con tres pantallas
Objetivo
Se creará una aplicación con tres pantallas (Home, Detalle, Configuración) que permita navegar entre ellas utilizando botones. Además, desde Configuración, se podrá volver a Home eliminando del stack a Detalle.
Configuración del proyecto
En primer lugar, deberás añadir al build.gradle.kts (Module :app) la librería Navigation Compose. Recuerda sincronizar.
1implementation("androidx.navigation:navigation-compose:2.9.2")Composable MyAppNav
Se crea el método encargado de controlar la navegación, básico, en este ejemplo no se utilizan rutas con parámetros.
1@Composable
2fun MyAppNav() {
3 val navController: NavHostController = rememberNavController()
4
5 NavHost(navController, startDestination = "home") {
6 composable("home") { Home(navController) }
7 composable("detail") { Detail(navController) }
8 composable("config") { Config(navController) }
9 }
10}Composable Home
Representa la pantalla inicial.
1@Composable
2fun Home(navController: NavHostController) {
3 Column (
4 modifier = Modifier.fillMaxSize().padding(16.dp)
5 ) {
6 Text(
7 text = "Home Screen",
8 modifier = Modifier.fillMaxWidth().padding(8.dp)
9 )
10
11 Button(
12 modifier = Modifier.fillMaxWidth().padding(8.dp),
13 onClick = { navController.navigate("detail") }) { Text("Go to Detail") }
14 }
15}Composable Detail
1@Composable
2fun Detail(navController: NavHostController) {
3 Column (
4 modifier = Modifier.fillMaxSize().padding(16.dp)
5 ) {
6 Text(
7 text = "Detail Screen",
8 modifier = Modifier.fillMaxWidth().padding(8.dp)
9 )
10
11 Button(
12 modifier = Modifier.fillMaxWidth().padding(8.dp),
13 onClick = { navController.navigate("config") }) { Text("Go to Configuration") }
14 }
15}Composable Config
1@Composable
2fun Config(navController: NavHostController) {
3 Column (
4 modifier = Modifier.fillMaxSize().padding(16.dp)
5 ) {
6 Text(
7 text = "Configuration Screen",
8 modifier = Modifier.fillMaxWidth().padding(8.dp)
9 )
10
11 Button(
12 modifier = Modifier.fillMaxWidth().padding(8.dp),
13 onClick = {
14 navController.navigate("home") {
15 popUpTo("home") // Elimina hasta "home"
16 launchSingleTop = true // Evita duplicados
17 }
18 }) { Text("Go to Home") }
19 }
20}La diferencia entre los Composables anteriores está en el navigate(), popUpTo() se encarga de limpiar la pila, puedes probarlo con el botón atrás cuando estés nuevamente en Home, la aplicación se cerrará en lugar de volver a la pantalla anterior.
MainActivity
La clase MainActivity podría quedar como se muestra a continuación.
1class MainActivity : ComponentActivity() {
2 @OptIn(ExperimentalMaterial3Api::class)
3 override fun onCreate(savedInstanceState: Bundle?) {
4 super.onCreate(savedInstanceState)
5 enableEdgeToEdge()
6 setContent {
7 ExampleT4_12Theme {
8 Scaffold(
9 topBar = {
10 TopAppBar(
11 title = {
12 Text(text = getString(R.string.app_name))
13 },
14 colors = topAppBarColors(
15 containerColor = MaterialTheme.colorScheme.primaryContainer,
16 titleContentColor = MaterialTheme.colorScheme.primary,
17 )
18 )
19 },
20 modifier = Modifier.fillMaxSize()
21 ) { innerPadding ->
22 Column(
23 modifier = Modifier.fillMaxSize().padding(innerPadding)
24 ) {
25 MyAppNav()
26 }
27 }
28 }
29 }
30 }
31}