Che cosa è Jetpack Navigation 3? Jetpack Navigation 3 is a new Google navigation library that is fundamentally different from previous versions. The main idea of Nav3 is simple: you have a   — 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  - una classe di Kotlin regolare. NavKey Questo ti dà il pieno controllo sulla navigazione, ma richiede la scrittura di un sacco di codice boilerplate per le operazioni tipiche. Perché lavorare direttamente con NavBackStack è scomodo Vediamo come appare il codice quando si lavora direttamente 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)
}
 I problemi iniziano quando è necessario attivare la navigazione da un ViewModel.  to the ViewModel (which, in my understanding, violates architectural principles, as I believe the ViewModel shouldn't know about Compose-specific things), or create intermediate callbacks for each navigation action. NavBackStack Inoltre, quando si lavora direttamente con lo stack, è facile dimenticare di gestire i casi di margine. How Nav3 Router Simplifies the Work Nav3 Router è un'involucro sottile su Navigation 3 che fornisce un'API familiare per la navigazione. Invece di pensare agli indici e alle operazioni di elenco, si dice semplicemente "passare allo schermo X" o "passare indietro". Important point: Nav3 Router doesn't create its own stack. It works with the same   that Navigation 3 provides, just making it more convenient to work with. When you call  , la libreria traduce questo nell'operazione corrispondente con la pila originale. NavBackStack router.push(Screen.Details) Main advantages: 
 
 
 
 
 
 Può essere utilizzato da ViewModel Navigation commands are buffered if UI is temporarily unavailable (for example, during screen rotation) All stack operations happen atomically Fuoco chiaro Flessibilità nella modifica e nell’aggiunta di comportamenti personalizzati Installazione 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")
}
 The library source code is available on GitHub:  github.com/arttttt/Nav3Router Come è strutturato il router Nav3 The library consists of three main parts, each solving its own task: Router - Interfaccia per sviluppatori Il router fornisce metodi come ,  ,  Quando si chiamano questi metodi, il router crea i comandi corrispondenti e li invia sulla catena. push() pop() replace() CommandQueue: il buffer tra i comandi e la loro esecuzione CommandQueue solves the timing problem. Imagine: the user pressed a button during screen rotation. The UI is being recreated, and the navigator is temporarily unavailable. CommandQueue will save the command and execute it as soon as the navigator is ready again. Without this, the command would simply be lost. // 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 - Colui che lavora con lo stack Il navigatore prende i comandi e li applica . Important detail: it first creates a copy of the current stack, applies all commands to it, and only then atomically replaces the original stack with the modified copy. This guarantees that the UI will never see intermediate stack states. 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
}
 Come iniziare con il router Nav3 The simplest way — don't even create Router manually. Nav3Host will do it for you: @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 applicazioni più complesse, ha senso creare un router attraverso DI e trasmetterlo al ViewModel: Definire gli schermi @Serializable
sealed interface Screen : NavKey {
    @Serializable
    data object Home : Screen
    
    @Serializable
    data class Product(val id: String) : Screen
    
    @Serializable
    data object Cart : Screen
}
 Passare il 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 receives Router through 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, basta usare ViewModel. @Composable
fun ProductScreen(viewModel: ProductViewModel = koinViewModel()) {
    Button(onClick = { viewModel.addToCart(productId) }) {
        Text("Add to Cart")
    }
}
 Examples of Typical Scenarios Navigazione avanti e indietro // 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)
 Lavorare con le catene dello schermo // 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"))
 Scenario di check-out @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")
    }
}
 Uscita della navigazione Nested // 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 e dialoghi Finora abbiamo parlato solo di una semplice navigazione tra gli schermi.Ma cosa succede se hai bisogno di mostrare un dialogo o un foglio di fondo?Questo è il concetto SceneStrategy di Navigation 3. Che cosa è SceneStrategy? SceneStrategy is a mechanism that determines exactly how screens from your stack will be displayed. By default, Navigation 3 uses  , 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. Creare una strategia per ModalBottomSheet Creiamo una strategia che mostri determinati schermi come fogli di fondo. Innanzitutto, definiamo come segneremo tali schermi: @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
}
 Ora, creiamo la strategia stessa. Esso controllerà i metadati dell'ultimo schermo e, se trova un marker speciale, lo mostrerà come foglio di 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
    }
}
 Combinare diverse strategie 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)
    }
}
 Utilizzo in applicazione Ora, mettiamo tutto insieme. ecco come appare l'utilizzo del foglio di fondo in un'applicazione reale: @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()
                        }
                    )
                }
            }
        )
    }
}
 Che cosa sta succedendo qui? quando chiami Ma grazie ai metadati e alla nostra strategia, l'interfaccia utente comprende che questo schermo deve essere mostrato come un foglio di fondo in cima allo schermo precedente, piuttosto che sostituirlo completamente. router.push(Screen.Filters) Quando si chiama Dal punto di vista del router, questa è una normale navigazione indietro, ma visivamente sembra chiudere una finestra modal. router.pop() Advantages of This Approach L'utilizzo di SceneStrategy offre diversi vantaggi importanti. In primo luogo, la logica di navigazione rimane semplice - si utilizza ancora  and  In secondo luogo, lo stato di navigazione rimane coerente – la scheda di fondo è solo un altro schermo nella pila che viene salvato correttamente durante la rotazione dello schermo o il processo di uccidere. push pop This approach is especially useful when the same screen can be shown differently depending on context. For example, a login screen can be a regular screen on first app launch and a modal dialog when attempting to perform an action that requires authorization. Perché utilizzare il router Nav3 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. Se stai già utilizzando Navigation 3 o pianificando di migrare a esso, Nav3 Router aiuterà a rendere questa esperienza più piacevole senza aggiungere complessità inutili al progetto. Links 
 
 
 Repositorio di GitHub: github.com/arttttt/Nav3Router : see   folder in the repository Usage examples sample

Read My Stories

Questo audio è prodotto nella lingua originale della storia!

Nav3 Router: Navigazione conveniente in cima a Jetpack Navigation 3

About Author

COMMENTI

CARTELLINI

QUESTO ARTICOLO È STATO PRESENTATO IN

Related Stories

Coding with Latenode's AI + JavaScript Assistant: A Low-Code Platform for Simplified Development

Meet the HackerNoon Top Writers: Nebojsa Nesha Todorovic - Upwork, Freelancing, and Future of Work

The Ultimate FAQ Guide to HackerNoon's Business Blogging

New Year, New Exciting Features: Mint Your Name, Watch Web 2.5 and Meet The Top Startups of The Year

Coding with Latenode's AI + JavaScript Assistant: A Low-Code Platform for Simplified Development

Meet the HackerNoon Top Writers: Nebojsa Nesha Todorovic - Upwork, Freelancing, and Future of Work

The Ultimate FAQ Guide to HackerNoon's Business Blogging

New Year, New Exciting Features: Mint Your Name, Watch Web 2.5 and Meet The Top Startups of The Year

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps