Jetpack Compose中Material3 ModalBottomSheet能否添加底部内边距？

你不需要更换组件，问题出在padding的添加位置：给ModalBottomSheet本身设置底部内边距不会生效，因为组件内部已经处理了与系统栏的交互，正确的做法是给Sheet内部的内容添加底部间距，或者利用系统窗口内边距来适配导航栏。

方案1：给Sheet内容添加底部padding #

直接在ModalBottomSheet的内容lambda中给根布局设置底部内边距，就能实现和导航栏的间距：

ModalBottomSheet(
    modifier = Modifier.padding(horizontal = MaterialTheme.spacing.small),
    shape = MaterialTheme.shapes.extraLarge,
    onDismissRequest = onDismiss,
    sheetState = modalBottomSheetState,
    dragHandle = { BottomSheetDefaults.DragHandle() },
) {
    // 给内容根布局添加底部padding
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .padding(bottom = MaterialTheme.spacing.large) // 这里设置需要的底部间距
    ) {
        // 你的Sheet内容
    }
}

方案2：适配系统导航栏的WindowInsets #

如果要适配不同设备的导航栏高度（避免固定padding在无导航栏设备上出现多余空白），可以用WindowInsets获取导航栏高度，再叠加额外间距：

val windowInsets = WindowInsets.navigationBars
val extraSpacing = MaterialTheme.spacing.small

ModalBottomSheet(
    modifier = Modifier.padding(horizontal = MaterialTheme.spacing.small),
    shape = MaterialTheme.shapes.extraLarge,
    onDismissRequest = onDismiss,
    sheetState = modalBottomSheetState,
    dragHandle = { BottomSheetDefaults.DragHandle() },
) {
    Column(
        modifier = Modifier
            .fillMaxWidth()
            .windowInsetsPadding(windowInsets.only(WindowInsetsSides.Bottom))
            .padding(bottom = extraSpacing) // 在导航栏间距基础上再加额外空白
    ) {
        // 你的Sheet内容
    }
}

为什么直接给ModalBottomSheet加底部padding无效？ #

ModalBottomSheet的内部布局会自动处理与系统导航栏的重叠（默认会避开导航栏），但它的modifier作用于整个Sheet容器，底部padding会被内部布局逻辑忽略，因此必须将padding应用到Sheet的内容区域。

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