Android Compose水平布局问题：左侧内容挤压右侧固定宽度区域

问题场景：Card组件内的Row布局包含两个区域，左侧区域需占用剩余可用空间，右侧区域宽度固定。当前实现中，左侧文本较短时布局正常，但文本过长会将右侧区域挤出Card外。

问题原因 #

原代码中左侧Column未设置宽度约束，会优先占用Row的全部可用空间，导致Spacer和右侧固定宽度Column被挤压出Card。Spacer的weight(1f)无法发挥作用，因为左侧Column没有限制自身宽度的约束。

解决方案 #

给左侧Column添加Modifier.weight(1f)，让它占用Row中除右侧固定宽度区域外的所有剩余空间，同时确保Column内部的Text能正确应用换行和省略逻辑。

修改后的完整代码 #

Card(
    modifier = Modifier
        .fillMaxWidth()
        .height(150.dp)
        .padding(bottom = 16.dp),
    elevation = 0.dp,
    shape = RoundedCornerShape(11.dp)
) {
    Row(Modifier.fillMaxWidth()) { // 确保Row填充Card宽度
        Column(
            Modifier
                .weight(1f) // 关键：让左侧Column占用剩余空间
                .padding(top = 11.dp, bottom = 13.dp, end = 12.dp, start = 16.dp),
        ) {
            Text(
                text = "First Text gets very long. Two long for Text the second text. It gets pushed out of the screen.",
                fontSize = 16.sp,
                fontWeight = FontWeight.Bold,
                maxLines = 2,
                overflow = TextOverflow.Ellipsis
            )
        }
        Column(
            modifier = Modifier
                .width(86.dp)
                .fillMaxHeight()
        ) {
            Text(
                text = "Second Text",
                fontSize = 16.sp,
                fontWeight = FontWeight.Bold,
                maxLines = 2,
                overflow = TextOverflow.Ellipsis
            )
        }
    }
}

额外说明 #

• 添加Modifier.fillMaxWidth()到Row，确保Row完全填充Card的宽度，避免布局收缩。
• 左侧Column的weight(1f)会强制它仅占用右侧固定宽度区域之外的空间，即使文本过长，也会在该空间内换行并显示省略号，不会挤压右侧区域。

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