Vad är 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  En vanlig lista där varje element representerar en skärm i din applikation. NavBackStack Du lägger till och tar bort element från den här listan, och användargränssnittet uppdateras automatiskt. En vanlig Kotlin klass. NavKey Detta ger dig full kontroll över navigering, men kräver att du skriver en hel del kod för vanliga operationer. Varför att arbeta direkt med NavBackStack är obekvämt Låt oss titta på hur koden ser ut när du arbetar direkt med : 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)
}
 Problem uppstår när du behöver utlösa navigering från en ViewModel. till ViewModel (som enligt min uppfattning bryter mot arkitektoniska principer, eftersom jag tror att ViewModel inte borde veta om Compose-specifika saker), eller skapa mellanliggande samtal för varje navigationsåtgärd. NavBackStack Dessutom, när du arbetar med stacken direkt, är det lätt att glömma att hantera kantfall. Hur Nav3 Router förenklar arbetet Nav3 Router är en tunn omslag över Navigation 3 som ger en bekant API för navigering. Istället för att tänka på index och listoperationer, säger du helt enkelt "gå till skärmen X" eller "gå tillbaka". Viktig punkt: Nav3 Router skapar inte sin egen stack. Det fungerar med samma som Navigation 3 tillhandahåller, bara för att göra det bekvämare att arbeta med. , översätter biblioteket detta till motsvarande operation med den ursprungliga stacken. NavBackStack router.push(Screen.Details) De viktigaste fördelarna: 
 
 
 
 
 
 Kan användas från ViewModel Navigation commands are buffered if UI is temporarily unavailable (for example, during screen rotation) Alla stackoperationer sker atomiskt Tydlig eld Flexibilitet i modifiering och tillägg av anpassat beteende Installationen 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")
}
 Källkoden för biblioteket finns på Github: github.com/arttttt/Nav3Router Övrigt Hur Nav3 Router är strukturerad The library consists of three main parts, each solving its own task: Router - Utvecklargränssnitt Routern tillhandahåller metoder som och och . 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 – buffert mellan kommandon och deras utförande CommandQueue löser timingproblemet. Föreställ dig: användaren tryckte på en knapp under skärmens rotation. UI återskapas och navigatorn är tillfälligt otillgänglig. CommandQueue sparar kommandot och utför det så snart navigatorn är redo igen. // 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 - Den som arbetar med stacken Navigator tar kommandon och tillämpar dem på Viktig detalj: den skapar först en kopia av den aktuella stacken, tillämpar alla kommandon på den och ersätter sedan atomiskt den ursprungliga stacken med den modifierade kopian. 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
}
 Kom igång med Nav3 Router Det enklaste sättet är att inte ens skapa en router manuellt. Nav3Host gör det åt dig: @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() }
                    )
                }
            }
        )
    }
}
 För mer komplexa applikationer är det vettigt att skapa en router genom DI och skicka den till ViewModel: Definiera skärmar @Serializable
sealed interface Screen : NavKey {
    @Serializable
    data object Home : Screen
    
    @Serializable
    data class Product(val id: String) : Screen
    
    @Serializable
    data object Cart : Screen
}
 Skicka routern till 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 tar emot Router via 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
        }
    }
}
 I UI, använd bara ViewModel. @Composable
fun ProductScreen(viewModel: ProductViewModel = koinViewModel()) {
    Button(onClick = { viewModel.addToCart(productId) }) {
        Text("Add to Cart")
    }
}
 Exempel på typiska scenarier Enkel fram-tillbaka navigering // 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)
 Arbeta med skärmkedjor // 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"))
 Checkout scenario @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")
    }
}
 Utgång Nested Navigation // 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: Scenostrategi och dialoger So far, we've only talked about simple navigation between screens. But what if you need to show a dialog or bottom sheet? This is where the SceneStrategy concept from Navigation 3 comes to help. Vad är SceneStrategy? SceneStrategy is a mechanism that determines exactly how screens from your stack will be displayed. By default, Navigation 3 uses  , som helt enkelt visar den sista skärmen från stacken. men du kan skapa dina egna strategier för mer komplexa scenarier. SinglePaneSceneStrategy Tänk på SceneStrategy som en regissör som tittar på din stack av skärmar och bestämmer: "Okej, dessa tre skärmar visar vi normalt, men den här sistnämnda - som ett modalfönster ovanför de föregående". Skapa en strategi för ModalBottomSheet Låt oss skapa en strategi som visar vissa skärmar som bottenblad. Först, låt oss definiera hur vi kommer att markera sådana skärmar: @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
}
 Nu, låt oss skapa strategin själv. Det kommer att kontrollera metadata från den sista skärmen och, om det hittar en speciell markör, visa den som ett bottenark: 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
    }
}
 Kombinera flera strategier 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)
    }
}
 Using in Application Nu, låt oss sätta allt ihop. Här är vad med hjälp av bottenblad ser ut i en riktig applikation: @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()
                        }
                    )
                }
            }
        )
    }
}
 Vad händer här? när du ringer Men tack vare metadata och vår strategi förstår användargränssnittet att den här skärmen behöver visas som ett bottenblad ovanpå den föregående skärmen, snarare än att ersätta den helt. router.push(Screen.Filters) När man ringer Från routerns synvinkel är detta regelbunden bakåtnavigering, men visuellt ser det ut som att stänga ett modalfönster. router.pop() Fördelarna med denna metod Att använda SceneStrategy ger flera viktiga fördelar. För det första är din navigeringslogik enkel – du använder fortfarande och utan att tänka på hur exakt skärmen kommer att visas. För det andra förblir navigeringsstatus konsekvent - bottenbladet är bara en annan skärm i stacken som lagras korrekt under skärmrotation eller process dödar. 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. Varför du bör använda Nav3 Router Nav3 Router försöker inte ersätta Navigation 3 eller lägga till nya funktioner. Dess uppgift är att göra arbetet med navigering bekvämt och förutsägbart. Du får en enkel API som kan användas från vilket lager av programmet, automatisk hantering av tidsproblem och förmågan att enkelt testa navigeringslogik. Samtidigt, under locket, fungerar den vanliga Navigation 3 fortfarande med alla sina funktioner: statussparing, animationsstöd och korrekt hantering av systemet "Back" -knappen. If you're already using Navigation 3 or planning to migrate to it, Nav3 Router will help make this experience more pleasant without adding unnecessary complexity to the project. Vänster 
 
 
 GitHub-lagringsplats: github.com/arttttt/Nav3Router : see   folder in the repository Usage examples sample

Read My Stories

Det här ljudet är producerat på berättelsens originalspråk!

För länge; Att läsa

Make resilience your competitive advantage

Nav3 Router: Bekväm navigering på toppen av Jetpack Navigation 3

About Author

KOMMENTARER

HÄNG TAGGAR

DENNA ARTIKEL PRESENTERAS I

Related Stories

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps