ModalBottomSheet 显示在 Jetpack Compose 中的 BottomBar 上方

Question

我已经BottomBar添加进去了ComposeActivity。BottomBar负责显示 3 个可组合项。我不想添加ModalBottomSheet，Activity而是在第三个屏幕可组合项中添加ModalBottomSheet。当ModalBottomSheet被调用时，它会显示在 的上方BottomBar。当从第三个屏幕可组合完成号召性用语时如何ModalBottomSheet显示，它应该在上面BottomBar。任何帮助将不胜感激。

它应该显示BottomBar在底部上方。

Answer 1

只需将 ModalBottomSheetLayout 放置在 Scaffold 组件的顶部即可。

例子：

AppTheme() {

   ModalBottomSheetLayout(){ //<-- Here

      Scaffold(){

                             //<-- Not Here or below

         NavigationGraph(){
         }
      }
   }
}

并从 NavHost 调用 BottomSheet。

您也可以通过屏幕上的操作隐藏底部栏，但它的距离很长；

*它可能会根据您的组件子结构而有所不同

屏幕：

@Composable
fun 3rdScreen(onClickForHideBottomBar:() -> Unit){

    Button(onClick = { onClickForHideBottomBar()}) {

        Text(text = "Hide BottomBar")
    }
}

导航图：

@Composable
fun NavigationGraph(onClickForHideBottomBar:() -> Unit,){

    NavHost(){
         composable(){
             3rdScreen(onClickForHideBottomBar ={onClickForHideBottomBar()})
         }
    }
}

脚手架：

var bottomBarVisibility by remember { mutableStateOf(false)}

Scaffold(
    bottomBar = {BottomNavigationView(bottomBarVisibility=bottomBarVisibility)}){

    NavigationGraph(onClickForHideBottomBar = bottomBarVisibility = !bottomBarVisibility){}
}

底部导航视图：

@Composable
fun BottomNavigationView(bottomBarVisibility: Boolean){

    AnimatedVisibility(visibleState =MutableTransitionState(bottomBarVisibility)){

        BottomNavigation()
    }
}