「Composeの基本レイアウト」のメモ#7 ~Favorite collections のグリッド - 遅延グリッドの実装~

2つの固定行を持つグリッド

• LazyHorizontalGridで作成する
  • パラメータ
    • rows, modifier

最小構成

@Composable
fun FavoriteCollectionsGrid(
    modifier: Modifier = Modifier
) {
    LazyHorizontalGrid(
        rows = GridCells.Fixed(2),
        modifier = modifier,
        
    ) {
        items(favoriteCollectionsData){ item -> 
            FavoriteCollectionCard(item.drawable, item.text)
        }
    }
}

LazyHorizontalGridの微調整

• Gridは親要素いっぱいまで広がるため、高さを決める
  • modifier = modifier.height(168.dp)
• グリッドの水平方向の contentPadding は 16 dp である
  • contentPadding = PaddingValues(horizontal = 16.dp)
• 横方向と縦方向の配置は、16 dp の間隔で行われる
  • horizontalArrangement = Arrangement.spacedBy(16.dp)
  • verticalArrangement = Arrangement.spacedBy(16.dp)
• グリッドの高さは 168 dp である
  • modifier = modifier.height(168.dp)
• FavoriteCollectionCard の修飾子は高さ 80 dp を指定する