底部工作表

An example of a Material Design 3 modal bottom sheet.

如果要实现底部工作表，您可以使用ModalBottomSheet 可组合项。

您可以使用 content 插槽，它使用 ColumnScope 来以列的形式布局工作表内容可组合项

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

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

要以编程方式展开和折叠工作表，请使用 SheetState。您可以使用 rememberSheetState 来创建 SheetState 的实例，该实例应通过 sheetState 参数传递给 ModalBottomSheet。SheetState 提供对 show 和 hide 函数的访问权限，以及与当前工作表状态相关的属性。这些挂起函数需要一个 CoroutineScope — 例如，使用 rememberCoroutineScope — 并且您可以在响应 UI 事件时调用它们。确保在隐藏底部工作表后从组合中移除 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")
            }
        }
    }
}
MaterialLayoutSnippets.kt

A modal bottom sheet in Jetpack Compose showing content.