このページは Cloud Translation API によって翻訳されました。

スクロール可能なグリッドを作成する

遅延グリッドを使用して大規模なデータセットと動的コンテンツを管理することで、アプリのパフォーマンスを向上させることができます。Lazy グリッドコンポーザブルを使用すると、複数の列または行にまたがるスクロール可能なコンテナにアイテムを表示できます。

バージョンの互換性

この実装では、プロジェクトの minSDK を API レベル 21 以上に設定する必要があります。

依存関係

グリッドの向きを決定する

LazyHorizontalGrid コンポーザブルと LazyVerticalGrid コンポーザブルは、アイテムのグリッド表示に対するサポートを提供しています。Lazy 垂直グリッドは、複数の列にわたって、上下にスクロール可能なコンテナにアイテムを表示し、Lazy 水平グリッドは横軸でそれと同じように動作します。

スクロール可能なグリッドを作成する

次のコードは、3 つの列を持つ水平スクロールグリッドを作成します。

@Composable
fun ScrollingGrid() {
    val itemsList = (0..15).toList()

    val itemModifier = Modifier
        .border(1.dp, Color.Blue)
        .width(80.dp)
        .wrapContentSize()

    LazyHorizontalGrid(
        rows = GridCells.Fixed(3),
        horizontalArrangement = Arrangement.spacedBy(16.dp),
        verticalArrangement = Arrangement.spacedBy(16.dp)
    ) {
        items(itemsList) {
            Text("Item is $it", itemModifier)
        }

        item {
            Text("Single item", itemModifier)
        }
    }
}LazyListSnippets.kt

コードに関する主なポイント

LazyHorizontalGrid コンポーザブルは、グリッドの横向きを決定します。
- 垂直グリッドを作成するには、代わりに LazyVerticalGrid を使用します。
rows プロパティは、グリッドコンテンツの配置方法を指定します。
- 縦型グリッドの場合は、columns プロパティを使用して配置を指定します。
items(itemsList) は、itemsList を LazyHorizontalGrid に追加します。ラムダは、アイテムごとに Text コンポーザブルをレンダリングし、テキストをアイテムの説明に設定します。
item() は LazyHorizontalGrid に 1 つのアイテムを追加しますが、ラムダは items() と同様に 1 つの Text コンポーザブルをレンダリングします。
GridCells.Fixed は、行または列の数を定義します。
できるだけ多くの行を含むグリッドを作成するには、GridCells.Adaptive を使用して行数を設定します。

次のコードでは、20.dp 値で、すべての列が 20.dp 以上で、すべての列の幅が同じであることを指定しています。画面の幅が 88 dp の場合、4 つの列があり、それぞれ 22 dp です。