Списки с помощью Compose для Wear OS

Списки позволяют пользователям выбирать элемент из набора вариантов на устройствах Wear OS.

Многие устройства Wear OS используют круглые экраны, что затрудняет просмотр элементов списка, которые появляются в верхней и нижней части экрана. По этой причине Compose для Wear OS включает версию класса LazyColumn под названием TransformingLazyColumn , которая поддерживает анимацию масштабирования и морфинга. Когда элементы перемещаются к краям, они становятся меньше и исчезают.

Чтобы добавить эффект масштабирования и прокрутки, используйте Modifier.transformedHeight , чтобы позволить Compose рассчитать изменение высоты при прокрутке элемента по экрану, и transformation = SurfaceTransformation(transformationSpec) для применения визуальных эффектов, включая визуальное уменьшение масштаба элемента для соответствия предыдущему.

Следующая анимация показывает, как изменяются размер и прозрачность элемента по мере его перемещения по экрану:

Следующий фрагмент кода показывает, как создать список с помощью макета TransformingLazyColumn для создания контента, который отлично смотрится на экранах Wear OS разных размеров , например, в следующем примере кода он добавит необходимые отступы к первому и последнему элементам списка, которые задаются в contentPadding TransformingLazyColumn . Чтобы отображался индикатор прокрутки, разделите columnState между ScreenScaffold и TransformingLazyColumn : 

val columnState = rememberTransformingLazyColumnState()
val contentPadding = rememberResponsiveColumnPadding(
    first = ColumnItemType.ListHeader,
    last = ColumnItemType.Button,
)
val transformationSpec = rememberTransformationSpec()
ScreenScaffold(
    scrollState = columnState,
    contentPadding = contentPadding
) { contentPadding ->
    TransformingLazyColumn(
        state = columnState,
        contentPadding = contentPadding
    ) {
        item {
            ListHeader(
                modifier = Modifier.fillMaxWidth().transformedHeight(this, transformationSpec),
                transformation = SurfaceTransformation(transformationSpec)
            ) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(
                modifier = Modifier.fillMaxWidth().transformedHeight(this, transformationSpec),
                transformation = SurfaceTransformation(transformationSpec),
                onClick = { /* ... */ },
                icon = {
                    Icon(
                        imageVector = Icons.Default.Build,
                        contentDescription = "build",
                    )
                },
            ) {
                Text(
                    text = "Build",
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis,
                )
            }
        }
    }
}
List.kt

Добавьте эффект щелчка и броска

Если вам нужно добавить поведение «snap-and-fling», мы предлагаем использовать ScalingLazyColumn . Этот эффект помогает пользователям точнее перемещаться по элементам в списке, а также помогает им быстрее перемещаться по длинному списку.

Чтобы добавить этот эффект к версии ScalingLazyColumn от Horologist, установите параметр rotaryMode columnState на RotaryWithSnap , как показано в следующем фрагменте кода: 

val columnState = rememberResponsiveColumnState(
    // ...
    // ...
    rotaryMode = ScalingLazyColumnState.RotaryMode.Snap
)
ScreenScaffold(scrollState = columnState) {
    ScalingLazyColumn(
        columnState = columnState
    ) {
        // ...
        // ...
    }
}
List.kt
{% дословно %} {% endverbatim %} {% дословно %} {% endverbatim %}