设置background后Jetpack Compose中Box背景仍透明的原因

我正在编写一个分组Section组件，该组件为内容添加细边框并显示标题，预期效果是黄色标题区域不透明，能覆盖边框线条；但实际显示中标题区域是透明的，边框线条透了出来。

我的代码如下：

@Composable
fun Section(title: String, content: @Composable ()->Unit) {
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .padding(2.dp)
            .border(1.dp, Color.Gray)
            .wrapContentHeight()
            .padding(10.dp)
    ) {
        Box(
            modifier = Modifier
                .wrapContentWidth()
                .offset(10.dp, (-18).dp)
                .background(Color.Yellow)
        ) {
            Text( text = title, fontSize = 12.sp, modifier = Modifier.padding(10.dp, 0.dp))
        }
        content()
    }
}

// 使用示例：
Section(title = "Section Title") {
    Column {
        Text("row 1")
        Text("row 2")
        Text("row 3")
    }
}

原因分析 #

你当前的实现中，标题的Box是放在带有边框的父Box内部的，而Compose中border修饰符是绘制在组件自身背景之上的，内部子元素则绘制在父组件的背景和边框之后。也就是说，边框的层级比内部的标题Box更高，所以哪怕标题Box设置了背景，也会被边框覆盖，看起来像是透明的。

解决方法 #

调整布局结构，把边框容器和标题拆分为同级元素，让标题的层级高于边框：

@Composable
fun Section(title: String, content: @Composable ()->Unit) {
    Box(
        modifier = Modifier
            .fillMaxWidth()
            .padding(2.dp)
    ) {
        // 带边框的内容容器，置于底层
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .border(1.dp, Color.Gray)
                .wrapContentHeight()
                .padding(top = 18.dp, start = 10.dp, end = 10.dp, bottom = 10.dp)
        ) {
            content()
        }
        // 标题Box，置于上层，覆盖边框
        Box(
            modifier = Modifier
                .wrapContentWidth()
                .offset(10.dp, 0.dp)
                .background(Color.Yellow)
        ) {
            Text(text = title, fontSize = 12.sp, modifier = Modifier.padding(horizontal = 10.dp))
        }
    }
}

// 使用示例
Section(title = "Section Title") {
    Column {
        Text("row 1")
        Text("row 2")
        Text("row 3")
    }
}

关键改动说明 #

• 将带边框的内容容器与标题Box放在同一个父Box下，标题Box后声明，层级更高，能覆盖边框
• 调整内容容器的padding，增加顶部内边距，避免内容被标题遮挡
• 移除标题Box的负offset，改为通过内容容器的顶部内边距配合标题的位置，布局更稳定

这样修改后，黄色标题背景就能完全覆盖边框线条，达到预期效果。

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