[英]Jetpack Compose nested navigation and BottomAppBar
I'm trying to use jetpack compose navigation, but I had a problem in understanding nested navigation and layout the scaffold.我正在尝试使用 Jetpack 组合导航,但我在理解嵌套导航和布局脚手架方面遇到了问题。
I had an app screen structure like this我有一个这样的应用程序屏幕结构
root
├─ A
├─ B <- Had a bottom navigation bar
│ ├─ C
│ ├─ D
and this is the rough specs这是粗略的规格
I have been looking through the docs and StackOverflow, from what I get it is best to just put the scaffold outside of NavHost.我一直在查看文档和 StackOverflow,据我所知,最好将脚手架放在 NavHost 之外。
But, for my case how can I update the app bar in A and B it if I don't get an access to the scaffold inside A & B?但是,对于我的情况,如果我无法访问 A 和 B 中的脚手架,我该如何更新 A 和 B 中的应用程序栏? I can only think to make a branching in the scaffold like the code below
我只能想像下面的代码那样在脚手架中做一个分支
Scaffold(
scaffoldState = scaffoldState,
topBar = {
when {
currentDestination?.parent?.route == "Home" -> {
TopAppBar(
title = {
Text("Home")
},
)
}
currentDestination?.route == "Other screen" -> {
....
}
Also I need an access scaffold state in A.我还需要 A 中的访问脚手架 state。
So what is the best approach to solve this kind of problem?那么解决此类问题的最佳方法是什么?
I had this issue with NavHost
and nested navigation with multi Scaffold
.我在使用
NavHost
和使用 multi Scaffold
进行嵌套导航时遇到了这个问题。
Here is my first solution:这是我的第一个解决方案:
The root has its own NavHost
that contains 2 separate pages(A & B) and these pages have its own functionality.根目录有自己的
NavHost
,其中包含 2 个独立的页面(A 和 B),这些页面有自己的功能。
If we consider page A is kind of single page like Splash Screen, we have a basic Scaffold
component to it.如果我们认为页面 A 是一种类似于启动画面的单页,我们有一个基本的
Scaffold
组件。
And if we consider page B is kind of multi pages with bottom navigation like Instagram, at the top level we should create a NavHost
for that own page.如果我们认为页面 B 是一种带有底部导航的多页面,例如 Instagram,那么在顶层我们应该为自己的页面创建一个
NavHost
。
Here is our root:这是我们的根源:
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
is a composable that you can use Scaffold
in it. AScreen
是一个可组合项,您可以在其中使用Scaffold
。
BScreen
is same as AScreen
but you can create another NavHost
for control tabs. BScreen
与AScreen
相同,但您可以为控制选项卡创建另一个NavHost
。
@Composable
fun BScreen(
appState: MultiNavigationAppState
) {
val mainState = rememberMainState()
Scaffold(
bottomBar = {...}
) {
BNavigation(...)
}
}
Actually it's not recommended to use one NavHost
with nested navigation because if pages have tabs and its functions like Instagram, we get in trouble.实际上,不建议使用一个带有嵌套导航的
NavHost
,因为如果页面有选项卡及其功能(如 Instagram),我们就会遇到麻烦。
Second solution is that we can use multi fragment
with own NavHost, but it's not all based on
Composable` components.第二种解决方案是我们可以将多
fragment
与自己的NavHost, but it's not all based on
Composable 组件。
As you mentioned I face this issue and you can get more help with this Github project正如你提到的,我遇到了这个问题,你可以通过这个 Github 项目获得更多帮助
声明:本站的技术帖子网页,遵循CC BY-SA 4.0协议,如果您需要转载,请注明本站网址或者原文地址。任何问题请咨询:yoyou2525@163.com.