Jetpack Compose中移除BottomSheet容器黑色背景的方法

• 配置BottomSheetScaffold并设置containerColor = Color.Transparent，同时指定sheetShape后，BottomSheet处于部分展开状态时会显示黑色背景；完全展开时正常，不指定sheetShape也无此问题。
• 未指定containerColor时背景为白色，无法满足透明需求。

现象截图 #

• 部分展开状态：
  
• 完全展开状态：
  

复现代码 #

val bottomSheetScaffoldState = rememberBottomSheetScaffoldState (
    bottomSheetState = rememberStandardBottomSheetState()
)
val scope = rememberCoroutineScope()
val bottomSheetState = bottomSheetScaffoldState.bottomSheetState

BottomSheetScaffold(
    scaffoldState = bottomSheetScaffoldState,
    containerColor = Color.Transparent,
    sheetShape = RoundedCornerShape(topStart = 20.dp, topEnd = 20.dp),
    sheetDragHandle = null,
    sheetSwipeEnabled = true,
    sheetContent = {
        Row(
            modifier = Modifier.fillMaxWidth(),
            verticalAlignment = Alignment.CenterVertically
        ) {
            Icon(
                modifier = Modifier
                    .size(50.dp)
                    .weight(1f)
                    .padding(bottom = 10.dp)
                    .noRippleClickable {
                        scope.launch {
                            when (bottomSheetState.currentValue.name) {
                                "PartiallyExpanded" -> bottomSheetState.expand()
                                "Expanded" -> bottomSheetState.partialExpand()
                            }
                        }
                    },
                imageVector = ImageVector.vectorResource(id = R.drawable.ic_btntoriigate),
                tint = redPastel,
                contentDescription = "Leaf"
            )

            Text(
                modifier = Modifier
                    .weight(4f)
                    .padding(
                        top = 10.dp,
                        start = 10.dp,
                        end = 10.dp,
                        bottom = 20.dp
                    ),
                text = "Hello BottomSheetScaffold!"
            )
        }

        Text(text = "Lorem Ipsum is simply dummy text of the printing and typesetting industry. Lorem Ipsum has been the industry's standard dummy text ever since the 1500s, when an unknown printer took a galley of type and scrambled it to make a type specimen book. It has survived not only five centuries, but also the leap into electronic typesetting, remaining essentially unchanged. It was popularised in the 1960s with the release of Letraset sheets containing Lorem Ipsum passages, and more recently with desktop publishing software like Aldus PageMaker including versions of Lorem Ipsum.", color = Color.DarkGray)
    }
) { content(it) }

黑色背景是因为BottomSheet部分展开时，折叠区域的默认背景为黑色，而containerColor = Color.Transparent让这个黑色区域直接暴露出来；指定sheetShape时会触发该问题（无形状时系统默认处理了背景逻辑）。

可以通过以下方式解决：

方法1：设置Sheet容器背景为透明 #

根据使用的Material版本，添加对应参数：

• Material3：设置sheetContainerColor = Color.Transparent
• Material：设置sheetBackgroundColor = Color.Transparent

修改后的代码片段：

BottomSheetScaffold(
    scaffoldState = bottomSheetScaffoldState,
    containerColor = Color.Transparent,
    sheetShape = RoundedCornerShape(topStart = 20.dp, topEnd = 20.dp),
    sheetContainerColor = Color.Transparent, // Material3 用这行
    // sheetBackgroundColor = Color.Transparent, // Material 用这行
    sheetDragHandle = null,
    sheetSwipeEnabled = true,
    // 其他参数...
) { ... }

方法2：给Sheet内容添加背景 #

直接给sheetContent的根布局添加背景修饰符，覆盖折叠区域的黑色：

sheetContent = {
    Column(
        modifier = Modifier
            .background(Color.White) // 设置你需要的背景色，也可以设为透明
            .fillMaxWidth()
    ) {
        // 原有Sheet内容...
        Row(...) { ... }
        Text(...)
    }
}

额外优化：移除遮罩层 #

如果不需要底部内容的深色遮罩，可同时设置scrimColor = Color.Transparent：

BottomSheetScaffold(
    // 其他参数
    scrimColor = Color.Transparent,
    // ...
)

内容的提问来源于stack exchange，提问作者Jéluchu