Jetpack Compose Glimmer のリスト

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

Jetpack Compose Glimmer のリストは、AI グラスアプリに固有の動作と入力互換性を提供するように設計された、表示アイテムのみを効率的にレンダリングする縦スクロール可能な UI コンポーネントです。Jetpack Compose Glimmer では、VerticalList コンポーネントと ListItem コンポーネントを使用してこれを実現します。

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

VerticalList は、スクロール可能な縦方向のコンテンツを表示するための Jetpack Compose Glimmer のコンポーネントです。 LazyColumn と同じ API 機能を提供しますが、Jetpack Compose Glimmer とディスプレイ付きの AI グラス向けに最適化された動作を備えています。

Jetpack Compose Glimmer リストには、次のような固有の制約があります。

  • リストにビューに収まる以上のアイテムが含まれている場合、リストの境界付近に黒いスクリムが使用されます。

例: 3 つのアイテムを含む縦方向のリストを表示する

次のコードは、VerticalList コンポーネントと ListItem コンポーネントを使用して 3 つのアイテムのリストを作成する方法を示しています。

@Composable
fun GlimmerListWithButtons() {
    VerticalList(
        contentPadding = PaddingValues(16.dp),
        verticalArrangement = Arrangement.spacedBy(20.dp)
    ) {
        items(count = 3) { index ->
            ListItem(
                onClick = { /* Handle Click */ },
                leadingIcon = if (index == 1) {
                    { Icon(Icons.Rounded.Favorite, "Favorite Icon") }
                } else null
            ) {
                Text("List Item + $index")
            }
        }
    }
}

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

  • リストには、動的に生成された 3 つのアイテムが表示されます。各アイテムは ListItemです。
  • 各 ListItem はカスタマイズでき、アイコンを追加できます。