Jetpack Compose 底部导航、fab 按钮和保存屏幕 state

Question

i have been playing with jetpack compose, bottom navigation and fab button.

The expected behavior of the application is as follows (bottom nav a/b/c):

a) Screen 1 --> (+ fab) --> Screen 1.A

b) Screen 2 --> (+ fab) --> Screen 1.B

c) Screen 3

When i am in screen 1, and press + button, it will go to screen 1.A

Then, if i press bottom bar button b, it will show screen 2. At this state, if i press system back button, it will go back to Screen 1 instead of screen 1.A, which was the last screen.

Also, if i am in screen 1.A, and then in screen 2 press + to go to screen 2.B, if i press button A in the nav bar, it will show Screen 1 instead of screen 1.A, which was the last screen of that button sequence.

In any screen, if i press system back button, it will go to screen1 and then exit the app, for example i am in screen 1.B, press system back, and will go directly to Screen 1, instead of Screen 2.

Here is my code

Bottom nav bar:

BottomNavigation(
        backgroundColor = Primary
    ) {
       items.forEach{ screen ->
           BottomNavigationItem(
               icon = { Icon(imageVector = screen.icon, contentDescription = screen.route, tint = Color.White) },
               selected = currentDestination?.route == screen.route,
               onClick = {
                   navController.navigate(screen.route) {
                       popUpTo(navController.graph.findStartDestination().id) {
                           saveState = true
                       }

                       launchSingleTop = true
                       restoreState = true
                   }
               }

           )
       }
   }

Fab button:

fabNav = "screen_1.b" (or screen_1.a, there is a logic before)

FloatingActionButton(
                    onClick = {
                        navController.navigate(fabNav) {
                            popUpTo(navController.graph.findStartDestination().id) {
                                saveState = true
                            }
                            launchSingleTop = true
                            restoreState = true
                        }
                    },
                    backgroundColor = Color.Gray,
                    contentColor = Color.White
                ) {
                    Icon(Icons.Filled.Add, "")
                }

Navigation host:

fun NavigationHost(navController: NavHostController){
    
    NavHost(navController = navController, startDestination = Screen.Home.route) {
        composable(Screen.Screen1.route){
            Screen1()
        }
        composable(Screen.Screen2.route){
            Screen2()
        }

        composable(Screen.Screen3.route){
            Screen3()
        }

        composable(Screen.AddToScreen1.route){
            AddToScreen1()
        }
        composable(Screen.AddToScreen2.route){
            AddToScreen2()
        }

    }
}

Thanks!

Answer 1

Just remove the popUpto("") from your navigation compose, because it will remove the screens from the back stack.

Just use

navController.navigate(screen.route)

and

navController.navigate(fabNav)