部分底部工作表

您可以部分显示一个底部手势板，然后让用户将其切换为全屏或将其关闭。

为此，请将您的 ModalBottomSheet 传递一个 SheetState 实例，并将 skipPartiallyExpanded 设置为 false。

示例

此示例演示了如何使用 ModalBottomSheet 的 sheetState 属性，最初仅部分显示手势板。

@Composable
fun PartialBottomSheet() {
    var showBottomSheet by remember { mutableStateOf(false) }
    val sheetState = rememberModalBottomSheetState(
        skipPartiallyExpanded = false,
    )

    Column(
        modifier = Modifier.fillMaxWidth(),
        horizontalAlignment = Alignment.CenterHorizontally,
    ) {
        Button(
            onClick = { showBottomSheet = true }
        ) {
            Text("Display partial bottom sheet")
        }

        if (showBottomSheet) {
            ModalBottomSheet(
                modifier = Modifier.fillMaxHeight(),
                sheetState = sheetState,
                onDismissRequest = { showBottomSheet = false }
            ) {
                Text(
                    "Swipe up to open sheet. Swipe down to dismiss.",
                    modifier = Modifier.padding(16.dp)
                )
            }
        }
    }
}BottomSheet.kt

代码要点

在此示例中，请注意以下几点

showBottomSheet 控制应用是否显示底部手势板。
sheetState 是 SheetState 的一个实例，其中 skipPartiallyExpanded 为 false。
ModalBottomSheet 接受一个修饰符，以确保它在完全展开时填充屏幕。
ModalBottomSheet 将 sheetState 作为其 sheetState 参数的值。
- 因此，手势板在首次打开时仅部分显示。然后，用户可以通过拖动或滑动将其切换为全屏或将其关闭。
onDismissRequest lambda 控制用户尝试关闭底部手势板时会发生什么。在本例中，它只会移除手势板。

结果

当用户第一次按下按钮时，手势板会部分显示

A bottom sheet that initially only fills part of the screen. The user can swipe to fill the screen with it, or dismiss it — **图 1.** 部分显示的底部手势板。

如果用户向上滑动手势板，它将填充屏幕

A bottom sheet that the user has expanded to fill the screen. — **图 2.** 全屏底部手势板。

其他资源

底部工作表