Jetpack Compose Glimmer の垂直スタック

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

Jetpack Compose Glimmer の VerticalStack は、視覚的に重なり合う 3 次元のシーケンスでアイテムを配置する、遅延読み込みの縦 スクロール可能なレイアウトです。プライマリ アイテムはフォアグラウンドに目立つように表示され、後続のアイテムはプライマリ アイテムの背後に配置されます。

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

スクロールとポジショニングの動作

スタックはアイテムをコンパクトで重なり合うレイアウトで配置するため、 リストなど、他のタイプのシーケンス コンポーネントとは異なる動作をします。

  • ユーザーが垂直方向にスクロールすると、アクティブなフォアグラウンド アイテムがビューから外れ、そのすぐ下のアイテムが目立つフォアグラウンドの位置にスライドします。
  • ユーザーのジェスチャーが終了すると、アイテムは常に特殊なスプリング アニメーションを使用してフォアグラウンドの位置にスナップ アニメーションします。
  • アイテムは Z 軸に沿って配置され、リスト内のアイテムはプライマリ アイテムの背後に配置されます。

フォーカス管理

VerticalStack は特殊なフォーカス システムを使用して、現在のフォアグラウンド アイテムが常にユーザー操作のプライマリ ターゲットになるようにします。

  • 最初のフォーカスと再入力: 最初のフォーカスとフォーカスの再入力は、スタックの 現在の最上位アイテムに移動します。
  • 自動フォーカス通知: アイテムが切り替わると、スタックは最上位アイテムのフォーカスをリクエストします。
  • フォーカス トラッキング: 各アイテムは onFocusChanged を使用して、個々のフォーカス ステータスを StackState に通知します。

例: 縦向きスタックを作成する

次のコードは、いくつかのカードアイテムを含む縦向きスタックを作成します。

@Composable
fun VerticalStackSample() {
    VerticalStack {
        item {
            Card { Text("Top Card") }
        }
        item {
            Card { Text("Second Card") }
        }
        item {
            Card { Text("Third Card") }
        }
    }
}