Jetpack Compose Navegación jerárquica plana | Autor: Paul Allies | Octubre de 2021
- La navegación en la aplicación debe ser adecuada: no utilice una navegación ilógica.
- La navegación debe ser siempre intuitiva: los usuarios no tienen tiempo para encontrar la parte correcta de su aplicación.
- No les robe el tiempo a los usuarios: eliminarán aplicaciones
- La navegación debe ser clara: los usuarios siempre deben saber en qué pantalla se encuentran
Al crear una aplicación empresarial, las dos estructuras de navegación principales son En capas con plano.
Los usuarios navegan haciendo solo una elección en cada pantalla hasta que llegan a su destino. Para llegar a otro destino, el usuario debe regresar o comenzar desde el principio y tomar otras decisiones.
usamos Controlador de host de navegación Implementar navegación jerárquica
Agréguelo a su proyecto actualizando la dependencia build.gradle del módulo de la aplicación
dependencies
...
implementation("androidx.navigation:navigation-compose:2.4.0-alpha10")
Luego cree un componente de enrutador para d○ Toda la gestión de rutas. En este enrutador, asignamos 2 pantallas a 2 rutas: «screen1» y «child1». Realizamos un seguimiento de todos los estados de navegación a través del estado elevado de navController, que se pasa a todos los componentes de enrutamiento.
Al hacer clic en el botón en la pantalla 1, el cameo aparecerá en la pantalla 1.
Ahora veamos la navegación plana. Todas las pantallas de inicio se pueden navegar desde la pantalla de inicio. Construiremos y usaremos una barra de navegación inferior para implementar la navegación plana.
Primero agreguemos otra pantalla (screen2) al enrutador
Ahora creemos un BottomNavigationBar, un componente que recibe una lista de elementos de navegación, un controlador de navegación y un controlador de clic de elementos. Luego recorre los elementos de navegación para mostrarlos en la navegación inferior. Tenga en cuenta que BottomNavigation devuelve un RowScope, por lo que todos los elementos renderizados en este componente se renderizarán automáticamente en una fila.
El último paso es cambiar MainActivity para devolver Scaffold con bottomBar.
resultado final: