Kas yra „Jetpack Navigation 3“? "Jetpack Navigation 3" yra nauja "Google" navigacijos biblioteka, kuri iš esmės skiriasi nuo ankstesnės versijos. Reguliarus kintamasis sąrašas, kuriame kiekvienas elementas yra jūsų programos ekranas. NavBackStack Jūs įtraukiate ir pašalinate elementus iš šio sąrašo, o sąsaja automatiškai atnaujinama. Įprastinė Kotlin klasė. NavKey Tai suteikia jums visišką navigacijos kontrolę, tačiau norint atlikti įprastas operacijas reikia parašyti gana daug katilo plokštės kodo. Kodėl tiesiogiai dirbti su „NavBackStack“ yra nepatogu Pažiūrėkime, kaip atrodo kodas, kai dirbate tiesiogiai su : 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)
}
 Problemos prasideda, kai reikia išjungti navigaciją iš „ViewModel“. į „ViewModel“ (kuris, mano nuomone, pažeidžia architektūros principus, nes manau, kad „ViewModel“ neturėtų žinoti apie „Compose“ specifinius dalykus), arba sukurti tarpinius skambučius kiekvienam navigacijos veiksmui. NavBackStack Be to, dirbant su krūva tiesiogiai, lengva pamiršti tvarkyti krašto atvejus. Kaip Nav3 maršrutizatorius supaprastina darbą Nav3 maršrutizatorius yra plonas "Navigation 3" apvalkalas, kuris suteikia pažįstamą navigacijos API. Vietoj to, kad galėtumėte galvoti apie indeksus ir sąrašo operacijas, tiesiog pasakykite "eikite į ekraną X" arba "atgal". Svarbus dalykas: Nav3 maršrutizatorius nesukuria savo krūvos. kad navigacija 3 suteikia, tik padaryti jį patogiau dirbti su. , biblioteka tai išverčia į atitinkamą operaciją su originalia krūva. NavBackStack router.push(Screen.Details) Pagrindiniai privalumai : 
 
 
 
 
 
 Galima naudoti iš ViewModel Navigacijos komandos yra talpyklos, jei vartotojo sąsaja laikinai nepasiekiama (pavyzdžiui, ekrano sukimosi metu) Visos operacijos vyksta atominiu būdu. Aiškus ugnis Lankstumas keičiant ir pridedant pritaikytą elgesį Įrengimas Nav3 maršrutizatorius yra prieinamas „Maven Central“. : 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")
}
 Šaltinis yra prieinamas Github: github.com/arttttt/Nav3Router svetainė Kaip veikia Nav3 maršrutizatorius Biblioteka susideda iš trijų pagrindinių dalių, kurių kiekviena sprendžia savo užduotis: Router – kūrėjų sąsaja Router siūlo tokius metodus kaip , , Kai pašaukiate šiuos metodus, maršrutizatorius sukuria atitinkamus komandas ir siunčia juos žemyn grandinėje. push() pop() replace() CommandQueue – buferis tarp komandų ir jų vykdymo "CommandQueue" išsprendžia laiko problemą. Įsivaizduokite: vartotojas paspaudė mygtuką ekrano sukimosi metu. "UI" atkuriamas, o naršyklė laikinai nepasiekiama. "CommandQueue" išsaugos komandą ir ją vykdys, kai tik naršyklė vėl bus paruošta. // 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
        }
    }
}
 Navigatorius – tas, kuris dirba su krūva „Navigator“ imasi komandų ir taiko jas Svarbi detalė: ji pirmiausia sukuria dabartinės krūvos kopiją, jai taiko visas komandas, o tik tada atomiškai pakeičia originalią krūvą su modifikuota kopija. 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
}
 Kaip pradėti naudotis Nav3 maršrutizatoriumi Paprasčiausias būdas – net nesukurkite maršrutizatoriaus rankiniu būdu. Nav3Host tai padarys už jus: @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() }
                    )
                }
            }
        )
    }
}
 Sudėtingesnėms programoms prasminga sukurti maršrutizatorių per DI ir perduoti jį ViewModel: Apibrėžti ekranus @Serializable
sealed interface Screen : NavKey {
    @Serializable
    data object Home : Screen
    
    @Serializable
    data class Product(val id: String) : Screen
    
    @Serializable
    data object Cart : Screen
}
 Perkelkite maršrutizatorių į 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 gauna maršrutizatorių per konstruktorių. 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
        }
    }
}
 UI, tiesiog naudokite ViewModel. @Composable
fun ProductScreen(viewModel: ProductViewModel = koinViewModel()) {
    Button(onClick = { viewModel.addToCart(productId) }) {
        Text("Add to Cart")
    }
}
 Tipiškų scenarijų pavyzdžiai Paprasta navigacija į priekį ir atgal // 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)
 Darbas su ekranų grandinėmis // 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"))
 Patikrinkite scenarijų @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")
    }
}
 Išvažiavimas 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: SceneStrategy ir dialogai Iki šiol kalbėjome tik apie paprastą navigaciją tarp ekranų. bet kas, jei jums reikia parodyti dialogo ar apačios lapą? Kas yra scenos strategija? SceneStrategy yra mechanizmas, kuris tiksliai nustato, kaip bus rodomas jūsų rinkinio ekranas. , kuris tiesiog rodo paskutinį ekraną iš krūvos, tačiau galite sukurti savo strategijas sudėtingesniems scenarijams. SinglePaneSceneStrategy Pagalvokite apie SceneStrategy kaip režisierių, kuris žiūri į jūsų ekranų krūvą ir nusprendžia: "Gerai, šie trys ekranai rodomi normaliai, bet pastarasis - kaip modalinis langas virš ankstesnių". ModalBottomSheet strategijos kūrimas Sukurkime strategiją, kuri parodys tam tikrus ekranus kaip apatinius lapus.Pirmiausia apibrėžkime, kaip pažymėsime tokius ekranus: @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
}
 Jis patikrins paskutinio ekrano metaduomenis ir, jei suras specialų žymeklį, parodys jį kaip apatinį lapą: 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
    }
}
 Įvairių strategijų derinimas Realioje programoje jums gali prireikti apatinių lapų, dialogų ir reguliarių ekranų. 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)
    }
}
 Naudojimas taikant Štai kaip atrodo naudojant apatinį lapą realioje programoje: @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()
                        }
                    )
                }
            }
        )
    }
}
 Kas čia vyksta?Kai skambinate Bet dėka metaduomenų ir mūsų strategijos, "UI" supranta, kad šis ekranas turi būti rodomas kaip apatinis lapelis ankstesnio ekrano viršuje, o ne visiškai jį pakeisti. router.push(Screen.Filters) Kai skambina iš maršrutizatoriaus požiūriu tai yra įprasta atgalinė navigacija, tačiau vizualiai atrodo, kad uždaromas modalinis langas. router.pop() Šio požiūrio privalumai Naudojimasis SceneStrategy suteikia keletą svarbių privalumų. Pirma, jūsų navigacijos logika išlieka paprasta – jūs vis dar naudojate ir nesvarstydami, kaip tiksliai bus rodomas ekranas. antra, navigacijos būklė išlieka nuosekli - apatinis lapas yra tik dar vienas ekranas, kuris tinkamai išsaugomas ekrano sukimosi ar proceso žudymo metu. ir galiausiai, jis suteikia didelį lankstumą - galite lengvai pakeisti ekrano rodymą, tiesiog pakeisdami jo metaduomenis, neliesdami navigacijos logikos. push pop Šis metodas ypač naudingas, kai tas pats ekranas gali būti rodomas skirtingai priklausomai nuo konteksto.Pavyzdžiui, prisijungimo ekranas gali būti įprastas ekranas pirmą kartą paleidus programą ir modalinis dialogas, kai bandoma atlikti veiksmą, kuriam reikia autorizacijos. Kodėl turėtumėte naudoti Nav3 maršrutizatorių Nav3 maršrutizatorius nesistengia pakeisti navigacijos 3 ar pridėti naujų funkcijų. Jo užduotis yra padaryti darbą su navigacija patogu ir nuspėjama. Jūs gaunate paprastą API, kuris gali būti naudojamas iš bet kurio taikymo sluoksnio, automatinis tvarkymas laiko problemas, ir gebėjimas lengvai išbandyti navigacijos logika. Tuo pačiu metu, po dangteliu, reguliari navigacija 3 vis dar veikia su visomis savo galimybėmis: būsenos taupymas, animacijos palaikymas ir tinkamas sistemos mygtuko "Atgal" valdymas. Jei jau naudojate „Navigation 3“ arba planuojate į jį pereiti, „Nav3“ maršrutizatorius padės šią patirtį padaryti malonesnę be nereikalingo sudėtingumo projektui. Kairėje 
 
 
 GitHub saugykla: github.com/arttttt/Nav3Router Naudojimo pavyzdžiai: žr. pavyzdžio aplanką saugykloje

Read My Stories

Šis garso įrašas sukurtas originalia istorijos kalba!

Per ilgai; Skaityti

Make resilience your competitive advantage

Nav3 maršrutizatorius: patogi navigacija „Jetpack Navigation 3“ viršuje

About Author

KOMENTARAI

PABAIGTI ŽYMES

ŠIS STRAIPSNIS BUVO PRISTATYMAS

Related Stories

Light-Mode

Classic

Newspaper

Dark-Mode

Neon Noir

Minty

HN StartUps