Co je Jetpack Navigation 3? Jetpack Navigation 3 je nová navigační knihovna Google, která se od předchozích verzí zásadně liší. - pravidelný proměnný seznam, kde každý prvek představuje obrazovku ve vaší aplikaci. NavBackStack Z tohoto seznamu přidáte a odstraňujete prvky a rozhraní uživatele se automaticky aktualizuje. Pravidelná třída Kotlin. NavKey To vám dává plnou kontrolu nad navigací, ale pro typické operace vyžaduje psaní poměrně hodně kódu kotle. Proč je práce přímo s NavBackStack nepohodlná Podívejme se, jak vypadá kód při práci přímo s : 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)
}
 Problémy začínají, když potřebujete spustit navigaci z ViewModel. na ViewModel (který podle mého názoru porušuje architektonické principy, protože si myslím, že ViewModel by neměl vědět o věcech specifických pro Compose), nebo vytvořit pro každou navigační akci průběžné zpětné vazby. NavBackStack Navíc, když pracujete s hromadou přímo, je snadné zapomenout na manipulaci s okrajovými případy. Jak Nav3 router zjednodušuje práci Nav3 Router je tenký obal nad Navigací 3, který poskytuje známý API pro navigaci. Namísto přemýšlení o indexech a operacích seznamu, jednoduše řeknete "jít na obrazovku X" nebo "jít zpět". Důležitý bod: Nav3 Router nevytváří vlastní hromadu. navigace 3 poskytuje, jen aby bylo pohodlnější pracovat s ním. , knihovna to překládá do odpovídající operace s původním zásobníkem. NavBackStack router.push(Screen.Details) Hlavní výhody : 
 
 
 
 
 
 Lze použít z ViewModel Navigační příkazy jsou vyrovnávány, pokud je uživatelské rozhraní dočasně nedostupné (například během otáčení obrazovky). Všechny stackové operace probíhají atomicky Čistý oheň Flexibilita při úpravách a přidávání vlastního chování Instalace Nav3 Router je k dispozici na Maven Central. Přidejte závislost na svém : 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")
}
 Zdrojový kód knihovny je k dispozici na Githubu: github.com/arttttt/Nav3Router Příslušenství Jak je Nav3 router strukturován Knihovna se skládá ze tří hlavních částí, z nichž každá řeší svůj vlastní úkol: Router – rozhraní pro vývojáře Router poskytuje metody, jako je , , , , Když zavoláte tyto metody, router vytváří odpovídající příkazy a odesílá je do řetězce. router sám neví nic o tom, jak bude navigace prováděna - to umožňuje používat ji odkudkoliv. push() pop() replace() CommandQueue – buffer mezi příkazy a jejich provedením CommandQueue řeší problém s časováním. Představte si: uživatel stiskl tlačítko během otáčení obrazovky. Uživatelské rozhraní je obnovováno a navigátor je dočasně nedostupný. CommandQueue uloží příkaz a spustí jej, jakmile je navigátor opět připraven. // 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
        }
    }
}
 Navigátor - ten, kdo pracuje se zásobníkem Navigátor přijímá příkazy a aplikuje je na Důležitý detail: nejprve vytvoří kopii aktuálního zásobníku, aplikuje na něj všechny příkazy a teprve pak atomicky nahrazuje původní zásobník modifikovanou kopií. 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
}
 Jak začít s routerem Nav3 Nejjednodušší způsob – ani ručně nevytvářejte router. Nav3Host to udělá za vás: @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() }
                    )
                }
            }
        )
    }
}
 Pro složitější aplikace má smysl vytvořit směrovač prostřednictvím DI a předat jej ViewModelu: Definujte obrazovky @Serializable
sealed interface Screen : NavKey {
    @Serializable
    data object Home : Screen
    
    @Serializable
    data class Product(val id: String) : Screen
    
    @Serializable
    data object Cart : Screen
}
 Přejděte na 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 přijímá router přes konstruktor. 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
        }
    }
}
 V UI stačí použít ViewModel. @Composable
fun ProductScreen(viewModel: ProductViewModel = koinViewModel()) {
    Button(onClick = { viewModel.addToCart(productId) }) {
        Text("Add to Cart")
    }
}
 Příklady typických scénářů Jednoduchá navigace dopředu // 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)
 Práce s řetězci obrazovky // 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 scénář @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")
    }
}
 Výstup 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: Scénická strategie a dialogy Dosud jsme hovořili pouze o jednoduché navigaci mezi obrazovkami. Ale co když potřebujete ukázat dialog nebo podokno? Co je SceneStrategy? SceneStrategy je mechanismus, který přesně určuje, jak budou zobrazeny obrazovky z vaší hromady. , který jednoduše ukazuje poslední obrazovku ze zásobníku. Ale můžete vytvořit své vlastní strategie pro složitější scénáře. SinglePaneSceneStrategy Představte si SceneStrategy jako režiséra, který se podívá na vaši hromadu obrazovek a rozhodne se: „Dobře, tyto tři obrazovky ukazujeme normálně, ale tento poslední – jako modální okno nad předchozími.“ To umožňuje reprezentovat různé vzory uživatelského rozhraní se stejnou hromadou. Vytvoření strategie pro ModalBottomSheet Vytvořme strategii, která zobrazí určité obrazovky jako spodní listy. Nejprve definujme, jak označíme takové obrazovky: @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
}
 Nyní vytvořme strategii samotnou. zkontroluje metadata poslední obrazovky a pokud najde speciální marker, zobrazí se jako spodní list: 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
    }
}
 Kombinace několika strategií V reálné aplikaci můžete potřebovat spodní listy, dialogy a pravidelné obrazovky.Pro tento účel můžete vytvořit strategii delegace, která vybere správnou strategii pro každou obrazovku: 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)
    }
}
 Použití v aplikaci Zde je to, co s použitím spodního listu vypadá v reálné aplikaci: @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()
                        }
                    )
                }
            }
        )
    }
}
 Co se tady děje? když zavoláte Ale díky metadata a naší strategii, rozhraní uživatelského rozhraní chápe, že tato obrazovka potřebuje být zobrazen jako spodní list na vrcholu předchozí obrazovky, spíše než nahradit ji úplně. router.push(Screen.Filters) Při volání Z pohledu směrovače se jedná o pravidelnou zpětnou navigaci, ale vizuálně to vypadá jako zavření modálního okna. router.pop() Výhody tohoto přístupu Použití SceneStrategy přináší několik důležitých výhod. Za prvé, vaše navigační logika zůstává jednoduchá – stále používáte a Bez přemýšlení o tom, jak přesně bude zobrazena obrazovka.Za druhé, navigační stav zůstává konzistentní – dolní list je jen další obrazovka ve stohu, která je správně uložena během otáčení obrazovky nebo procesu zabíjení.A konečně, poskytuje velkou flexibilitu – můžete snadno změnit způsob zobrazení obrazovky jednoduše změnou jeho metadata, aniž byste se dotýkali navigační logiky. push pop Tento přístup je zvláště užitečný, když se stejná obrazovka může zobrazovat jinak v závislosti na kontextu. Například obrazovka přihlášení může být pravidelnou obrazovkou při prvním spuštění aplikace a modálním dialogem při pokusu o provedení akce, která vyžaduje autorizaci. Proč používat Nav3 router Nav3 Router se nesnaží nahradit Navigation 3 nebo přidat nové funkce. Jeho úkolem je, aby práce s navigací pohodlné a předvídatelné. Získáte jednoduchý API, který lze použít z libovolné vrstvy aplikace, automatické řešení problémů s časováním a schopnost snadno otestovat navigační logiku. Současně, pod kapotou, pravidelná Navigace 3 stále funguje se všemi svými schopnostmi: úspora stavu, podpora animace a správné zacházení s tlačítkem systému "Zpět". Pokud již používáte navigaci 3 nebo plánujete na ni migrovat, Nav3 Router vám pomůže učinit tento zážitek příjemnějším, aniž byste projektu přidali zbytečnou složitost. Vlevo 
 
 
 GitHub úložiště: github.com/arttttt/Nav3Router Příklady použití: viz vzorová složka v úložišti

Read My Stories

Tento zvuk je produkován v původním jazyce příběhu!

Příliš dlouho; Číst

Make resilience your competitive advantage

Nav3 Router: Pohodlná navigace na vrcholu Jetpack Navigation 3

About Author

KOMENTÁŘE

ZAVĚŠIT ZNAČKY

TENTO ČLÁNEK BYL PŘEDSTAVEN V

Related Stories

Coinshift Launches csUSDL, Announces Strategic Partnerships

Coinshift Launches csUSDL, Announces Strategic Partnerships

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps