دستورالعمل آماده واسط کاربر رایج
این دستورالعمل نحوه پیادهسازی یک الگوی رایج میانای کاربر پیمایش را با نوار پیمایش پایین و چندین پشته قبلیها نشان میدهد، که در آن هر برگه در نوار پیمایش سابقه پیمایش خاص خود را دارد.
روش کار
این مثال سه مقصد سطح بالا دارد: Home، ChatList، و Camera. مقصد ChatList زیرمسیر ChatDetail را نیز دارد.
TopLevelBackStack
هسته این دستورالعمل کلاس TopLevelBackStack است که مسئول مدیریت وضعیت پیمایش است. به این صورت کار میکند:
- این برنامه برای هر مقصد سطح بالا (زبانه) پشته پشتی جداگانهای را حفظ میکند.
- این متغیر مقصد سطح بالای انتخابشده فعلی را پیگیری میکند.
- پشته برگشت واحد و مسطحی ارائه میدهد که میتواند توسط عنصر ترکیبی
NavDisplayاستفاده شود. این پشته تماس فشرده ترکیبی از پشتههای تماس جداگانه همه زبانهها است.
ساختار میانای کاربر
میانای کاربری بااستفاده از عنصر ترکیبی Scaffold ساخته شده است و NavigationBar بهعنوان bottomBar عمل میکند.
NavigationBarبرای هر مقصد سطح بالا یک مورد نمایش میدهد. وقتی روی موردی کلیک میشود،topLevelBackStack.addTopLevelرا فرا میخواند تا به برگه مربوطه برود و سابقه پیمایش هر برگه را حفظ کند.- عنصر ترکیبی
NavDisplayدر ناحیه محتوایScaffoldقرار میگیرد. این مؤلفه مسئول نمایش صفحه فعلی براساس پشته قبلیهای مسطحشده ارائهشده توسطTopLevelBackStackاست.
این رویکرد امکان ایجاد الگوی پیمایش مشترکی را فراهم میکند که در آن کاربران میتوانند بین بخشهای مختلف برنامه جابهجا شوند و هر بخش سابقه پیمایش خود را حفظ میکند.
حفظ وضعیت
توجه به نحوه مدیریت وضعیت پیمایش در این دستورالعمل مهم است. وقتی کاربر از مقصد سطح بالا خارج میشود (مثلاً با فشار دادن دکمه برگشت تا زمانی که به برگه قبلی برگردد)، کل سابقه پیمایش برای آن مقصد پاک میشود. وضعیت ذخیره نشد. وقتی کاربر بعداً به آن برگه برمیگردد، از صفحه اولیه آن شروع خواهد کرد.
توجه: در این مثال، مسیر Home میتواند بالاتر از مسیرهای ChatList و Camera قرار گیرد، یعنی پیمایش برگشت از Home لزوماً باعث خروج از برنامه نمیشود. وقتی کاربر از یک مسیر سطح بالای باقیمانده در پشته قبلیها برگردد، برنامه بسته میشود.
/* * Copyright 2025 The Android Open Source Project * * Licensed under the Apache License, Version 2.0 (the "License"); * you may not use this file except in compliance with the License. * You may obtain a copy of the License at * * http://www.apache.org/licenses/LICENSE-2.0 * * Unless required by applicable law or agreed to in writing, software * distributed under the License is distributed on an "AS IS" BASIS, * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied. * See the License for the specific language governing permissions and * limitations under the License. */ package com.example.nav3recipes.commonui import android.os.Bundle import androidx.activity.ComponentActivity import androidx.activity.compose.setContent import androidx.compose.material.icons.Icons import androidx.compose.material.icons.filled.Face import androidx.compose.material.icons.filled.Home import androidx.compose.material.icons.filled.PlayArrow import androidx.compose.material3.Button import androidx.compose.material3.Icon import androidx.compose.material3.NavigationBar import androidx.compose.material3.NavigationBarItem import androidx.compose.material3.Scaffold import androidx.compose.material3.Text import androidx.compose.runtime.getValue import androidx.compose.runtime.mutableStateListOf import androidx.compose.runtime.mutableStateOf import androidx.compose.runtime.remember import androidx.compose.runtime.setValue import androidx.compose.runtime.snapshots.SnapshotStateList import androidx.compose.ui.graphics.vector.ImageVector import androidx.lifecycle.compose.dropUnlessResumed import androidx.navigation3.runtime.entryProvider import androidx.navigation3.ui.NavDisplay import com.example.nav3recipes.content.ContentBlue import com.example.nav3recipes.content.ContentGreen import com.example.nav3recipes.content.ContentPurple import com.example.nav3recipes.content.ContentRed import com.example.nav3recipes.ui.setEdgeToEdgeConfig private sealed interface TopLevelRoute { val icon: ImageVector } private data object Home : TopLevelRoute { override val icon = Icons.Default.Home } private data object ChatList : TopLevelRoute { override val icon = Icons.Default.Face } private data object ChatDetail private data object Camera : TopLevelRoute { override val icon = Icons.Default.PlayArrow } private val TOP_LEVEL_ROUTES : List<TopLevelRoute> = listOf(Home, ChatList, Camera) class CommonUiActivity : ComponentActivity() { override fun onCreate(savedInstanceState: Bundle?) { setEdgeToEdgeConfig() super.onCreate(savedInstanceState) setContent { val topLevelBackStack = remember { TopLevelBackStack<Any>(Home) } Scaffold( bottomBar = { NavigationBar { TOP_LEVEL_ROUTES.forEach { topLevelRoute -> val isSelected = topLevelRoute == topLevelBackStack.topLevelKey NavigationBarItem( selected = isSelected, onClick = { topLevelBackStack.addTopLevel(topLevelRoute) }, icon = { Icon( imageVector = topLevelRoute.icon, contentDescription = null ) } ) } } } ) { _ -> NavDisplay( backStack = topLevelBackStack.backStack, onBack = { topLevelBackStack.removeLast() }, entryProvider = entryProvider { entry<Home>{ ContentRed("Home screen") } entry<ChatList>{ ContentGreen("Chat list screen"){ Button(onClick = dropUnlessResumed { topLevelBackStack.add(ChatDetail) }) { Text("Go to conversation") } } } entry<ChatDetail>{ ContentBlue("Chat detail screen") } entry<Camera>{ ContentPurple("Camera screen") } }, ) } } } } class TopLevelBackStack<T: Any>(startKey: T) { // Maintain a stack for each top level route private var topLevelStacks : LinkedHashMap<T, SnapshotStateList<T>> = linkedMapOf( startKey to mutableStateListOf(startKey) ) // Expose the current top level route for consumers var topLevelKey by mutableStateOf(startKey) private set // Expose the back stack so it can be rendered by the NavDisplay val backStack = mutableStateListOf(startKey) private fun updateBackStack() = backStack.apply { clear() addAll(topLevelStacks.flatMap { it.value }) } fun addTopLevel(key: T){ // If the top level doesn't exist, add it if (topLevelStacks[key] == null){ topLevelStacks.put(key, mutableStateListOf(key)) } else { // Otherwise just move it to the end of the stacks topLevelStacks.apply { remove(key)?.let { put(key, it) } } } topLevelKey = key updateBackStack() } fun add(key: T){ topLevelStacks[topLevelKey]?.add(key) updateBackStack() } fun removeLast(){ val removedKey = topLevelStacks[topLevelKey]?.removeLastOrNull() // If the removed key was a top level key, remove the associated top level stack topLevelStacks.remove(removedKey) topLevelKey = topLevelStacks.keys.last() updateBackStack() } }