Jetpack compose 多屏幕中的底部表单

Question

What is the best way to implement bottom sheet for multiple screens in jetpack compose? Do we have to define Bottom sheet layout in each screen? Then what to do if we wanted our bottom sheet to overlap on bottom nav bar?

Answer 1

You can create a custom layout like

MyAppCustomLayout(
  showBottomBar: Boolean = false, 
  state: ModalBottomSheetState = ModalBottomSheetState(initialValue = 
  ModalBottomSheetValue.Hidden),
  sheetContent: @Composable () -> Unit = {},
  content: @Composable () -> Unit)
{
  ModalBottomSheetLayout(
    sheetState = state,
    sheetContent = { sheetContent() })
  {
    Scaffold(
      bottomBar = if(showBottomBar)
      {{
        YourBottomNavigationView()
      }}
      else {{}})
    { content() }
  }
}

And use it anywhere in your app like below.

val state = rememberModalBottomSheetState()

MyAppCustomLayout(
  state = state,
  sheetcontent = { 
    Column {
      Text("Some bottomSheet content")
    }
  })
{ 
  Column {
    Text("Some content")
  }
}

Answer 2

If you are using Jetpack Navigation Compose in your project, you might consider using Jetpack Navigation Compose Material to implement it.

For more detail, refer to the samples