Jetpack Compose Glimmer の垂直スタック

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

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

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

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

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

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

フォーカス管理

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

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

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

次のコードは、複数のアイテムを含む縦向きスタックを作成します。

@Composable
fun VerticalStackSample() {
    VerticalStack(modifier = Modifier.fillMaxWidth().height(364.dp)) {
        item(key = 0) {
            Card(modifier = Modifier.fillMaxSize().itemDecoration(CardDefaults.shape)) {
                Text(
                    "Item-0",
                    style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated),
                )
            }
        }
        items(count = 10, key = { it + 1 }) { index ->
            Card(modifier = Modifier.fillMaxSize().itemDecoration(CardDefaults.shape)) {
                Text(
                    "Item-${index + 1}",
                    style = LocalTextStyle.current.copy(textMotion = TextMotion.Animated),
                )
            }
        }
    }
}

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

  • テキストの LocalTextStyle の textMotion を Animated に設定します。これにより、レイアウト アニメーションやスケーリング遷移中のテキスト レンダリングがスムーズになり、ピクセル スナップ アーティファクトが防止されます。
  • 縦向きスタックの高さに特定のサイズ 364.dp を指定します。特定高さを指定するか、高さ修飾子を使用するか、 fillMaxSize 修飾子を適用して、カード遷移の表示領域を定義します。
  • 形状パラメータを直接受け取る他のコンポーネントとは異なり、 VerticalStack はアイテムの視覚的な境界を itemDecoration 修飾子を使用して管理します。この例では、一貫したクリッピングと視覚効果を維持するために、最初のアイテムの itemDecoration とすべての子アイテムに同じ形状を渡します。この例では、デフォルトの CardDefaults.shapeを使用します。