如果您要实现底部动作条,可以使用 ModalBottomSheet
可组合项。
您可以使用 content
槽,该槽使用 ColumnScope
将动作条内容可组合项的布局设为列:
ModalBottomSheet(onDismissRequest = { /* Executed when the sheet is dismissed */ }) { // Sheet content }
您可以使用 SheetState
完成以编程方式展开和收起动作条的操作。您可以使用 rememberSheetState
创建一个 SheetState
实例,并通过 sheetState
参数将其传递给 ModalBottomSheet
。SheetState
可提供对 show
和 hide
函数的访问权限,以及对与当前动作条状态相关的属性的访问权限。这些挂起函数需要 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") } } } }