如何在一行内排列元素，其中一个元素具有无限宽度？

Question

我正在尝试将以下布局转换为 Compose：

如您所见，左侧的文本可能很长，但允许换行 - 重要的是它为右侧的文本留出足够的空间进行渲染。这是它在 XML 中的样子：

<?xml version="1.0" encoding="utf-8"?>
<merge xmlns:android="http://schemas.android.com/apk/res/android"
    xmlns:app="http://schemas.android.com/apk/res-auto"
    xmlns:tools="http://schemas.android.com/tools"
    android:layout_width="match_parent"
    android:layout_height="wrap_content"
    tools:parentTag="androidx.constraintlayout.widget.ConstraintLayout"
    >
  <TextView
      android:id="@+id/stock_name"
      android:layout_width="0dp"
      android:layout_height="wrap_content"
      android:layout_marginEnd="16dp"
      android:textAppearance="@style/TextAppearance.AppCompat.Medium"
      app:layout_constraintEnd_toStartOf="@+id/holding_quantity"
      app:layout_constraintStart_toStartOf="parent"
      app:layout_constraintTop_toTopOf="parent"
      tools:text="Vanguard Total Stock Market Index Fund ETF Shares"
      />
  <TextView
      android:id="@+id/holding_quantity"
      android:layout_width="wrap_content"
      android:layout_height="wrap_content"
      android:textAppearance="@style/TextAppearance.AppCompat.Display1"
      android:textColor="?attr/colorAccent"
      app:layout_constraintEnd_toEndOf="parent"
      app:layout_constraintTop_toTopOf="parent"
      tools:text="10"
      />
</merge>

我正在努力寻找合适的Row配置：

@Composable fun HoldingView() {
  Row {
    val typography = MaterialTheme.typography
    Text("Vanguard Total Stock Market Index Fund ETF Shares", style = typography.body1)
    Spacer(Modifier.preferredWidth(16.dp))
    Text("10", style = typography.h4, color = MaterialTheme.colors.secondary)
  }
}

没有任何额外的修饰符，这只是将右侧的文本推到了边界之外：

我尝试过但没有任何运气的事情：

• 玩各种Arrangement选项，例如SpaceBetween
• 将 a 分配Modifier.weight(1f)给第二个Text

这些都对视图的布局方式没有任何影响。是否有适用于此用例的配置？

Answer 1

解决的办法是使用Modifier.weight(1f)（这可从RowScope内Row{ ... }上）的Text要填写后所有其他元素都奠定了可用空间（也就是，在你的情况下，第一个）。

所以你的例子看起来像：

Row {
    val typography = MaterialTheme.typography
    Text(
        "Vanguard Total Stock Market Index Fund ETF Shares",
        style = typography.body1,
        modifier = Modifier.weight(1f)
    )
    Spacer(Modifier.preferredWidth(16.dp))
    Text("10", style = typography.h4, color = MaterialTheme.colors.secondary)
}

呈现为（尽管在我的屏幕截图上裁剪不佳，但边缘的边距却弄乱了）