وصفة واجهة المستخدم الشائعة

توضّح هذه الوصفة كيفية تنفيذ نمط شائع لواجهة مستخدم التنقّل باستخدام شريط تنقّل سفلي ومجموعات متعددة من سجلّات الرجوع، حيث يحتوي كلّ علامة تبويب في شريط التنقّل على سجلّ تنقّل خاص بها.

طريقة العمل

يحتوي هذا المثال على ثلاث وجهات ذات مستوى أعلى: 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()
    }
}