Jetpack Composeで左右に揃えた複数行のレイアウトを組む

こういうやつ。全体の幅を固定値ではなく、もっとも幅の大きい行に揃えて、かつ他の行も左右に揃える。簡単そうに見えて地味に難しいやつ。

答え

IntrinsicSizeを使用することで簡潔に記述することができます。

@Composable
fun AlignedColumn() {
  Column(modifier = Modifier.width(IntrinsicSize.Max)) {
    Row {
      Text(text = "中華そば", modifier = Modifier.weight(1f))
      Spacer(modifier = Modifier.width(16.dp))
      Text(text = "800円")
    }
    Row {
      Text(text = "チャーシュー中華そば", modifier = Modifier.weight(1f))
      Spacer(modifier = Modifier.width(16.dp))
      Text(text = "1000円")
    }
    Row {
      Text(text = "味玉中華そば", modifier = Modifier.weight(1f))
      Spacer(modifier = Modifier.width(16.dp))
      Text(text = "900円")
    }
  }
}

解説

Intrinsicの使い方は公式ドキュメントがあるので、基本的にはこちらを参照しましょう。
https://developer.android.com/jetpack/compose/layouts/intrinsic-measurements

冒頭に挙げたコードの例では、Columnの中に3つのRowがあります。これを素朴に配置すると、次のようになると思います。

ここで、IntrinsicSize.Maxを適用すると、子の幅は最大の幅と同じになるように強制されます。したがって次のようになります。

あとはRowの中身の問題に帰着するので、適切な余白を取るよう、Modifier.weight(1f)を指定してあげるだけです。