Jetpack Compose中基于Imageview高度自适应调整右侧TextView布局

原有实现不符合预期的核心问题如下：

• Row默认会以内部最高子元素的高度作为自身高度，当右侧第二个文本内容过长时，Column高度会超过左侧带比例约束的Box高度，导致整个Row被撑开，无法实现「右侧高度匹配左侧图片高度」的要求
• 第二个Text没有填充剩余高度的约束，也没有限制最大高度，内容溢出时不会自动显示省略号

关键修改逻辑 #

• 给Row添加height(IntrinsicSize.Min)约束，让Row高度直接匹配左侧带固定宽高比的Box的固有高度，不会被右侧内容撑开
• 右侧Column设置fillMaxHeight()，高度和Row保持完全一致
• 第二个Text添加weight(1f)占满第一个和第三个Text之外的所有剩余空间，配合overflow = TextOverflow.Ellipsis自动截断内容显示省略号，无需设置固定maxLines

完整实现代码 #

@Preview
@Composable
fun ShowUi() {
    Row(
        modifier = Modifier
            .padding(10.dp)
            .fillMaxWidth()
            // 核心约束：Row高度匹配内部子元素最小固有高度，即左侧带比例Box的高度
            .height(IntrinsicSize.Min)
    ) {
        Box(
            modifier = Modifier
                .weight(7f)
                .aspectRatio(1.77f)
                .background(Color.Yellow)
        ) {
            // 此处替换为你的ImageView实现即可
        }
        Column(
            modifier = Modifier
                .weight(3f)
                .fillMaxHeight() // 让Column高度和Row完全对齐
                .background(Color.Green)
        ) {
            Text(
                text = "Title 1",
                fontSize = 20.sp,
                maxLines = 1,
                modifier = Modifier.background(Color.Green)
            )

            Text(
                text = "You can use '--warning-mode all' to show the individual deprecation warnings and determine if they come from your own scripts or plugins.Deprecated Gradle features were used in this build, making it incompatible with Gradle 8.0.",
                overflow = TextOverflow.Ellipsis,
                modifier = Modifier
                    .weight(1f) // 占满上下文本之外的所有剩余空间
                    .fillMaxHeight()
                    .background(Color.Gray),
            )

            Text(
                text = "PLAY NOW",
                modifier = Modifier.background(Color.Green),
                maxLines = 1
            )
        }
    }
}

效果验证 #

• 左侧控件高度完全由自身宽高比决定，不会被右侧内容撑开
• 第一个文本始终和左侧控件顶部对齐，第三个文本始终和左侧控件底部对齐
• 第二个文本可展示行数由剩余空间动态决定，内容溢出自动显示省略号，符合要求

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