如何为Jetpack Compose的ModalBottomSheet编写@Preview预览函数

问题出在ModalBottomSheet默认处于收起状态，且你当前的实现无法在预览中控制其展开状态。以下是具体修复方案：

1. 状态提升：将sheetState改为可组合项参数 #

把sheetState从SomeModalBottomSheet内部创建改为外部传入，既符合Compose状态提升原则，也能让预览函数控制其展开状态：

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun SomeModalBottomSheet(
    uiState: MyUiState,
    onDismiss: () -> Unit,
    sheetState: ModalBottomSheetState, // 提升为外部参数
) {
    // 若无顶部栏等需求，可直接移除Scaffold，减少不必要层级
    ModalBottomSheet(
        onDismissRequest = onDismiss,
        sheetState = sheetState
    ) {
        // 移除fillMaxHeight，改用wrapContentHeight适配BottomSheet内容高度
        Column(modifier = Modifier.wrapContentHeight()) {
            // 你的内部自定义可组合项
            Text("预览内容：${uiState.someField}") // 示例文本，替换为你的实际内容
        }
    }
}

2. 预览函数中强制展开BottomSheet #

在预览里创建一个初始状态为Expanded的sheetState，确保预览界面直接展示BottomSheet内容：

@OptIn(ExperimentalMaterial3Api::class)
@Preview(showBackground = true)
@Composable
private fun MyModalBottomSheetPreview(
    @PreviewParameter(MyUiStatePreviewParameterProvider::class)
    myUiState: MyUiState
) {
    MyTheme {
        val sheetState = rememberModalBottomSheetState(
            initialValue = ModalBottomSheetValue.Expanded, // 强制初始展开
            skipPartiallyExpanded = false
        )
        SomeModalBottomSheet(
            uiState = myUiState,
            onDismiss = {},
            sheetState = sheetState
        )
    }
}

关键说明 #

• ModalBottomSheet默认初始状态是Hidden，预览时不会自动展开，必须显式指定initialValue = ModalBottomSheetValue.Expanded。
• 若你需要保留Scaffold，记得使用其返回的innerPadding给内容添加内边距，避免内容被系统栏遮挡。

内容的提问来源于stack exchange，提问作者AsNovaIL