Què és Jetpack Navigation 3? Jetpack Navigation 3 és una nova biblioteca de navegació de Google que és fonamentalment diferent de les versions anteriors.  — a regular mutable list where each element represents a screen in your application. NavBackStack You add and remove elements from this list, and the UI automatically updates. Each screen is represented as a   — a regular Kotlin class. NavKey Això li dóna un control total sobre la navegació, però requereix escriure una gran quantitat de codi de boilerplate per a operacions típiques. Why Working Directly with NavBackStack is Inconvenient Let's look at what the code looks like when working directly with  : 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)
}
 Els problemes comencen quan cal activar la navegació des d'un ViewModel. a la ViewModel (que, en la meva opinió, viola els principis arquitectònics, ja que crec que la ViewModel no hauria de saber sobre les coses específiques de Compose), o crear trucades intermèdies per a cada acció de navegació. NavBackStack Additionally, when working with the stack directly, it's easy to forget to handle edge cases. How Nav3 Router Simplifies the Work Nav3 Router is a thin wrapper over Navigation 3 that provides a familiar API for navigation. Instead of thinking about indices and list operations, you simply say "go to screen X" or "go back." Punt important: Nav3 Router no crea la seva pròpia pila.  that Navigation 3 provides, just making it more convenient to work with. When you call  , la biblioteca ho tradueix en l'operació corresponent amb la pila original. NavBackStack router.push(Screen.Details) Principals avantatges: 
 
 
 
 
 
 Can be used from ViewModel Els comandes de navegació es buffer si la interfície d'usuari està temporalment indisponible (per exemple, durant la rotació de la pantalla) Totes les operacions d'estaca es fan atòmicament El foc clar Flexibility in modification and adding custom behavior Installation Nav3 Router is available on Maven Central. Add the dependency to your  : 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 codi font de la biblioteca està disponible a GitHub: github.com/arttttt/Nav3Router How Nav3 Router is Structured The library consists of three main parts, each solving its own task: Router - Interfície de desenvolupador Router provides methods like  , ,  . When you call these methods, Router creates corresponding commands and sends them down the chain. Router itself knows nothing about how navigation will be executed — this allows using it from anywhere. push() pop() replace() CommandQueue: buffer entre ordres i la seva execució CommandQueue resol el problema del timing. Imagineu-vos: l'usuari va prémer un botó durant la rotació de la pantalla. La interfície d'usuari s'està recreant i el navegador està temporalment indisponible. CommandQueue guardarà el comandament i l'executarà tan aviat com el navegador estigui preparat de nou. // 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 treballa amb l'estaca Navigator takes commands and applies them to  Detall important: primer crea una còpia de la pila actual, li aplica tots els comandaments i només després reemplaça atòmicament la pila original amb la còpia 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
}
 Getting Started With Nav3 Router La manera més senzilla - ni tan sols crear el Router manualment. Nav3Host ho farà per vostè: @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() }
                    )
                }
            }
        )
    }
}
 Per a aplicacions més complexes, té sentit crear un Router a través de DI i passar-lo al ViewModel: Defineix les pantalles @Serializable
sealed interface Screen : NavKey {
    @Serializable
    data object Home : Screen
    
    @Serializable
    data class Product(val id: String) : Screen
    
    @Serializable
    data object Cart : Screen
}
 Passar 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 rep 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
        }
    }
}
 In UI, just use ViewModel. @Composable
fun ProductScreen(viewModel: ProductViewModel = koinViewModel()) {
    Button(onClick = { viewModel.addToCart(productId) }) {
        Text("Add to Cart")
    }
}
 Examples of Typical Scenarios Navegació endavant i enrere // 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)
 Working with Screen Chains // 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"))
 Escenari de comprovació @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")
    }
}
 Descàrrega de Navegació // 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 i diàlegs Fins ara, només hem parlat de la simple navegació entre pantalles. Però què passa si necessiteu mostrar un diàleg o una taula de fons? Aquí és on el concepte SceneStrategy de Navegació 3 ve a ajudar. Què és SceneStrategy? SceneStrategy és un mecanisme que determina exactament com es mostraran les pantalles de la pila. , which simply shows the last screen from the stack. But you can create your own strategies for more complex scenarios. SinglePaneSceneStrategy Think of SceneStrategy as a director who looks at your stack of screens and decides: "Okay, these three screens we show normally, but this last one — as a modal window on top of the previous ones". This allows representing different UI patterns with the same stack. Crear una estratègia per a ModalBottomSheet Let's create a strategy that will show certain screens as bottom sheets. First, let's define how we'll mark such screens: @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
}
 Comprovarà les metadades de l'última pantalla i, si troba un marcador especial, ho mostrarà com un full inferior: 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
    }
}
 Combining Multiple Strategies In a real application, you might need bottom sheets, dialogs, and regular screens. For this, you can create a delegate strategy that will choose the right strategy for each screen: 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)
    }
}
 Utilització en aplicació Ara, posem-ho tot junts.Aquí està el que fa que l'ús de la fulla de fons sembli en una aplicació 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è està passant aquí? quan truqueu Però gràcies a les metadades i a la nostra estratègia, la interfície d'usuari entén que aquesta pantalla ha de ser mostrada com un full de fons a la part superior de la pantalla anterior, en comptes de substituir-la completament. router.push(Screen.Filters) When calling  Des del punt de vista del router, aquesta és una navegació de tornada regular, però visualment sembla tancar una finestra modal. router.pop() Avantatges d’aquest enfocament L'ús de SceneStrategy proporciona diversos avantatges importants. En primer lloc, la seva lògica de navegació segueix sent senzilla - encara utilitzeu i  without thinking about how exactly the screen will be shown. Second, navigation state remains consistent — bottom sheet is just another screen in the stack that is properly saved during screen rotation or process kill. And finally, it provides great flexibility — you can easily change how a screen is displayed by just changing its metadata, without touching the navigation logic. push pop Aquest enfocament és especialment útil quan la mateixa pantalla es pot mostrar de manera diferent depenent del context. per exemple, una pantalla d'inici de sessió pot ser una pantalla regular en el primer llançament d'aplicacions i un diàleg modal quan s'intenta realitzar una acció que requereix autorització. Why You Should Use Nav3 Router Nav3 Router doesn't try to replace Navigation 3 or add new features. Its task is to make working with navigation convenient and predictable. You get a simple API that can be used from any layer of the application, automatic handling of timing issues, and the ability to easily test navigation logic. At the same time, under the hood, regular Navigation 3 still works with all its capabilities: state saving, animation support, and proper handling of the system "Back" button. Si ja esteu utilitzant Navegació 3 o planeja migrar-hi, Nav3 Router ajudarà a fer aquesta experiència més agradable sense afegir complexitat innecessària al projecte. Esquerra 
 
 
 :  GitHub repository github.com/arttttt/Nav3Router Exemples d'ús: veure la carpeta de mostres en el repositori

Read My Stories

Aquest àudio és produït a l'idioma original de la història!

Massa Llarg; Per llegir

Make resilience your competitive advantage

Nav3 Router: Navegació convenient a la part superior de Jetpack Navegació 3

About Author

COMENTARIS

Etiquetes penjant

AQUEST ARTICLE VA SER PRESENTAT A

Related Stories

Startups of The Year: Meet the Web3 Industry

Startups of The Year: Meet the Engineering Industry

Startups of The Year: Meet the Programming Industry

Startups of The Year: Meet the Healthcare Industry

Startups of The Year: Meet the Web3 Industry

Startups of The Year: Meet the Engineering Industry

Startups of The Year: Meet the Programming Industry

Startups of The Year: Meet the Healthcare Industry

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps