How do I add wrapping content to a scene?
lizhongyue248 opened this issue · comments
Now, I have Scaffold
wrapping content like this:
@Composable
fun NavWrapper(content: @Composable (PaddingValues) -> Unit = {}) {
Scaffold(
modifier = Modifier,
topBar = {
// ......
},
bottomBar = {
// ......
},
) {
content(it)
}
}
Now I have the following scenes
- HomeScene
- UserScene
- DetailScene
For the first two, NavWrapper
needs to be used for wrapping, and the expected effect is that only the middle content will have a switching animation, while the top and bottom do not require animation. For the third one, there is no need for the top and bottom content.
I tried using the following method
NavHost(
navigator = GlobalStore.navigator,
initialRoute = Route.Home,
navTransition = NavFadeTransition()
) {
NavWrapper {
scene(
route = Route.Home,
) {
HomeScene(it)
}
scene(
route = Route.User,
) {
UserScene(it)
}
}
scene(
route = Route.User,
) {
DetailScene()
}
}
But it doesn't work. Is there any support for this? How do I add wrapping content to a scene?
Thanks!
You can wrap your NavHost
inside NavWrapper
For DetailScene
, I don't want him to be wrapped in NavWrapper
, which means he doesn't have a topbar
or bottombar
. If, according to what you said, two NavHosts
are needed, my attempt to use the following method has failed:
NavWrapper { paddingValues ->
NavHost(
navigator = GlobalStore.navigator,
initialRoute = Route.PERIOD,
navTransition = NavFadeTransition()
) {
scene(
route = Route.PERIOD,
) {
HomeScene(paddingValues)
}
scene(
route = Route.USER,
) {
UserScene(paddingValues)
}
}
}
NavHost(
navigator = GlobalStore.navigator,
initialRoute = Route.DETAIL,
navTransition = NavFadeTransition()
) {
DetailScene()
}
I cannot jump from Route.PERIOD
to Route.DETAIL
.
Is there another solution? Or does it behave like a child page?
You can wrap the screen that you do want to wrap with NavWrapper
, and leave other screens unwrapped.
You can wrap the screen that you do want to wrap with
NavWrapper
, and leave other screens unwrapped.
Like this?
NavHost(
navigator = GlobalStore.navigator,
initialRoute = Route.PERIOD,
navTransition = NavFadeTransition()
) {
scene(
route = Route.HOME,
) {
NavWrapper {
HomeContent(it)
}
}
scene(
route = Route.USER,
) {
NavWrapper {
UsertContent(it)
}
}
scene(
route = Route.DETAIL,
) {
DetailScene()
}
}
My route switching has animation effects. When I do this, both the topbar
and bottombar
will have animation effects. I hope that when switching routes, only the content will have animation effects, not all.
Or you can have a nested NavHost
for your home and user
Convert into discussion since this is not a "issue"