¿Qué es Jetpack Navigation 3? Jetpack Navigation 3 es una nueva biblioteca de navegación de Google que es fundamentalmente diferente de las versiones anteriores. - una lista regular de mutable donde cada elemento representa una pantalla en su aplicación. NavBackStack Añade y elimina elementos de esta lista, y la interfaz de usuario se actualiza automáticamente. - Una clase regular de Kotlin. NavKey Esto le da un control total sobre la navegación, pero requiere escribir un montón de código de boilerplate para operaciones típicas. Por qué trabajar directamente con NavBackStack es incómodo Veamos cómo es el código cuando se trabaja directamente con : NavBackStack @Composable
fun MyApp() {
    val backStack = rememberNavBackStack(Screen.Home)
    
    // Add a screen
    backStack.add(Screen.Details("123"))
    
    // Go back
    backStack.removeLastOrNull()
    
    // Replace current screen
    backStack.set(backStack.lastIndex, Screen.Success)
}
 Los problemas comienzan cuando necesita activar la navegación desde un ViewModel. a ViewModel (que, en mi entendimiento, viola los principios arquitectónicos, ya que creo que el ViewModel no debería saber sobre cosas específicas de Compose), o crear llamadas intermedias para cada acción de navegación. NavBackStack Además, cuando se trabaja directamente con la pila, es fácil olvidar manejar los casos de borde. Cómo Nav3 Router Simplifica el Trabajo Nav3 Router es un delgado envoltorio sobre Navegación 3 que proporciona una API familiar para la navegación. En lugar de pensar en índices y operaciones de lista, simplemente dice "ir a la pantalla X" o "volver". Punto importante: Nav3 Router no crea su propia pila. que la Navegación 3 proporciona, simplemente lo hace más conveniente para trabajar con. , la biblioteca traduce esto en la operación correspondiente con la pila original. NavBackStack router.push(Screen.Details) Las principales ventajas: 
 
 
 
 
 
 Se puede usar desde el modelo de vista Los comandos de navegación son tamponados si la interfaz de usuario está temporalmente indisponible (por ejemplo, durante la rotación de la pantalla) Todas las operaciones se realizan atómicamente Fuego limpio Flexibilidad en la modificación y la adición de comportamiento personalizado Instalación Nav3 Router está disponible en Maven Central. Añade la dependencia a su : build.gradle.kts // For shared module in KMP project
kotlin {
    sourceSets {
        commonMain.dependencies {
            implementation("io.github.arttttt.nav3router:nav3router:1.0.0")
        }
    }
}

// For Android-only project
dependencies {
    implementation("io.github.arttttt.nav3router:nav3router:1.0.0")
}
 El código fuente de la biblioteca está disponible en GitHub: en github.com/arttttt/Nav3Router Cómo está estructurado el router Nav3 La biblioteca consta de tres partes principales, cada una de las cuales resuelve su propia tarea: Router - Interfaz de desarrollador Router ofrece métodos como , de , de Cuando usted llama a estos métodos, el router crea los comandos correspondientes y los envía a la cadena. el router no sabe nada sobre cómo se ejecutará la navegación - esto permite usarlo desde cualquier lugar. push() pop() replace() CommandQueue: buffer entre los comandos y su ejecución CommandQueue resuelve el problema del timing. Imagina: el usuario presionó un botón durante la rotación de la pantalla. La interfaz está siendo recreada, y el navegador está temporalmente indisponible. CommandQueue guardará el comando y lo ejecutará tan pronto como el navegador esté listo de nuevo. Sin esto, el comando simplemente se perdería. // Simplified queue logic
class CommandQueue<T : Any> {
    private var navigator: Navigator<T>? = null
    private val pending = mutableListOf<Command<T>>()
    
    fun executeCommand(command: Command<T>) {
        if (navigator != null) {
            navigator.apply(command)  // Navigator exists - execute immediately
        } else {
            pending.add(command)       // No - save for later
        }
    }
}
 Navigator - El que trabaja con la pila El navegador toma los comandos y los aplica a Detalle importante: primero crea una copia de la pila actual, aplica todos los comandos a ella, y sólo después reemplaza atómicamente la pila original con la copia modificada. NavBackStack // Simplified Navigator logic
fun applyCommands(commands: Array<Command>) {
    val stackCopy = backStack.toMutableList()  // Work with a copy
    
    for (command in commands) {
        when (command) {
            is Push -> stackCopy.add(command.screen)
            is Pop -> stackCopy.removeLastOrNull()
            // ... other commands
        }
    }
    
    backStack.swap(stackCopy)  // Atomically apply changes
}
 Comenzando con Nav3 Router La forma más sencilla — ni siquiera crear router manualmente. Nav3Host lo hará por usted: @Composable
fun App() {
    val backStack = rememberNavBackStack(Screen.Home)
    
    // Nav3Host will create Router automatically
    Nav3Host(backStack = backStack) { backStack, onBack, router ->
        NavDisplay(
            backStack = backStack,
            onBack = onBack,
            entryProvider = entryProvider {
                entry<Screen.Home> {
                    HomeScreen(
                        onOpenDetails = { 
                            router.push(Screen.Details)  // Use router
                        }
                    )
                }
                
                entry<Screen.Details> {
                    DetailsScreen(
                        onBack = { router.pop() }
                    )
                }
            }
        )
    }
}
 Para aplicaciones más complejas, tiene sentido crear un Router a través de DI y pasarlo al ViewModel: Definición de pantallas @Serializable
sealed interface Screen : NavKey {
    @Serializable
    data object Home : Screen
    
    @Serializable
    data class Product(val id: String) : Screen
    
    @Serializable
    data object Cart : Screen
}
 Pasar el router a Nav3Host. @Composable
fun App() {
    val backStack = rememberNavBackStack(Screen.Home)
    val router: Router<Screen> = getSomehowUsingDI()
    
    // Pass Router to Nav3Host
    Nav3Host(
	    backStack = backStack,
	    router = router,
	) { backStack, onBack, _ ->
        NavDisplay(
            backStack = backStack,
            onBack = onBack,
            entryProvider = entryProvider {
                entry<Screen.Home> { HomeScreen() }
                entry<Screen.Details> { DetailsScreen() }
            }
        )
    }
}
 ViewModel recibe el router a través del constructor. class ProductViewModel(
    private val router: Router<Screen>,
    private val cartRepository: CartRepository
) : ViewModel() {
    
    fun addToCart(productId: String) {
        viewModelScope.launch {
            cartRepository.add(productId)
            router.push(Screen.Cart)  // Navigation from ViewModel
        }
    }
}
 En el UI, solo utilice ViewModel. @Composable
fun ProductScreen(viewModel: ProductViewModel = koinViewModel()) {
    Button(onClick = { viewModel.addToCart(productId) }) {
        Text("Add to Cart")
    }
}
 Ejemplos de escenarios típicos Navegación adelante y atrás // Navigate to a new screen
router.push(Screen.Details(productId))

// Go back
router.pop()

// Navigate with replacement of current screen (can't go back)
router.replaceCurrent(Screen.Success)
 Trabajar con las cadenas de pantalla // Open multiple screens at once
router.push(
    Screen.Category("electronics"),
    Screen.Product("laptop-123"),
    Screen.Reviews("laptop-123")
)

// Return to a specific screen
// Will remove all screens above Product from the stack
router.popTo(Screen.Product("laptop-123"))
 Escenario de Checkout @Composable
fun CheckoutScreen(router: Router<Screen>) {
    Button(
	    onClick = {
	        // After checkout we need to:
	        // 1. Show confirmation screen
	        // 2. Prevent going back to cart
        
	        router.replaceStack(
	            Screen.Home,
	            Screen.OrderSuccess(orderId)
	        )
	        // Now only Home and OrderSuccess are in the stack
	    }
	) {
        Text("Place Order")
    }
}
 Salida de la Navegación // User is deep in settings:
// Home -> Settings -> Account -> Privacy -> DataManagement

// "Done" button should return to home
Button(
	onClick = {
		// Will leave only root (Home)
	    router.clearStack()
	}
) {
    Text("Done")
}

// Or if you need to close the app from anywhere
Button(
	onClick = {
		// Will leave only current screen and trigger system back
	    router.dropStack()
	}
) {
    Text("Exit")
}
 Bonus: SceneStrategy y Diálogos Hasta ahora, sólo hemos hablado de la simple navegación entre pantallas.Pero qué pasa si necesitas mostrar un diálogo o una hoja de fondo?Esto es donde el concepto SceneStrategy de Navegación 3 viene a su ayuda. ¿Qué es SceneStrategy? SceneStrategy es un mecanismo que determina exactamente cómo se mostrarán las pantallas de su pila. , que simplemente muestra la última pantalla de la pila. pero puede crear sus propias estrategias para escenarios más complejos. SinglePaneSceneStrategy Piense en SceneStrategy como un director que mira a su pila de pantallas y decide: "Bueno, estas tres pantallas las mostramos normalmente, pero esta última como una ventana modal encima de las anteriores". Crear una estrategia para ModalBottomSheet Creemos una estrategia que mostrará ciertas pantallas como hojas de fondo. Primero, definamos cómo marcaremos tales pantallas: @Serializable
sealed interface Screen : NavKey {
    @Serializable
    data object Home : Screen
    
    @Serializable
    data class Product(val id: String) : Screen
    
    // This screen will be shown as bottom sheet
    @Serializable
    data object Filters : Screen
}
 Ahora, vamos a crear la estrategia en sí. Comprobará los metadatos de la última pantalla y, si encuentra un marcador especial, lo mostrará como una hoja de fondo: class BottomSheetSceneStrategy<T : Any> : SceneStrategy<T> {
    
    companion object {
        // Metadata key by which we identify bottom sheet
        private const val BOTTOM_SHEET_KEY = "bottomsheet"
        
        // Helper function to create metadata
        fun bottomSheet(): Map<String, Any> {
            return mapOf(BOTTOM_SHEET_KEY to true)
        }
    }
    
    @Composable
    override fun calculateScene(
        entries: List<NavEntry<T>>,
        onBack: (Int) -> Unit
    ): Scene<T>? {
        val lastEntry = entries.lastOrNull() ?: return null
        
        // Check if the last screen has bottom sheet marker
        val isBottomSheet = lastEntry.metadata[BOTTOM_SHEET_KEY] as? Boolean
        
        if (isBottomSheet == true) {
            // Return special Scene for bottom sheet
            return BottomSheetScene(
                entry = lastEntry,
                previousEntries = entries.dropLast(1),
                onBack = onBack
            )
        }
        
        // This is not a bottom sheet, let another strategy handle it
        return null
    }
}
 Combinar múltiples estrategias En una aplicación real, es posible que necesite hojas de fondo, diálogos y pantallas regulares.Para ello, puede crear una estrategia de delegado que seleccione la estrategia correcta para cada pantalla: class DelegatedScreenStrategy<T : Any>(
    private val strategyMap: Map<String, SceneStrategy<T>>,
    private val fallbackStrategy: SceneStrategy<T>
) : SceneStrategy<T> {
    
    @Composable
    override fun calculateScene(
        entries: List<NavEntry<T>>,
        onBack: (Int) -> Unit
    ): Scene<T>? {
        val lastEntry = entries.lastOrNull() ?: return null
        
        // Check all keys in metadata
        for (key in lastEntry.metadata.keys) {
            val strategy = strategyMap[key]
            if (strategy != null) {
                // Found suitable strategy
                return strategy.calculateScene(entries, onBack)
            }
        }
        
        // Use default strategy
        return fallbackStrategy.calculateScene(entries, onBack)
    }
}
 Utilización en la aplicación Ahora, vamos a ponerlo todo juntos.Aquí está lo que el uso de la hoja de fondo parece en una aplicación real: @Composable
fun ShoppingApp() {
    val backStack = rememberNavBackStack(Screen.Home)
    val router = rememberRouter<Screen>()
    
    Nav3Host(
        backStack = backStack,
        router = router
    ) { backStack, onBack, router ->
        NavDisplay(
            backStack = backStack,
            onBack = onBack,
            // Use our combined strategy
            sceneStrategy = DelegatedScreenStrategy(
                strategyMap = mapOf(
                    "bottomsheet" to BottomSheetSceneStrategy(),
                    "dialog" to DialogSceneStrategy()  // Navigation 3 already has this strategy
                ),
                fallbackStrategy = SinglePaneSceneStrategy()  // Regular screens
            ),
            entryProvider = entryProvider {
                entry<Screen.Home> {
                    HomeScreen(
                        onOpenFilters = {
                            // Open filters as bottom sheet
                            router.push(Screen.Filters)
                        }
                    )
                }
                
                entry<Screen.Product> { screen ->
                    ProductScreen(productId = screen.id)
                }
                
                // Specify that Filters should be bottom sheet
                entry<Screen.Filters>(
                    metadata = BottomSheetSceneStrategy.bottomSheet()
                ) {
                    FiltersContent(
                        onApply = { filters ->
                            // Apply filters and close bottom sheet
                            applyFilters(filters)
                            router.pop()
                        }
                    )
                }
            }
        )
    }
}
 ¿Qué es lo que está sucediendo aquí? cuando llamas Pero gracias a los metadatos y a nuestra estrategia, la interfaz de usuario entiende que esta pantalla debe mostrarse como una hoja de fondo en la parte superior de la pantalla anterior, en lugar de reemplazarla por completo. router.push(Screen.Filters) Cuando llamamos Desde el punto de vista del router, esta es una navegación de regreso regular, pero visualmente parece cerrar una ventana modal. router.pop() Ventajas de este enfoque El uso de SceneStrategy proporciona varias ventajas importantes. En primer lugar, su lógica de navegación sigue siendo simple - todavía utiliza y En segundo lugar, el estado de navegación permanece consistente – la hoja de fondo es sólo otra pantalla en la pila que se guarda correctamente durante la rotación de la pantalla o el proceso de matar. Y finalmente, proporciona gran flexibilidad – puede cambiar fácilmente la forma en que se muestra una pantalla simplemente cambiando sus metadatos, sin tocar la lógica de navegación. push pop Este enfoque es especialmente útil cuando la misma pantalla puede mostrarse de manera diferente dependiendo del contexto.Por ejemplo, una pantalla de inicio de sesión puede ser una pantalla regular en el primer lanzamiento de la aplicación y un diálogo modal cuando se intenta realizar una acción que requiere autorización. ¿Por qué utilizar Nav3 Router? Nav3 Router no intenta reemplazar la Navegación 3 ni añadir nuevas características. Su tarea es hacer que el trabajo con la navegación sea conveniente y predecible. Obtiene una API simple que puede ser utilizada desde cualquier capa de la aplicación, manejo automático de problemas de timing, y la capacidad de probar fácilmente la lógica de la navegación. Al mismo tiempo, bajo el capó, la Navegación 3 regular todavía funciona con todas sus capacidades: ahorro de estado, soporte de animación, y el manejo correcto del botón "Back" del sistema. Si ya está utilizando Navegación 3 o planea migrar a ella, Nav3 Router ayudará a hacer esta experiencia más agradable sin agregar complejidad innecesaria al proyecto. La izquierda 
 
 
 Archivo de GitHub: github.com/arttttt/Nav3Router Ejemplos de uso: véase la carpeta muestra en el repositorio

Read My Stories

Este audio es producido en el idioma original de la historia!

Nav3 Router: Navegación conveniente en la parte superior de Jetpack Navegación 3

About Author

COMENTARIOS

ETIQUETAS

ESTE ARTÍCULO FUE PRESENTADO EN

Related Stories

Una breve introducción a la teoría del cerebro de Boltzmann

Valhalla de Floki se une como patrocinador asociado de la gira de la India por Sri Lanka

Creación de productos criptográficos centrados en el usuario: la importancia de los comentarios de los clientes

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

Una breve introducción a la teoría del cerebro de Boltzmann

Valhalla de Floki se une como patrocinador asociado de la gira de la India por Sri Lanka

Creación de productos criptográficos centrados en el usuario: la importancia de los comentarios de los clientes

¿Quieres ganar un concurso de redacción de HackerNoon? Esto es lo que recomiendan los ganadores del concurso #crypto-api

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps