Jetpack Compose Glimmer のリスト

適用可能な XR デバイス
このガイダンスは、次のようなタイプの XR デバイス向けのエクスペリエンスを構築する際に役立ちます。
XR デバイスのタイプについて →
ディスプレイ メガネ
XR デバイスのタイプについて →

Jetpack Compose Glimmer の GlimmerLazyColumn は、表示されているアイテムのみを作成して配置することで、高いパフォーマンスを維持する点で、 Compose LazyColumn と同様に機能します。ただし、Glimmer の遅延列は、タッチスクリーンではなくタッチパッドを使用してユーザーが操作するディスプレイ メガネのコントロール用に構築されています。モバイル ユーザーは画面上の任意の座標をいつでもタップできますが、ディスプレイ メガネを使用するユーザーは、フォーカスされているアイテムのみを操作できます。

図 1.Jetpack Compose Glimmer のさまざまなスタイルのリストの例。

フォーカスの動作と子アイテム

Glimmer の遅延列は、フォーカスベースのナビゲーションを自動的に処理します。フォーカスとスクロールが別々になることが多いモバイル デバイスのリストとは異なり、Glimmer の遅延列では、ユーザーがタッチパッドでスクロールすると、フォーカスが子アイテムに移動することで、2 つが連携します。リスト自体はフォーカス可能ではないため、ユーザーがスクロール中に明確な操作ポイントを把握できるように、子アイテムのフォーカスを管理してリクエストします。

直接タッチ入力がないため、Glimmer の遅延列内のすべての子アイテムをフォーカス可能にします。アイテムにフォーカスがある場合は、アクティブなボーダーやハイライトなどの視覚的なレスポンスも提供します。ユーザーはフォーカスできないアイテムをスクロールできますが、操作することはできません。`ListItem` や `Card` などの組み込みコンポーネントは、フォーカス可能で、フォーカス状態の視覚的なフィードバックを提供するため、可能な限り使用してください。ListItemCard

例: 複数のアイテムを含む Glimmer の遅延列

次のコードは、アイテムとアイテムの DSL メソッドで Glimmer の遅延列を使用してアイテムのリストを作成する方法を示しています。

@Composable
fun GlimmerLazyColumnSample() {
    GlimmerLazyColumn {
        item { ListItem { Text("Header") } }
        items(count = 10) { index -> ListItem { Text("Item-$index") } }
        item { ListItem { Text("Footer") } }
    }
}

例: タイトル スロットを含む Glimmer の遅延列

Jetpack Compose Glimmer には、タイトル スロットを含む GlimmerLazyColumn のオーバーロードも用意されています。フォーカスできないタイトル（通常は TitleChip）は中央上部に静的に表示され、リスト コンテンツはその下にスクロールします。

次のコードは、タイトル スロットを含む Glimmer の遅延列を作成します。

@Composable
fun GlimmerLazyColumnWithTitleChipSample() {
    val ingredientItems =
        listOf("Milk", "Flour", "Egg", "Salt", "Apples", "Butter", "Vanilla", "Sugar", "Cinnamon")
    GlimmerLazyColumn(title = { TitleChip { Text("Ingredients") } }) {
        items(ingredientItems) { text -> ListItem { Text(text) } }
    }
}

プログラムによるリスト操作に Glimmer の遅延リストの状態を使用する

`firstVisibleItemIndex` プロパティと `firstVisibleItemScrollOffset` プロパティを使用して スクロール位置など、リストの状態のさまざまな側面を制御して確認するには、 `GlimmerLazyListState` を使用します。

この状態をホイストし、rememberGlimmerLazyListState を使用して scrollToItem と animateScrollToItem を使用してプログラムでスクロールできます。