Android Compose实现layout_toLeftOf等效布局，避免按钮被挤压

问题场景 #

你当前的Compose布局代码如下：

Row(
    verticalAlignment = Alignment.CenterVertically,
    horizontalArrangement = Arrangement.SpaceBetween,
    modifier = Modifier
        .fillMaxWidth()
        .padding(16.dp)
) {
    Column {
        Text(
            text = thatText,
            overflow = TextOverflow.Ellipsis,
            maxLines = 1
        )
        Text(text = someText)
    }
    FilledTonalButton(
        onClick = { }) {
        Text(text = "Button")
    }
}

当thatText内容过长时，会挤压右侧按钮导致变形，无法保持按钮的正常尺寸。你期望的效果是：长文本自动省略，按钮始终保持原有大小：

thatText that is r... | ////////////
----------------------| // Button //
someText              | ////////////

你在XML中的实现方式为：

<RelativeLayout
    android:layout_width="match_parent"
    android:layout_height="wrap_content">

    <LinearLayout
        android:orientation="vertical"
        android:layout_width="match_parent"
        android:layout_height="wrap_content"
        android:layout_centerVertical="true"
        android:layout_toLeftOf="@id/my_button">
        <TextView
            android:layout_width="wrap_content"
            android:layout_height="wrap_content"
            android:ellipsize="end"
            android:maxLines="1"/>
        <TextView
            android:id="@+id/share_file_detail_size"
            android:layout_width="wrap_content"
            android:layout_height="wrap_content" />
    </LinearLayout>

    <Button
        android:layout_width="wrap_content"
        android:layout_height="wrap_content"
        android:id="@+id/my_button"
        android:layout_alignParentRight="true" />
</RelativeLayout>

解决方案 #

只需给左侧的Column添加Modifier.weight(1f)，让它占据Row中除按钮外的所有剩余空间，同时确保内部Text能正确触发省略效果。修改后的代码如下：

Row(
    verticalAlignment = Alignment.CenterVertically,
    horizontalArrangement = Arrangement.SpaceBetween,
    modifier = Modifier
        .fillMaxWidth()
        .padding(16.dp)
) {
    Column(
        modifier = Modifier.weight(1f)
    ) {
        Text(
            text = thatText,
            overflow = TextOverflow.Ellipsis,
            maxLines = 1,
            modifier = Modifier.fillMaxWidth()
        )
        Text(text = someText)
    }
    FilledTonalButton(
        onClick = { }) {
        Text(text = "Button")
    }
}

关键说明 #

• Modifier.weight(1f)：让Column在Row中优先分配剩余空间，按钮会先占据自身所需宽度，剩下的全部留给Column，彻底避免文本挤压按钮的情况。
• Modifier.fillMaxWidth()：确保Text填充Column的可用宽度，配合maxLines=1和overflow=TextOverflow.Ellipsis，实现和XML中android:ellipsize="end"完全一致的省略效果。

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