「Composeの基本レイアウト」のメモ#6 ~7. Align your body の行の実装~

7. Align your body の行 - 配置

• スクロール可能な行の作成は、LazyRowを使用する
• リストの要素は先ほど実装した AlignYourBodyElement コンポーザブルとする

最小構成

@Composable
fun AlignYourBodyRow(
    modifier
){
    LazyLow(
        modifier = modifier
    ){
        items(alignYourBodyData){ item -> 
            AlignYourBodyElement(item.drawable, item.text)
        }
    }
}

LazyRowコンポーザブルの微調整

• 各子コンポーザブル間に固定スペースを追加する
  • horizontalArrangementにArrangement.spacedBy(8.dp)を渡す
• LazyRow の両側にもパディングを追加する
  • modifier.paddingで設定するのではなく、contentPaddingパラメータにPaddingValues(horizontal = 16.dp)を渡す