如何在Jetpack Compose中为BottomSheetScaffold设置左右内边距？

直接给BottomSheetScaffold的modifier添加左右内边距会导致sheet背景色填充内边距外区域，出现多余颜色。正确的处理方式是将内边距、背景样式放在sheetContent内部的根布局中，具体修改如下：

修改后的代码 #

BoxWithConstraints() {
    val maxHeight = maxHeight
    val sheetHeight = maxHeight / 4.dp
    BottomSheetScaffold(
        modifier = modifier
            .statusBarsPadding()
            .navigationBarsPadding(),
        scaffoldState = scaffoldState,
        sheetContent = {
            // 内部根布局设置内边距、背景与圆角
            Column(
                modifier = modifier
                    .fillMaxWidth()
                    .height(sheetHeight)
                    .padding(horizontal = 16.dp) // 设置左右内边距
                    .background(
                        color = Color.White, // 自定义sheet背景色
                        shape = RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp)
                    )
            ) {
                // 这里放置你的sheet内容
            }
        },
        sheetPeekHeight = 51.dp,
        sheetBackgroundColor = Color.Transparent // 设为透明避免背景溢出
    ) {
        Box(modifier = modifier.fillMaxSize()) {
            Column(modifier = modifier.fillMaxSize()) {
                Box(modifier = modifier
                    .weight(1f)
                    .background(Color.Cyan)) {
                    // 主内容区域
                }
            }
        }
    }
}

关键修改说明 #

• 将sheetBackgroundColor设为Color.Transparent，彻底消除默认背景的溢出问题。
• 把左右内边距、背景色、圆角样式全部转移到sheetContent的内部根布局中，确保样式仅作用于实际内容区域，不会延伸到内边距之外。

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