为什么 bottom sheet 不适用于 Jetpack Compose 中的底部导航？

Question

我这几天尝试学习jetpack compose，我在jetpack compose中有一个简单的项目，底部sheet在我的项目中工作，但是当我使用底部导航时，它不起作用，我在搜索很多网站，特别是Whosebug，但我没有找到任何解决方案，我不知道我错过了什么？有什么想法吗？

 @Composable
fun BSDataScreen() {
    val modalBottomSheetState = rememberModalBottomSheetState(initialValue = 
 ModalBottomSheetValue.Hidden)
    val scope = rememberCoroutineScope()

    ModalBottomSheetLayout(
        sheetContent = {

            SheetScreen()
        },
        sheetState = modalBottomSheetState,
        sheetShape = RoundedCornerShape(topStart = 15.dp, topEnd = 15.dp),
        sheetBackgroundColor = Color.White,
      
    ) {
        Scaffold(

            backgroundColor =  Color.White,
        ) {
            DataScreen(
                scope = scope, state = modalBottomSheetState)}}}

@Composable
fun DataScreen(
    scope: CoroutineScope,
    state: ModalBottomSheetState
  ) {


    val listOfData = listOf(
        Data( painterResource(R.drawable.image1)),
        Data(painterResource(R.drawable.image2)),
        Data(painterResource(R.drawable.image3),)

    Column(
        horizontalAlignment = Alignment.CenterHorizontally,
        modifier = Modifier
            .fillMaxSize()
            .background(Color.White)

    ) {

        LazyColumn(
            modifier = Modifier

        ) {

            items(listOfData.size) { index ->
                DataListItem(listOfData[index]) data: Data->

        scope.launch {
            state.show()
        }
 
     }}}}


@Composable
fun DataListItem(data: Data, onLongClick: (Data) -> Unit) {

    val context = LocalContext.current

    Column(
        modifier = Modifier.padding(5.dp)
    ) {

        Row(

            modifier = Modifier
                .fillMaxWidth()
                .padding(5.dp)
                .combinedClickable(
                    onLongClick= {
               onLongClick(data)
     },)

        ) {

            Image(
                painter = data.painter,
                contentDescription = null,)}}}

底部导航:

class MainActivity : ComponentActivity() {
    override fun onCreate(savedInstanceState: Bundle?) {
        super.onCreate(savedInstanceState)
        setContent {
            MainScreen()
        }
    }
}

@Composable
fun MainScreen() {
    val navController = rememberNavController()
    Scaffold(

        bottomBar = { BottomNavigationBar(navController) }
    ) {
        Navigation(navController = navController)
    }
}

 
 @Composable
 fun Navigation(navController: NavHostController) {
     val modalBottomSheetState = rememberModalBottomSheetState(initialValue = ModalBottomSheetValue.Hidden)
     val scope = rememberCoroutineScope()
    NavHost(navController, startDestination = NavigationItem.Data.route) {

        composable(NavigationItem.Data.route) {
          DataScreen(
              scope = scope, state = modalBottomSheetState
          )

        }
        composable(NavigationItem.Data2.route) {
            Data2Screen()
        }
        composable(NavigationItem.Data3.route) {
            Data3Screen()
        }
        composable(NavigationItem.Data4.route) {
            Data4Screen()
        }
        composable(NavigationItem.Data5.route) {
            Data5Screen()
        }
    }
 }

@Composable
fun BottomNavigationBar(navController: NavController

    ) {
    val items = listOf(
        NavigationItem.Data,
        NavigationItem.Data2,
        NavigationItem.Data3,
        NavigationItem.Data4,
        NavigationItem.Data5

    )
   
    BottomNavigation(
        backgroundColor = colorResource(id = R.color.white),
        contentColor = colorResource(id = R.color.black)

    ) {
        val navBackStackEntry by navController.currentBackStackEntryAsState()
        val currentRoute = navBackStackEntry?.destination?.route
        items.forEach { item ->
            BottomNavigationItem(
                icon = {
                    Icon(
                        painterResource(id = item.icon),
                        contentDescription = null
                    )
                },
                selectedContentColor = colorResource(id = R.color.red),
                unselectedContentColor = colorResource(id = R.color.blue),
                alwaysShowLabel = true,
                selected = currentRoute == item.route,
                onClick = {
                    navController.navigate(item.route) {

                        navController.graph.startDestinationRoute?.let { route ->
                            popUpTo(route) {
                                saveState = true
                            }
                        }

                        launchSingleTop = true

                        restoreState = true
                    }})}}}

Answer 1

用 ModalBottomSheetLayout 包裹整个屏幕。

您可以输入以下代码：

Scaffold(

        bottomBar = { BottomNavigationBar(navController) }
    ) {
        Navigation(navController = navController)
    }

里面

ModalBottomSheetLayout(...){
    Scaffold(

        bottomBar = { BottomNavigationBar(navController) }
    ) {
        Navigation(navController = navController)
    }
}

Answer 2

尝试使用 Accompanist 提供的导航 Material 库。 https://google.github.io/accompanist/navigation-material/

Answer 3

我认为您的问题是您的底页显示在底栏下方。同样的事情我解决的很简单

@Composable
fun SettingView() {
    val navController = rememberNavController()
    val scaffoldState = rememberScaffoldState()
    Scaffold(
        bottomBar = {
            BottomBar(navController = navController)
        },
        content = {
            Box(modifier = Modifier.padding(it)) {
                BottomNavGraph(
                    navController = navController,
                    scaffoldState = scaffoldState
                )
            }
        }
    )
}

内容屏幕用 Box 包裹并填充到脚手架的 PaddingValues。

为什么 bottom sheet 不适用于 Jetpack Compose 中的底部导航？

Why bottom sheet not work with bottom navigation in jetpack compose?

android

kotlin

android-jetpack-compose

android-bottomnav

android-bottomsheetdialog