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

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

我正在尝试将以下布局转换为 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
为第二个 Modifier.weight(1f) 分配一个 Text

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

解决方法

解决方案是在 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)
}

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