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

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

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

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

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

В следующем фрагменте кода показано, как создать список с использованием макета 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

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

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

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

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