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

Question

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

如您所见，左侧的文本可以很长，但允许换行 - 重要的是它为右侧的文本留下足够的 space 来呈现。这是 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 options, such as SpaceBetween
正在将一个 Modifier.weight(1f) 分配给第二个 Text

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

Answer 1

解决方法是在Text上使用Modifier.weight(1f)（在Row{ ... }内的RowScope上可用）在Text上可用[=24] =] 在布置所有其他元素之后（即，在您的情况下，第一个 元素）。

所以你的例子看起来像：

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

呈现为（尽管我的屏幕截图上的裁剪效果不佳，边缘的边距很乱）

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

How to arrange elements inside a Row, where one element has infinite width?

android

android-jetpack-compose