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

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

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

Для применения рекомендуемых эффектов масштабирования и прокрутки:

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

Следующая анимация показывает, как элемент списка масштабируется и меняет форму при приближении к верхней и нижней части экрана:

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

В приведенном фрагменте кода также демонстрируется использование модификатора minimumVerticalContentPadding , который следует установить для элементов списка, чтобы применить правильный отступ вверху и внизу списка.

Чтобы отобразить индикатор прокрутки, используйте общее columnState для ScreenScaffold и TransformingLazyColumn : 

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

Добавьте эффект хлопка и броска.

Если вам необходимо добавить эффект привязки и отбрасывания, установите параметр flingBehavior в значение TransformingLazyColumnDefaults.snapFlingBehavior(columnState) , как показано в следующем фрагменте кода: 
val columnState = rememberTransformingLazyColumnState()
ScreenScaffold(scrollState = columnState) {
    TransformingLazyColumn(
        state = columnState,
        flingBehavior = TransformingLazyColumnDefaults.snapFlingBehavior(columnState)
    ) {
        // ...
        // ...
    }
}
List.kt
{% verbatim %} {% endverbatim %} {% verbatim %} {% endverbatim %}