如何使用jetpack compose导航到非底部栏屏幕？

Question

So i have an app in compose that has startDestination set as a screen with scaffold with bottom nav bar having 3 items and top app bar, i am able to navigate through the 3 bottom navigation tabs. But suppose i want to click on a card in one of the bottom tab screen which should open a details screen without the bottom bar and app bar (Since Navhost is inside the scaffold, bottom and top bars show up on details screen too) , what is the right way to do that? Currently i have tried the following ways:-

1. Starting the details screen in a new activity.

2. Using currentDestination route as state to conditionally hide bottom and app bar for details screen route.

Both work but, the problem with first approach is that, it isn't recommended to use multiple activity with jetpack navigation and rather we should stick to a single activity , it also further breaks the navigation if in case i want to move from details to another screen. The problem with second approach is that hiding and showing bottom/top bars create very bad transition between the screens and app doesn't feel smooth.

Hence, i am looking for an appropriate way to handle this as per the guidelines , although i couldn't find any info on this.

Update

I went with showing/hiding the bottom and app bar based on routes, turns out that bad and laggy animation i was facing was because i was running a debug app, with a release app with minifyEnabled true (R8) ,the transitions are very smooth and natural, as i wanted them.

Also it turns out, as per Google's official compose sample app JetSnack , this is the appropriate way of achieving navigation from a bottombar screen to a non-bottombar screen. Thanks to @vitidev for pointing it out in the comments.

Answer 1

I had a similar problem and here's how I solved it

NavHost(xxx) {
    composable("AppScreen") {
        HorizontalPager(userScrollEnabled = false) {
            xxx
        }
    }
    composable("other screen") {
        xxx
    }
}

Use the accompanist Pager to maintain a screen with a bottomBar. Setting userScrollEnabled in the pager and executing the interface jump through the pagerState is a good way to achieve navigation.

onClick = {
    scope.launch {
        pagerState.scrollToPage(index)
    }
},

Then you can perform navigation jumps directly on the pager.

navHost.navigate("other screen")

Answer 2

You can use a nested Navigation Graph:

• one principal graph according to your BottomBar
• one nested graph inside each screen you want to go further

https://developer.android.com/jetpack/compose/navigation#nested-nav