Jetpack Compose可组合项尺寸适配异常问题求助

我从XML迁移到Jetpack Compose开发笔记应用，笔记项包含标题、描述和左侧用颜色区分的优先级栏。想让优先级栏高度和笔记项内容高度一致，但设置fillMaxHeight()会让笔记项占满屏幕高度；用wrapContentHeight()时优先级栏直接消失。

原代码：

@Composable
fun SingleItem(modifier: Modifier = Modifier, title: String = "", description: String = "") {

    Card(
        shape = MaterialTheme.shapes.medium,
        modifier = Modifier.padding(horizontal = 24.dp, vertical = 16.dp).wrapContentHeight()
    ) {
        Row() {

            Box(modifier = Modifier.fillMaxHeight().width(15.dp).background(Color.Red))

            Column() {
                Text(text = title, modifier = Modifier.padding(start = 16.dp, top = 16.dp))
                Spacer(modifier = Modifier.height(16.dp))
                Text(text = description, modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp))
            }
        }

    }

}

问题原因 #

Row默认没有固有高度约束，导致fillMaxHeight()会让Row尽可能占满父容器高度；而wrapContentHeight()时Box没有内容支撑，所以无法显示。

解决方案 #

给Row添加Modifier.height(IntrinsicSize.Min)，让Row根据子元素的最高内容确定自身高度，再让Box用fillMaxHeight()匹配这个高度。修改后的代码：

@Composable
fun SingleItem(modifier: Modifier = Modifier, title: String = "", description: String = "") {
    Card(
        shape = MaterialTheme.shapes.medium,
        modifier = Modifier.padding(horizontal = 24.dp, vertical = 16.dp)
    ) {
        Row(modifier = Modifier.height(IntrinsicSize.Min)) {
            Box(modifier = Modifier.fillMaxHeight().width(15.dp).background(Color.Red))
            
            Column(modifier = Modifier.padding(bottom = 16.dp)) {
                Text(text = title, modifier = Modifier.padding(start = 16.dp, top = 16.dp))
                Spacer(modifier = Modifier.height(16.dp))
                Text(text = description, modifier = Modifier.fillMaxWidth().padding(horizontal = 16.dp))
            }
        }
    }
}

修改说明 #

1. Row添加高度约束：Modifier.height(IntrinsicSize.Min)让Row的高度由子元素（Column的内容）决定，不会无限拉伸。
2. 移除Card的wrapContentHeight()：Card默认会根据子元素内容自适应高度，无需额外设置。
3. Column添加底部内边距：确保描述文本底部有间距，让优先级栏能覆盖到笔记项的完整高度。

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