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

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

分配 Modifier.weight(1f)到第二个Text

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

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)
}

呈现为(尽管我的截图上的裁剪很差，边缘的边距也很乱)