Jetpack Compose Glimmer のリスト

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

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

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

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

縦方向リストは、フォーカス ベースのナビゲーションを自動的に処理するように最適化されています。フォーカスとスクロールが分離していることが多いモバイル デバイスのリストとは異なり、縦方向リストでは、ユーザーがタッチパッドでスクロールすると、フォーカスが子アイテム間を移動することで、2 つの操作が調整されます。リスト自体はフォーカス可能ではないため、子アイテムのフォーカスを管理してリクエストします。これにより、ユーザーはスクロール中に操作ポイントを明確に把握できます。

直接タッチ入力がないため、縦方向リストに配置するすべての子アイテムをフォーカス可能にし、アイテムがフォーカスされたときに、アクティブな枠線やハイライトなどの視覚的なレスポンスを提供します。ユーザーはフォーカスできないアイテムをスクロールして通過できますが、操作することはできません。これらのコンポーネントはすでにフォーカス可能で、フォーカス状態の視覚的なフィードバックを提供するため、可能な限り、縦方向リスト内で ListItemやCardなどの組み込みコンポーネントを使用してください。

例: 複数のアイテムを含む縦方向リスト

次のコードは、アイテムとアイテムの DSL メソッドを含む縦方向リストを使用して、アイテムのリストを作成する方法を示しています。

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

例: タイトル スロットを含む縦方向リスト

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

次のコードは、タイトル スロットを含む縦方向リストを作成します。

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

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

ListState を使用して、リストの状態のさまざまな側面（firstVisibleItemIndex プロパティと firstVisibleItemScrollOffset プロパティを使用したスクロール位置など）を制御および監視します。

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