How do I add wrapping content to a scene?

[lizhongyue248]

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

1. HomeScene
2. UserScene
3. 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!

[Tlaster]

You can wrap your NavHost inside NavWrapper

[lizhongyue248]

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?

[Tlaster]

You can wrap the screen that you do want to wrap with NavWrapper, and leave other screens unwrapped.

[lizhongyue248]

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.

[Tlaster]

Or you can have a nested NavHost for your home and user

[Tlaster]

Convert into discussion since this is not a "issue"