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

Поддерживаемые 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") }
        }
    }
}