Wprowadzanie obrotowe z funkcją tworzenia

Pokrętło to dane pochodzące z elementów zegarka, które się obracają. Użytkownicy poświęcają na obsługę zegarka średnio tylko kilka sekund. Możesz zwiększyć wygodę użytkowników, umożliwiając im szybkie wykonywanie różnych zadań za pomocą pokrętła.

W większości zegarków 3 główne źródła obrotowego wejścia to obracający się przycisk boczny (RSB) oraz ramka dotykowa lub ramka dotykowa, czyli okrągła strefa dotykowa wokół ekranu. Chociaż oczekiwane działanie może się różnić w zależności od typu wejścia, należy obsługiwać wejście obrotowe we wszystkich istotnych interakcjach.

Przewiń

Większość użytkowników oczekuje, że aplikacje będą obsługiwać gest przewijania. Podczas przewijania treści na ekranie wyświetlaj użytkownikom wizualne informacje zwrotne w reakcji na interakcje z elementem obrotowym. Wizualne informacje zwrotne mogą obejmować wskaźniki pozycji w przypadku przewijania w kierunku pionowym lub wskaźniki strony.

Komponenty ScalingLazyColumn i Picker obsługują domyślnie gest przewijania, o ile chcesz umieścić je w komponencie Scaffold. Scaffoldzapewnia podstawową strukturę układu dla aplikacji na Wear OS i zawiera już miejsce na wskaźnik przewijania. Aby wyświetlić postęp przewijania, utwórz wskaźnik pozycji na podstawie obiektu stanu listy, jak pokazano w tym fragmencie kodu:

val listState = rememberScalingLazyListState()
Scaffold(
    positionIndicator = {
        PositionIndicator(scalingLazyListState = listState)
    }
) {
    // ...
}
Rotary.kt

Aby skonfigurować zachowanie przyciągania dla ScalingLazyColumn, użyj elementu ScalingLazyColumnDefaults.snapFlingBehavior, jak pokazano w tym fragmencie kodu:

val listState = rememberScalingLazyListState()
Scaffold(
    positionIndicator = {
        PositionIndicator(scalingLazyListState = listState)
    }
) {

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

Działania niestandardowe

Możesz też tworzyć w aplikacji własne działania, które będą reagować na pokrętło. Możesz na przykład używać pokrętła do powiększania i pomniejszania obrazu lub do sterowania głośnością w aplikacji multimedialnej.

Jeśli Twój komponent nie obsługuje natywnych zdarzeń przewijania, takich jak sterowanie głośnością, możesz samodzielnie obsługiwać zdarzenia przewijania.

// VolumeScreen.kt

val focusRequester: FocusRequester = remember { FocusRequester() }

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

Utwórz niestandardowy stan zarządzany w modelu widoku oraz niestandardową funkcję wywołania, która służy do przetwarzania zdarzeń przewijania za pomocą kółka.

// 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)
    }
}

Ze względu na prostotę w powyższym przykładzie użyto wartości pikseli, które w rzeczywistości są zbyt czułe.

Po otrzymaniu zdarzeń użyj wywołania zwrotnego, jak pokazano w tym fragmencie kodu.

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

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