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

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

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

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

В следующем фрагменте кода показано, как создать список, используя версию макета ScalingLazyColumn , разработанную Horological, для создания контента, который отлично смотрится на экранах различных размеров Wear OS . Например, в приведенном ниже примере он добавит необходимые отступы к первому и второму фрагменту кода. последние элементы списка, которые установлены в scrollState ScalingLazyColumn :

val columnState = rememberResponsiveColumnState(
    contentPadding = ScalingLazyColumnDefaults.padding(
        first = ScalingLazyColumnDefaults.ItemType.Text,
        last = ScalingLazyColumnDefaults.ItemType.SingleButton
    )
)
ScreenScaffold(scrollState = columnState) {
    ScalingLazyColumn(
        columnState = columnState
    ) {
        item {
            ResponsiveListHeader(contentPadding = firstItemPadding()) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(
                imageVector = Icons.Default.Build,
                contentDescription = "Example Button",
                onClick = { }
            )
        }
    }
}
List.kt

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

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

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

val columnState = rememberResponsiveColumnState(
    // ...
    // ...
    rotaryMode = ScalingLazyColumnState.RotaryMode.Snap
)
ScreenScaffold(scrollState = columnState) {
    ScalingLazyColumn(
        columnState = columnState
    ) {
        // ...
        // ...
    }
}
List.kt