Jetpack Compose Glimmer のリスト

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

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

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

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

Jetpack Compose Glimmer リストには、いくつかの固有の制約があります。

  • リストには、ビュー内に 3 つ以下のアイテムのみを表示する必要があります。
  • リストにビューに収まりきらない数の項目が含まれている場合、リストの境界付近に黒いスクリムが使用されます。

例: 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 はカスタマイズ可能で、アイコンを追加できます。