如何避免为Row内的Box设置固定height？为何高度变为0？

原因分析 #

Row 组件的高度默认由内部最高的子元素决定（这里是旁边的 Text）。当你移除 Box 的固定 height(25.dp) 后：

• 使用 wrapContentHeight() 时，因为 Box 内部没有任何内容，它的高度会直接坍缩为 0——wrapContentHeight() 完全依赖自身内容来确定高度。
• 使用 fillMaxHeight() 时，Row 本身的高度是由 Text 撑开的「自适应高度」，Box 没有自身内容撑高，且 Row 没有给它明确的高度约束，导致 fillMaxHeight() 无法生效，最终高度还是 0。

解决方案 #

不需要固定高度的话，让 Box 自动匹配 Row 的高度（也就是旁边 Text 的高度）即可，只需要修改 Box 的 modifier：

Row(
    verticalAlignment = Alignment.CenterVertically
) {
    Box(
        modifier = Modifier
            .width(6.dp)
            .fillMaxHeight() // 替换固定height，让Box填充Row的高度
            .clip(RoundedCornerShape(25.dp))
            .background(MovieYellowColor)
    )
    Spacer(modifier = Modifier.width(10.dp))
    Text(
        text = follow.title,
        fontSize = 20.sp,
        fontWeight = FontWeight.Bold
    )
}

这样设置后，Box 会自动填充 Row 的高度，而 Row 的高度由 Text 撑开，最终 Box 的高度会和旁边的标题文本高度完全一致，完美匹配你的需求。

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