Compose中如何不预设尺寸实现双色块背景布局

我想要创建一个Composable组件，包含上下分色的背景块，上方叠加Text组件。需求是组件尺寸随Text内容自适应，仅通过内边距展示双色背景，不需要预设固定尺寸。

当前问题：去掉固定高度后，预览中组件会占满可用空间，设备上背景完全消失。现有代码如下：

Box(
    contentAlignment = Alignment.Center,
    modifier = Modifier
        .fillMaxWidth()
        .height(120.dp), // --> 我不想设置这个固定高度！
) {
    Column {
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .weight(1f)
                .background(color = Color.Red),
        )
        Box(
            modifier = Modifier
                .fillMaxWidth()
                .weight(1f)
                .background(color = Color.Yellow),
        )
    }
    Box {
        Text(
            modifier = Modifier
                .padding(24.dp)
                .background(color = Color.Cyan),
            text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac est sed dui posuere dictum. Pellentesque vitae gravida justo, vitae fermentum turpis. Fusce diam est, commodo eu volutpat id, dignissim nec ex. ",
        )
    }
}

原代码的背景层依赖外层Box的固定高度约束，去掉固定高度后，Column因无明确尺寸会异常扩展或收缩。要实现自适应，需让背景层跟随Text的布局尺寸：

@Composable
fun TwoToneBackgroundText() {
    val textPadding = 24.dp
    Box(contentAlignment = Alignment.Center) {
        // 背景层：跟随外层Box尺寸（即Text内容+内边距的大小）
        Column(modifier = Modifier.matchParentSize()) {
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .weight(1f)
                    .background(Color.Red)
            )
            Box(
                modifier = Modifier
                    .fillMaxWidth()
                    .weight(1f)
                    .background(Color.Yellow)
            )
        }
        // 文本层：确定组件的整体尺寸
        Text(
            modifier = Modifier.padding(textPadding),
            text = "Lorem ipsum dolor sit amet, consectetur adipiscing elit. Sed ac est sed dui posuere dictum. Pellentesque vitae gravida justo, vitae fermentum turpis. Fusce diam est, commodo eu volutpat id, dignissim nec ex. ",
            color = Color.Black
        )
    }
}

关键调整说明 #

• 移除外层Box的fillMaxWidth()和固定高度，让组件默认自适应内容尺寸
• 背景层通过matchParentSize()绑定外层Box的尺寸，而外层Box的尺寸由Text的内容+内边距决定
• Column的两个子Box用weight(1f)平分高度，实现上下双色效果
• Text的内边距直接控制背景的展示范围，确保背景与文本区域的间距符合需求

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