Wprowadzanie obrotowe z funkcją tworzenia

Pokrętło to element zegarka, który można obracać. Średnio użytkownicy spędzają tylko kilka sekund na korzystaniu z zegarka. Możesz poprawić komfort użytkowników, korzystając z wejścia obrotowego, aby umożliwić im szybkie wykonywanie różnych zadań.

Trzy główne źródła danych wejściowych obrotowych na większości zegarków to obrotowy przycisk boczny (RSB) oraz fizyczna lub dotykowa ramka, czyli okrągła strefa dotykowa wokół ekranu. Oczekiwane działanie może się różnić w zależności od typu danych wejściowych, ale pamiętaj, aby obsługiwać sterowanie obrotowe w przypadku wszystkich podstawowych interakcji.

Przewiń

Większość użytkowników oczekuje, że aplikacje będą obsługiwać gest przewijania. Gdy treść przewija się na ekranie, przekazuj użytkownikom wizualne informacje zwrotne w odpowiedzi na interakcje z elementem obrotowym. Informacje wizualne mogą obejmować wskaźniki przewijania w przypadku przewijania w pionie lub wskaźniki stron.

ScalingLazyColumn, TransformingLazyColumn i Picker domyślnie obsługują gest przewijania, o ile umieścisz te komponenty w AppScaffold i ScreenScaffold oraz przekażesz stan listy między ScreenScaffold a komponentem, np. TransformingLazyColumn.

AppScaffold i ScreenScaffold zapewniają podstawową strukturę układu aplikacji na Wear OS i mają już miejsce na wskaźnik przewijania z domyślną implementacją. Aby dostosować postęp przewijania, utwórz wskaźnik przewijania na podstawie obiektu stanu listy, jak pokazano w tym fragmencie kodu:

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

Możesz skonfigurować zachowanie przyciągania dla elementu ScalingLazyColumn za pomocą elementu ScalingLazyColumnDefaults.snapFlingBehavior, jak pokazano w tym fragmencie kodu:

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

Działania niestandardowe

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

Jeśli komponent nie obsługuje natywnie zdarzeń przewijania, takich jak regulacja 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 stan niestandardowy zarządzany w modelu widoku i niestandardowe wywołanie zwrotne, które będzie używane do przetwarzania zdarzeń przewijania za pomocą pokrętła.

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

W przykładzie powyżej użyto wartości pikseli, które w praktyce prawdopodobnie byłyby zbyt czułe.

Użyj wywołania zwrotnego po otrzymaniu zdarzeń, 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(),
) { ... }