Jetpack Compose中如何实现Box组件背景透明？

你的问题出在预览配置上：你设置的@Preview(showBackground = true)会强制给预览画布添加白色背景，这才导致你看到Box背景是白色，而非Box本身的Color.Transparent未生效。

快速修复预览效果 #

把预览注解里的showBackground改成false，就能看到Box的透明背景：

@Preview(showBackground = false)
@Composable
fun PreviewOnContentLoading() {
    OnContentLoading()
}

实际项目中的验证 #

如果在真实页面使用该组件时仍有白色背景，需要检查：

• 组件的父布局是否设置了不透明背景（比如父级Scaffold或其他容器的背景色）
• 若作为加载遮罩使用，确保外层没有其他带背景的布局覆盖

完整代码示例 #

@Composable
fun OnContentLoading() {
    Box(
        modifier = Modifier
            .fillMaxSize()
            .background(Color.Transparent)
    ) {
        CircularProgressIndicator(
            modifier = Modifier.align(Alignment.Center),
            color = Aqua
        )
    }
}

@Preview(showBackground = false)
@Composable
fun PreviewOnContentLoading() {
    OnContentLoading()
}

内容的提问来源于stack exchange，提问作者Compose Learner