Вертикальные стеки в Jetpack Compose Glimmer

Применимые устройства XR
Данное руководство поможет вам создавать приложения для устройств XR такого типа.
Узнайте о типах устройств XR →
Очки для демонстрации
Узнайте о типах устройств XR →

В Jetpack Compose Glimmer VerticalStack — это отложенная, вертикально прокручиваемая компоновка, которая располагает элементы в визуально перекрывающейся трехмерной последовательности. Основной элемент отображается на переднем плане, а последующие элементы располагаются позади него.

Рисунок 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") }
        }
    }
}