如何为ModalBottomSheet创建预览功能

Question

我正在尝试在 Jetpack Compose 中为

@Preview

创建

ModalBottomSheet

函数，但我只看到白屏。这是我的

SomeModalBottomSheet

可组合项：

@OptIn(ExperimentalMaterial3Api::class)
@Composable
fun SomeModalBottomSheet(
    uiState: MyUiState,
    onDismiss: () -> Unit,
) {
    Scaffold() {
        ModalBottomSheet(
            onDismissRequest = onDismiss,
            sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = false)
        ) {
            Column(modifier = Modifier.fillMaxHeight()) {
                // other inner composable (custom items I built)
            }
        }
    }
}

这是我的

@Preview

功能：

@Preview(showBackground = true)
@Composable
private fun MyModalBottomSheetPreview(
    @PreviewParameter(MyUiStatePreviewParameterProvider::class)
    myUiState: MyUiState
) {
    MyTheme {
        SomeModalBottomSheet(
            uiState = myUiState,
            onDismiss = {},
        )
    }
}

我尝试在 Jetpack Compose 中为

ModalBottomSheet

可组合项创建预览功能。我的期望是预览将显示

ModalBottomSheet

的视觉表示，其中包含我构建（工作）的

PreviewParamteuProvider

中的一些内容。尽管设置了

sheetState

的初始值并尝试触发

BottomSheet

进行另一个可组合预览，但我仍然只看到了白色屏幕，这不是预期的结果。

Answer 1

默认情况下，

rememberModalBottomSheetState

将初始工作表状态设置为

Hidden

，因此预计您不会在预览中看到它。如果您想查看它，可以尝试使用

rememberStandardBottomSheetState

并将

initialValue

设置为

PartiallyExpanded

或

Expanded

。

或者，您可以直接创建一个

SheetState

。