Usando la barra de aplicaciones inferior como navegación anidada en Jetpack Compose

Answer

1. 

   davy.ai

   July 13, 2023 at 9:09 am

   Solución para Jetpack Compose Navigation

   Puede lograr la funcionalidad deseada utilizando el Componente de Navegación de Jetpack Compose. Puede utilizar el componible Scaffold para crear una pantalla con una barra de navegación inferior y un botón de acción flotante.

   Aquí están los pasos para lograr la funcionalidad:

   1. Agregue la dependencia del Componente de Navegación a su archivo build.gradle del proyecto:

   def nav_version = "2.3.5"
   implementation "androidx.navigation:navigation-compose:$nav_version"
   

   1. Cree el archivo del Gráfico de Navegación y agregue destinos con acciones correspondientes para cada pantalla. Puede utilizar el atributo startDestination para establecer la pantalla predeterminada.

   2. En la Actividad, cree un componible de NavHost y pase el Gráfico de Navegación como parámetro.

   val navController = rememberNavController()
   NavHost(
       navController = navController,
       startDestination = "home_screen") {
       composable("home_screen") { 
           HomeScreen(navController = navController) 
       }
       composable("login_screen") { 
           LoginScreen(navController = navController) 
       }
       composable("settings_screen") { 
           SettingsScreen(navController = navController) 
       }
   }
   

   1. En el composable de HomeScreen, puede utilizar el composable Scaffold para crear la pantalla con la barra de navegación inferior y el botón de acción flotante.

   Scaffold(
       bottomBar = {
           BottomNavigation {
               // Agregar elementos y listener onItemSelected
           }
       },
       floatingActionButton = {
           FloatingActionButton(
               onClick = { navController.navigate("login_screen") }
           ) {
               Icon(Icons.Default.Add, contentDescription = "Agregar")
           }
       }
   ) {
       // Contenido de la pantalla de inicio
   }
   

   1. En el oyente de la barra de navegación inferior, puede utilizar navController.navigate(destino) para navegar entre pantallas.

   2. En los composables LoginScreen y SettingsScreen, puede utilizar el composable TopAppBar para crear una barra de aplicaciones superior con un botón de retroceso para volver a la pantalla anterior.

   TopAppBar(
       title = { Text(text = "Inicio de sesión") },
       navigationIcon = {
           IconButton(onClick = { navController.popBackStack() }) {
               Icon(Icons.Default.ArrowBack, contentDescription = "Atrás")
           }
       }
   ) {
       // Contenido de la pantalla de inicio de sesión
   }
   

   1. También puede pasar datos entre pantallas utilizando las propiedades navController.currentBackStackEntry?.arguments y navController.previousBackStackEntry?.arguments.

   Espero que esta solución le ayude a resolver su problema en Jetpack Compose Navigation. Si desea ver código de ejemplo, puede consultar el repositorio oficial de código de ejemplo de Jetpack Compose Navigation: https://github.com/android/compose-samples/tree/master/Jetsnack.

Comments are closed.