底部动作条

Material Design 3 模态底部动作条的示例。

如果您要实现底部动作条,可以使用 ModalBottomSheet 可组合项。

您可以使用 content 槽,该槽使用 ColumnScope 将工作表内容可组合项的布局设为列:

ModalBottomSheet(onDismissRequest = { /* Executed when the sheet is dismissed */ }) {  // Sheet content }

以编程方式控制工作表的显示状态

如需以编程方式展开和收起工作表,请使用 SheetState。您可以使用 rememberModalBottomSheetState 创建一个 SheetState 实例,并通过 sheetState 参数将其传递给 ModalBottomSheetSheetState 可提供对 showhide 函数的访问权限,以及对与当前工作表状态相关的属性的访问权限。这些挂起函数需要 CoroutineScope(例如,使用 rememberCoroutineScope),并且您可以调用它们以响应界面事件。确保在隐藏底部工作表时从组合中移除 ModalBottomSheet

val sheetState = rememberModalBottomSheetState() val scope = rememberCoroutineScope() var showBottomSheet by remember { mutableStateOf(false) } Scaffold(  floatingActionButton = {  ExtendedFloatingActionButton(  text = { Text("Show bottom sheet") },  icon = { Icon(Icons.Filled.Add, contentDescription = "") },  onClick = {  showBottomSheet = true  }  )  } ) { contentPadding ->  // Screen content  if (showBottomSheet) {  ModalBottomSheet(  onDismissRequest = {  showBottomSheet = false  },  sheetState = sheetState  ) {  // Sheet content  Button(onClick = {  scope.launch { sheetState.hide() }.invokeOnCompletion {  if (!sheetState.isVisible) {  showBottomSheet = false  }  }  }) {  Text("Hide bottom sheet")  }  }  } }

Jetpack Compose 中显示内容的模态底部工作表。