Jetpack Compose中如何让图片自适应同行文本高度且避免文本截断？

问题原因 #

你原代码中使用Modifier.height(IntrinsicSize.Min)约束Row高度，这会让Row取子元素的最小内在高度。当文本内容刚好触发换行、高度处于临界点时，Row的高度计算未完全包含文本的完整渲染高度，导致文本底部被截断。

解决方案 #

有两种简单的修改方式可以解决这个问题：

方案1：改用IntrinsicSize.Max

将Row的高度约束从IntrinsicSize.Min改为IntrinsicSize.Max，让Row取子元素的最大内在高度，确保文本的完整高度被纳入计算：

@Composable
fun DynamicRowWithImage(
    text: String,
    imagePainter: Painter,
    modifier: Modifier = Modifier
) {
    Row(
        modifier = modifier
            .fillMaxWidth()
            .height(IntrinsicSize.Max), // 替换为Max
        verticalAlignment = Alignment.CenterVertically
    ) {
        Box(
            modifier = Modifier
                .fillMaxHeight()
                .aspectRatio(1f)
        ) {
            Image(
                painter = imagePainter,
                contentDescription = null,
                contentScale = ContentScale.Crop,
                modifier = Modifier.matchParentSize()
            )
        }

        Text(
            text = text,
            modifier = Modifier
                .weight(1f)
                .padding(8.dp),
            style = MaterialTheme.typography.bodyLarge,
            overflow = TextOverflow.Visible,
        )
    }
}

方案2：使用wrapContentHeight()

直接移除IntrinsicSize约束，改用wrapContentHeight()让Row高度自适应子元素的实际高度，文本的完整高度会自动撑开Row，图片则填充Row的高度保持正方形：

@Composable
fun DynamicRowWithImage(
    text: String,
    imagePainter: Painter,
    modifier: Modifier = Modifier
) {
    Row(
        modifier = modifier
            .fillMaxWidth()
            .wrapContentHeight(), // 替换为自适应高度
        verticalAlignment = Alignment.CenterVertically
    ) {
        Box(
            modifier = Modifier
                .fillMaxHeight()
                .aspectRatio(1f)
        ) {
            Image(
                painter = imagePainter,
                contentDescription = null,
                contentScale = ContentScale.Crop,
                modifier = Modifier.matchParentSize()
            )
        }

        Text(
            text = text,
            modifier = Modifier
                .weight(1f)
                .padding(8.dp),
            style = MaterialTheme.typography.bodyLarge,
            overflow = TextOverflow.Visible,
        )
    }
}

效果验证 #

两种方案都能保证：

• Row始终占满屏幕宽度
• 图片保持正方形，高度随文本高度自适应
• 文本无论长短都不会被截断，完整显示

内容的提问来源于stack exchange，提问作者David Burgos Prieto