Jetpack Compose Row组件元素定位布局问题求助

问题场景 #

需要实现Row布局：左侧两段文本居左，右侧红色数字文本居右，文本过长时自动截断不重叠。使用Arrangement.SpaceBetween方向符合预期，但通过Modifier.weight()手动调整权重的方式不够优雅，无法自适应右侧数字的长度变化。

解决方案 #

核心思路是让左侧内容占据剩余空间，右侧内容仅占用自身所需宽度，无需手动设置权重：

修改后的完整代码 #

Card(
    modifier = modifier,
    elevation = 10.dp
) {
    Box(
        modifier = modifier
            .background(
                color = MaterialTheme.colors.surface,
                shape = RoundedCornerShape(MaterialTheme.spacing.defaultRoundedCorner)
            )
            .padding(
                top = MaterialTheme.spacing.scoatch,
                end = MaterialTheme.spacing.small,
                bottom = MaterialTheme.spacing.small,
                start = MaterialTheme.spacing.small
            )
    ) {
        Row(
            verticalAlignment = Alignment.CenterVertically,
            modifier = Modifier.fillMaxWidth()
        ) {
            Column(
                modifier = Modifier.weight(1f)
            ) {
                Text(
                    text = firearm.name,
                    style = MaterialTheme.typography.h6
                )

                Text(
                    text = firearm.notes ?: "",
                    style = MaterialTheme.typography.subtitle1,
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis
                )
            }

            Text(
                text = "26,000", // 支持任意长度数字文本
                style = MaterialTheme.typography.h5,
                color = LightError,
                modifier = Modifier.wrapContentWidth(Alignment.End)
            )
        }
    }
}

方案说明 #

• 左侧Column添加Modifier.weight(1f)：占据Row中除右侧元素外的所有可用空间，文本过长时会触发已设置的maxLines=1和TextOverflow.Ellipsis自动截断。
• 右侧Text使用Modifier.wrapContentWidth(Alignment.End)：保证文本始终居右，且宽度仅适配自身内容长度，无论数字是长（如"26,000"）还是短（如"0"），都能自动适配，无需手动调整权重。
• 移除horizontalArrangement = Arrangement.SpaceBetween：通过weight机制已实现左侧占满剩余空间、右侧自然居右的效果，无需额外设置排列方式。

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