Wprowadzanie obrotowe z funkcją tworzenia

Pokrętło to dane pochodzące z elementów zegarka, które obracają się lub kręcą. Użytkownicy poświęcają średnio tylko kilka sekund na interakcję z zegarkiem. Możesz zwiększyć wygodę użytkownika, umożliwiając mu korzystanie z elementu sterującego obrotowego, aby szybko wykonywać różne zadania.

W większości zegarków 3 główne źródła obrotowego wejścia to obracający się przycisk boczny (RSB) oraz fizyczna lub dotykowa ramka, czyli okrągła strefa dotykowa wokół ekranu. Choć oczekiwane działanie może się różnić w zależności od typu danych wejściowych, pamiętaj, aby obsługiwać pokrętło w przypadku wszystkich niezbędnych interakcji.

Przewiń

Większość użytkowników oczekuje, że aplikacje będą obsługiwać gest przewijania. W miarę jak treści przewijają się na ekranie, wyświetlaj użytkownikom informacje wizualne w odpowiedzi na interakcje z nimi. 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 trzeba 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 pokazać 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

Działanie przyciągania dla elementu ScalingLazyColumn możesz skonfigurować za pomocą parametru 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 natywnie nie obsługuje zdarzeń przewijania, takich jak regulacja głośności, możesz obsługiwać je samodzielnie.

// 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 danych i niestandardowe wywołanie zwrotne, które będzie używane do przetwarzania zdarzeń przewijania rotacji.

// 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.

Wywołanie zwrotne po otrzymaniu zdarzeń, jak pokazano w tym fragmencie.

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

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