Поворотный ввод с помощью Compose

Оптимизируйте свои подборки Сохраняйте и классифицируйте контент в соответствии со своими настройками.

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

Три основных источника вращающегося ввода на большинстве часов включают вращающуюся боковую кнопку (RSB) и либо физический безель, либо сенсорный безель, который представляет собой круглую сенсорную зону вокруг экрана. Хотя ожидаемое поведение может различаться в зависимости от типа ввода, обязательно поддерживайте вращающийся ввод для всех основных взаимодействий.

Прокрутить

Большинство пользователей ожидают, что приложения будут поддерживать жест прокрутки. По мере прокрутки контента на экране предоставляйте пользователям визуальную обратную связь в ответ на вращательные взаимодействия. Визуальная обратная связь может включать индикаторы прокрутки для вертикальной прокрутки или индикаторы страниц .

ScalingLazyColumn , TransformingLazyColumn и Picker поддерживают жест прокрутки по умолчанию, если вам необходимо поместить эти компоненты в AppScaffold и ScreenScaffold и передать состояние списка между ScreenScaffold и компонентом, например TransformingLazyColumn .

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

val listState = rememberTransformingLazyColumnState()
ScreenScaffold(
    scrollState = listState,
    scrollIndicator = {
        ScrollIndicator(state = listState)
    }
) {
    // ...
}
Rotary.kt

Вы можете настроить поведение привязки для ScalingLazyColumn с помощью ScalingLazyColumnDefaults.snapFlingBehavior , как показано в следующем фрагменте кода:

val listState = rememberScalingLazyListState()
ScreenScaffold(
    scrollState = listState,
    scrollIndicator = {
        ScrollIndicator(state = listState)
    }
) {

    val state = rememberScalingLazyListState()
    ScalingLazyColumn(
        modifier = Modifier.fillMaxWidth(),
        state = state,
        flingBehavior = ScalingLazyColumnDefaults.snapFlingBehavior(state = state)
    ) {
        // Content goes here
        // ...
    }
}
Rotary.kt

Пользовательские действия

Вы также можете создавать пользовательские действия, которые реагируют на вращательный ввод в вашем приложении. Например, используйте вращательный ввод для увеличения и уменьшения масштаба или для управления громкостью в медиа-приложении.

Если ваш компонент изначально не поддерживает события прокрутки, такие как регулировка громкости, вы можете обрабатывать события прокрутки самостоятельно.

// VolumeScreen.kt

val focusRequester: FocusRequester = remember { FocusRequester() }

Column(
    modifier = Modifier
        .fillMaxSize()
        .onRotaryScrollEvent {
            // handle rotary scroll events
            true
        }
        .focusRequester(focusRequester)
        .focusable(),
) { ... }

Создайте пользовательское состояние, управляемое в модели представления, и пользовательский обратный вызов, который будет использоваться для обработки событий поворотной прокрутки.

// VolumeViewModel.kt

object VolumeRange(
    public val max: Int = 10
    public val min: Int = 0
)

val volumeState: MutableStateFlow<Int> = ...

fun onVolumeChangeByScroll(pixels: Float) {
    volumeState.value = when {
        pixels > 0 -> min (volumeState.value + 1, VolumeRange.max)
        pixels < 0 -> max (volumeState.value - 1, VolumeRange.min)
    }
}

Для простоты в предыдущем примере используются значения пикселей, которые при фактическом использовании, скорее всего, будут слишком чувствительны.

Используйте обратный вызов после получения событий, как показано в следующем фрагменте.

val focusRequester: FocusRequester = remember { FocusRequester() }
val volumeState by volumeViewModel.volumeState.collectAsState()

Column(
    modifier = Modifier
        .fillMaxSize()
        .onRotaryScrollEvent {
            volumeViewModel
                .onVolumeChangeByScroll(it.verticalScrollPixels)
            true
        }
        .focusRequester(focusRequester)
        .focusable(),
) { ... }