Modifierはコンポーザブルに欠かせないアトリビュートとなっているためしっかりと理解しておきます。

Modifierについて

見た目や振る舞いをカスタマイズできる（背景、枠線、余白、サイズ、他のコンポーネントとの位置関係など）

ComposeのUIを提供するAPIは基本引数にModifierを持っている。

メソッドチェーンでカスタマイズ項目を組み合わせことが可能

Kotlin

    Text(
        text = "Hello $name!",
        modifier = modifier
    )

    Text(
        text = "Hello $name!",
        modifier = modifier
    )

相対的なレイアウト配置

親のコンポーザブルに対して相対的にレイアウトを配置するためにはModifier.fillMaxSize、Modifier.fillMaxWidth、Modifier.fillMaxHeightを利用します。

Kotlin

// 親と同じ横幅
.fillMaxWidth()

// 親の0.7の割合の横幅
.fillMaxWidth(0.7f)

// 親と同じ横幅
.fillMaxWidth()

// 親の0.7の割合の横幅
.fillMaxWidth(0.7f)

ColumnやRowなどで同列に並んだコンポーザブル同士の大きさを比率で設定する場合はModifier.weightを利用します。

Kotlin

// この場合は画像が2：1の割合で画像が表示される
Row {
  Image(
    modifier = Modifier.weight(2f)
  )
  Image(
    modifier = Modifier.weight(1f)
  )
}

// この場合は画像が2：1の割合で画像が表示される
Row {
  Image(
    modifier = Modifier.weight(2f)
  )
  Image(
    modifier = Modifier.weight(1f)
  )
}

weightを指定しているコンポーザブルと指定していないコンポーザブルが混在している場合は、指定していない方のコンポーザブルが先に決まる！

Columnで縦方向にコンポーザブルを並べているときに全体に対してのレイアウトを指定する場合はArrangement、横方向の場合はAlignmentを利用する。

Columnは縦方向なのでArrangementはtopやbottom、AlignmentはStartとEnd

Rowの場合は横方向なのでArrangementはStartやbottom、Alignmentはtopやbottom

また、個別にModifier.alignを利用することで全体にalignが適用されている中で個別に別のAlignmentを指定することが可能。

余白を設定する場合はModifier.paddingを利用します

Kotlin

Modifier.padding(10.dp)

Modifier.padding(10.dp)

余白を設定するにはSpacerコンポーザブルも利用することが可能で、Spacerを利用するかpaddingを利用するかの基準の1つは、スペースがコンポーザブルに紐づくのであればpadding。レイアウトに紐付くスペースであればSpacerを利用する。