Jetpack compose 多屏幕中的底部表单

Question

在 Jetpack Compose 中为多个屏幕实现底页的最佳方法是什么？ 我们是否必须在每个屏幕中定义 Bottom sheet 布局？ 那么如果我们希望我们的底部工作表重叠在底部导航栏上怎么办？

Answer 1

您可以创建自定义布局，例如

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() }
  }
}

并在您的应用程序中的任何位置使用它，如下所示。

val state = rememberModalBottomSheetState()

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

Answer 2

如果您在项目中使用Jetpack Navigation Compose ，您可以考虑使用Jetpack Navigation Compose Material来实现它。

有关更多详细信息，请参阅示例