我们可以在 Jetpack Compose 中向 Material3 ModalBottomSheet 添加底部填充吗？

Question

我想知道是否可以在导航栏和我的 ModalBottomSheet 之间添加一些间距，或者我是否必须使用其他可组合项？

这是我的代码。

我尝试在修改器中添加底部填充，但它没有添加任何空间，而顶部填充使底部工作表重叠在导航栏上。

    ModalBottomSheet(
        modifier = Modifier.padding(horizontal = MaterialTheme.spacing.small), // bottom padding doesn't work here
        shape = MaterialTheme.shapes.extraLarge,
        onDismissRequest = onDismiss,
        sheetState = modalBottomSheetState,
        dragHandle = { BottomSheetDefaults.DragHandle() },
    ) {
        
    }

这是结果

预先感谢您的任何帮助。

Answer 1

我找到了一种解决方法，使用BoxWithConstraint一些填充并使用containerColor = Color.Transparent. 我还设置了插图，windowInsets = WindowInsets(0, 0, 0, 0)以便将稀松布应用到整个屏幕：

ModalBottomSheet(
    modifier = Modifier.padding(horizontal = MaterialTheme.spacing.small),
    shape = MaterialTheme.shapes.extraLarge,
    onDismissRequest = onDismiss,
    sheetState = modalBottomSheetState,
    containerColor = Color.Transparent,
    dragHandle = null,
    windowInsets = WindowInsets(0, 0, 0, 0)
) {
    BoxWithConstraints(
        Modifier
            .navigationBarsPadding()
            .padding(bottom = 10.dp)
    ) {
        // Content here
    }
}