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

Применимые устройства XR

Данное руководство поможет вам создавать приложения для устройств XR такого типа.

Узнайте о типах устройств XR →

Узнайте о типах устройств XR →

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

Поведение при прокрутке и позиционировании

Поскольку стеки хранят элементы, расположенные в компактном, перекрывающемся порядке, они обладают некоторыми особенностями поведения, отличающимися от других типов упорядоченных компонентов, таких как списки :

• При вертикальной прокрутке пользователем активный элемент на переднем плане постепенно исчезает из поля зрения, позволяя элементу, расположенному непосредственно под ним, занять видное место на переднем плане.
• После завершения жеста пользователя элементы всегда мгновенно перемещаются в передний план с помощью специальной пружинной анимации.
• Элементы располагаются вдоль оси 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),
                )
            }
        }
    }
}
StackSamples.kt

Основные моменты, касающиеся кода.

• Устанавливает textMotion для LocalTextStyle текста в значение Animated . Это способствует плавному отображению текста во время анимации компоновки или масштабирования, предотвращая появление артефактов, связанных с привязкой пикселей.
• Задает конкретную высоту вертикального стека размером 364.dp . Всегда указывайте конкретную высоту, используйте модификатор высоты или модификатор fillMaxSize , чтобы определить визуальную область для переходов между карточками.
• В отличие от других компонентов, которые принимают параметр формы напрямую, VerticalStack управляет визуальными границами своих элементов с помощью модификатора itemDecoration . В этом примере для itemDecoration начального элемента передается одна и та же форма, что и для всех дочерних элементов, чтобы обеспечить согласованное отсечение и визуальные эффекты. В этом примере используется значение по умолчанию CardDefaults.shape .