android Jetpack编写嵌套导航和BottomAppBar

fquxozlt 于 2023-06-20 发布在 Android

关注(0)|答案(2)|浏览(153)

我尝试使用jetpack编写导航，但在理解嵌套导航和布局scaffold时遇到了问题。
我有一个这样的应用程序屏幕结构

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

这是粗略的规格

根将位于MainActivity中，并具有NavHost和scaffold。
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" -> {
                 ....
            }

我还需要一个进入脚手架的状态。
那么，解决这类问题的最佳方法是什么呢？

android

来源：https://stackoverflow.com/questions/71410351/jetpack-compose-nested-navigation-and-bottomappbar

2条答案

按热度按时间

oyt4ldly1#

我有这个问题与NavHost和嵌套导航与multiScaffold。

以下是我的第一个解决方案：

根目录有自己的NavHost，包含两个独立的页面（A & B），这些页面有自己的功能。
如果我们认为页面A是像Splash Screen一样的单个页面，我们有一个基本的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`组件。
正如您提到的，我遇到了这个问题，您可以获得有关this Github project的更多帮助

赞(0）回复(0）举报 2023-06-20

sqougxex2#

请在Medium上阅读这篇article文章，以了解使用底部导航栏和嵌套导航实现嵌套导航的正确方法。
我希望这对你有帮助。

赞(0）回复(0）举报 2023-06-20