Jetpack Compose：底页未按预期显示

Question

I have a scaffold that has a BottomNavigationView and the content. On one of my screens, I have a filter button that navigates me to the FilterScreen . FilterScreen is a bottomSheet composable. When I navigate to FilterScreen the result is :

So as you can see when I click the filter button, the BottomNavigationView is hiding but the FilterScreen is not showing. Here is the code :

   val navController = rememberAnimatedNavController()
   val bottomSheetNavigator = rememberBottomSheetNavigator()
   val scaffoldState = rememberScaffoldState()

   navController.navigatorProvider += bottomSheetNavigator

   Scaffold(
            bottomBar = {
                if (isNavBarVisible) {
                    RubiBrandsBottomNavigationView(
                        onNavigateToTopLevelDestination = rubiBrandsTopLevelNavigation::navigateTo,
                        currentDestination = currentDestination,
                        topLevelDestinations = topLevelDestinations
                    )
                }
            },
            scaffoldState = scaffoldState
        ) {
            //navigation graph
            Box(
                modifier = Modifier
                    .padding(it)
            ) {
                NavGraph(
                    navController = navController,
                    bottomSheetNavigator = bottomSheetNavigator,
                    startDestination = startDestination,
                )
            }
        }


//Nav-Graph

@Composable
fun NavGraph(
    navController: NavHostController,
    bottomSheetNavigator: BottomSheetNavigator,
    modifier: Modifier = Modifier,
    startDestination: String
) {
    ModalBottomSheetLayout(
        sheetBackgroundColor = Color.White,
        bottomSheetNavigator = bottomSheetNavigator,
        sheetElevation = dimensionResource(id = R.dimen.dimen_4),
        sheetShape = RoundedCornerShape(dimensionResource(id = R.dimen.dimen_16))
    ) {
        AnimatedNavHost(
            navController = navController,
            startDestination = startDestination,
            route = ROOT_GRAPH
        ) {
            //auth graph
            authNavGraph(navController = navController, modifier = modifier)

            //main graph
            mainNavGraph(navController = navController)

        }
    }
}

//Filter Screen

fun NavGraphBuilder.addFilterScreen(
    navController: NavController
) {
    bottomSheet(
        route = Destination.FilterDestination.route
    ) {
        FilterScreen()
    }
}

I have tried to remove :

Scaffold(){padding->
   Box(
                modifier = Modifier
                    .padding(padding)
            ) {//content}
}

within my root Scaffold but in this case, the content of the screen is not fitting but the bottomSheet works as expected. Result is :

The bottomSheet come from accompanist material .

Accompanist Version:0.24.7-alpha

Compose Version: 1.2.0-rc02

Answer 1

I just move the ModalBottomSheetLayout out of the root Scaffold and wrap the Scaffold as its content and it worked. I'm not sure if this is correct or not but still works. Here is the code :

  ModalBottomSheetLayout(
            bottomSheetNavigator = bottomSheetNavigator,
            sheetElevation = dimensionResource(id = R.dimen.dimen_4),
            sheetShape = RoundedCornerShape(dimensionResource(id = R.dimen.dimen_16))
        ) {
            Scaffold(
                bottomBar = {
                    if (isNavBarVisible) {
                        RubiBrandsBottomNavigationView(
                            onNavigateToTopLevelDestination = rubiBrandsTopLevelNavigation::navigateTo,
                            currentDestination = currentDestination,
                            topLevelDestinations = topLevelDestinations
                        )
                    }
                },
                scaffoldState = scaffoldState
            ) {
                //navigation graph
                Box(
                    modifier = Modifier
                        .padding(it)
                ) {
                    NavGraph(
                        navController = navController,
                        startDestination = startDestination,
                    )
                }
            }
        }