LazyVerticalGridで以下のものを作る。
//横２列のグリッドレイアウトを作ります
LazyVerticalGrid(
columns = GridCells.Fixed(2),
modifier = Modifier
.fillMaxSize()
.padding(innerPadding)
.padding(16.dp), // 画面全体の端の余白
horizontalArrangement = Arrangement.spacedBy(16.dp), // 横の箱同士の隙間
verticalArrangement = Arrangement.spacedBy(16.dp) //縦の箱同士の隙間
) {
//items(10)で、同じ設定の箱を10個で作ります
items(10) { index ->
Card(
modifier = Modifier
.fillMaxWidth()
.height(120.dp),
colors = CardDefaults.cardColors(
containerColor = MaterialTheme.colorScheme.primaryContainer
)
) {
Box(
modifier = Modifier.fillMaxSize(),
contentAlignment = Alignment.Center
) {
//indexは1からはじまるので、＋１して「箱１」「箱２」
Text(
text = "箱 ${index + 1}",
color = MaterialTheme.colorScheme.onPrimaryContainer
)
}
}
}
}
1 LazyVerticalGrid の基本設定
LazyVerticalGrid(
解説: データを縦方向の格子状（グリッド）に並べるためのコンポーネントです。画面に表示されている分だけを効率よく描画するため、大量のデータを並べてもアプリが重くなりにくい特徴を持っています。
columns = GridCells.Fixed(2),
解説: グリッドの列数を指定しています。GridCells.Fixed(2) とすることで、画面の横幅に関わらず「一律で横2列に並べる」という設定になります。
modifier = Modifier
.fillMaxSize()
.padding(innerPadding)
.padding(16.dp), // 画面全体の端の余白
解説: * fillMaxSize() で画面いっぱいに広げています。
1つ目の padding(innerPadding) でトップバーやボトムバーに被らないようにしています。
2つ目の padding(16.dp) で、画面の上下左右の端から 16dp づつの余白を作っています。
horizontalArrangement = Arrangement.spacedBy(16.dp), // 横の箱同士の隙間
verticalArrangement = Arrangement.spacedBy(16.dp) //縦の箱同士の隙間
) {
解説: 箱と箱の間の「隙間」を設定しています。horizontal... で左右の箱の間に 16dp、vertical... で上下の箱の間に 16dp のスペースを自動で空けてくれます。
2 アイテム（箱）の量産
//items(10)で、同じ設定の箱を10個で作ります
items(10) { index ->
解説: グリッドの中身を定義するエリアです。items(10) と指定することで、「これから書く箱の構成（Card）を10回繰り返して作ってね」というループ命令になります。index には、0番目、1番目、2番目……という番号（0〜9）が自動で入ります。
3 カード（箱）のデザイン
Card(
modifier = Modifier
.fillMaxWidth()
.height(120.dp),
解説: 角が少し丸まった四角いパネル（Card）を作ります。
fillMaxWidth() で、2分割されたエリアの横幅いっぱいに広げます。
height(120.dp) で、箱の縦幅（高さ）を 120dp に固定しています。
colors = CardDefaults.cardColors(
containerColor = MaterialTheme.colorScheme.primaryContainer
)
) {
解説: 箱の背景色を設定しています。アプリのメインカラーに馴染むコンテナの色（primaryContainer）を指定しています。
4 カードの中身（文字の配置）
Box(
modifier = Modifier.fillMaxSize(),
contentAlignment = Alignment.Center
) {
解説: Card の中に、文字を配置するためのレイアウト（Box）を作ります。
fillMaxSize() でカードの内側全体に広げています。
contentAlignment = Alignment.Center で、中に入れた文字がカードの真ん中に来るように設定しています。
//indexは1からはじまるので、＋１して「箱１」「箱２」
Text(
text = "箱 ${index + 1}",
color = MaterialTheme.colorScheme.onPrimaryContainer
)
解説: Text で文字を表示します。
index はプログラムのルール上 0 から始まってしまうため、${index + 1} とすることでユーザーが見たときに「箱 1」「箱 2」……と直感的な数字になるよう計算しています。
color = ... で、背景色（primaryContainer）の上に載せても文字がはっきりと見えやすい色（onPrimaryContainer）を指定しています。
}
}
}
}
解説: それぞれ Box、Card、itemsのループ、そして LazyVerticalGrid 全体の閉じカッコ（終了）です。