Jetpack Compose 嵌套導航和 BottomAppBar

Question

我正在嘗試使用 Jetpack 組合導航，但我在理解嵌套導航和布局腳手架方面遇到了問題。

我有一個這樣的應用程序屏幕結構

root
├─ A
├─ B <- Had a bottom navigation bar
│  ├─ C
│  ├─ D

這是粗略的規格

• 根將位於 MainActivity 中並具有 NavHost 和腳手架。
• A 和 B 中的應用欄會有所不同。
• B中會有一個底部導航欄，可以用來在C和D之間導航

我一直在查看文檔和 StackOverflow，據我所知，最好將腳手架放在 NavHost 之外。

但是，對於我的情況，如果我無法訪問 A 和 B 中的腳手架，我該如何更新 A 和 B 中的應用程序欄？ 我只能想像下面的代碼那樣在腳手架中做一個分支

Scaffold(
    scaffoldState = scaffoldState,
    topBar = {
        when {
            currentDestination?.parent?.route == "Home" -> {
                TopAppBar(
                    title = {
                        Text("Home")
                    },
                )
            }
            currentDestination?.route == "Other screen" -> {
                 ....
            }

我還需要 A 中的訪問腳手架 state。

那么解決此類問題的最佳方法是什么？

Answer 1

我在使用NavHost和使用 multi Scaffold進行嵌套導航時遇到了這個問題。

這是我的第一個解決方案：

根目錄有自己的NavHost ，其中包含 2 個獨立的頁面（A 和 B），這些頁面有自己的功能。

如果我們認為頁面 A 是一種類似於啟動畫面的單頁，我們有一個基本的Scaffold組件。

如果我們認為頁面 B 是一種帶有底部導航的多頁面，例如 Instagram，那么在頂層我們應該為自己的頁面創建一個NavHost 。

這是我們的根源：

sealed class RouteScreen(val route: String) {
    object A : RouteScreen("a")
    object B : RouteScreen("b")
}

@Composable
internal fun RootNavigation(
    modifier: Modifier = Modifier,
    appState: MultiNavigationAppState
) {
    NavHost(
        navController = appState.navController,
        startDestination = RouteScreen.A.route,
        modifier = modifier
    ) {
        addA(appState)
        addB(appState)
    }
}

private fun NavGraphBuilder.addA(
    appState: MultiNavigationAppState
) {
    composable(route = RouteScreen.A.route) {
        AScreen()
    }
}

private fun NavGraphBuilder.addB(
    appState: MultiNavigationAppState
) {
    composable(route = RouteScreen.B.route) {
        BScreen(appState)
    }
}

AScreen是一個可組合項，您可以在其中使用Scaffold 。

BScreen與AScreen相同，但您可以為控制選項卡創建另一個NavHost 。

@Composable
fun BScreen(
    appState: MultiNavigationAppState
) {
    val mainState = rememberMainState()
    Scaffold(
        bottomBar = {...}
    ) {
        BNavigation(...)
    }
}

實際上，不建議使用一個帶有嵌套導航的NavHost ，因為如果頁面有選項卡及其功能（如 Instagram），我們就會遇到麻煩。

第二種解決方案是我們可以將多fragment與自己的NavHost, but it's not all based on Composable 組件。

正如你提到的，我遇到了這個問題，你可以通過這個 Github 項目獲得更多幫助