Android Jetpack Compose BottomSheet白色背景问题，需实现带关闭按钮的圆角弹窗

针对你的需求，直接通过自定义BottomSheet内容布局并调整容器配置即可实现，无需强制设置sheetElevation = 0.dp，具体方案如下：

核心思路 #

1. 关闭BottomSheet的默认白色背景，避免覆盖自定义圆角布局
2. 用Surface或Box实现带顶部圆角的内容容器
3. 在容器内部右上角放置关闭按钮，保证层级正确

代码实现 #

1. ModalBottomSheet 版本 #

@Composable
fun RoundedCloseableBottomSheetDemo() {
    var isSheetVisible by remember { mutableStateOf(false) }

    // 触发按钮
    Button(onClick = { isSheetVisible = true }) {
        Text("打开BottomSheet")
    }

    if (isSheetVisible) {
        ModalBottomSheet(
            onDismissRequest = { isSheetVisible = false },
            sheetState = rememberModalBottomSheetState(skipPartiallyExpanded = true),
            // 去掉默认白色背景，让自定义布局的圆角生效
            containerColor = Color.Transparent,
            // 保留阴影提升视觉层级，关闭按钮不受影响
            sheetElevation = 8.dp
        ) {
            CustomBottomSheetContent(onClose = { isSheetVisible = false })
        }
    }
}

@Composable
private fun CustomBottomSheetContent(onClose: () -> Unit) {
    Surface(
        // 设置顶部圆角
        shape = RoundedCornerShape(topStart = 16.dp, topEnd = 16.dp),
        color = Color.White, // 自定义背景色
        elevation = 0.dp // 这里不需要阴影，因为ModalBottomSheet已经设置了sheetElevation
    ) {
        Column(modifier = Modifier.fillMaxWidth()) {
            // 右上角关闭按钮
            Row(
                modifier = Modifier.fillMaxWidth().padding(top = 8.dp, end = 8.dp),
                horizontalArrangement = Arrangement.End
            ) {
                IconButton(onClick = onClose) {
                    Icon(
                        imageVector = Icons.Default.Close,
                        contentDescription = "关闭BottomSheet"
                    )
                }
            }

            // BottomSheet主体内容
            Column(modifier = Modifier.padding(16.dp)) {
                Text(text = "这是带圆角和关闭按钮的BottomSheet")
                // 更多内容可以在这里添加
            }
        }
    }
}

2. BottomSheetScaffold 版本 #

如果使用的是BottomSheetScaffold，调整方式类似：

@Composable
fun ScaffoldWithRoundedBottomSheet() {
    val sheetState = rememberBottomSheetState(BottomSheetValue.Collapsed)
    val scope = rememberCoroutineScope()

    BottomSheetScaffold(
        sheetContent = {
            CustomBottomSheetContent(onClose = {
                scope.launch { sheetState.collapse() }
            })
        },
        sheetPeekHeight = 0.dp,
        sheetContainerColor = Color.Transparent,
        sheetElevation = 8.dp,
        sheetState = sheetState
    ) { paddingValues ->
        // 主内容区域
        Column(
            modifier = Modifier.fillMaxSize().padding(paddingValues),
            verticalArrangement = Arrangement.Center,
            horizontalAlignment = Alignment.CenterHorizontally
        ) {
            Button(onClick = {
                scope.launch { sheetState.expand() }
            }) {
                Text("打开BottomSheet")
            }
        }
    }
}

关键说明 #

• 设置containerColor = Color.Transparent是核心：默认BottomSheet的白色背景会完全覆盖自定义布局，导致圆角无法显示，透明化后自定义的Surface圆角才会生效
• 关闭按钮放在Surface内部，天然处于内容上层，不会被sheetElevation的阴影遮挡，无需强制将sheetElevation设为0
• 可根据需求调整RoundedCornerShape的数值，自定义圆角大小

内容的提问来源于stack exchange，提问作者Kumar Bankesh