Rotierende Eingabe mit „Compose“

Drehknopf bezieht sich auf Eingaben über Teile deiner Smartwatch, die sich drehen. Im Durchschnitt interagieren Nutzer nur wenige Sekunden mit ihrer Smartwatch. Mit dem Dreheingabe-Controller können Sie die Nutzerfreundlichkeit verbessern, da Nutzer damit verschiedene Aufgaben schnell erledigen können.

Die drei wichtigsten Quellen für die Dreheingabe auf den meisten Smartwatches sind die drehbare Seitentaste (Rotating Side Button, RSB) und entweder eine physische Lünette oder eine Touch-Lünette, die eine kreisförmige Touch-Zone um das Display herum ist. Das erwartete Verhalten kann je nach Art der Eingabe variieren. Achten Sie jedoch darauf, dass die Dreheingabe für alle wichtigen Interaktionen unterstützt wird.

Scrollen

Die meisten Nutzer erwarten, dass Apps das Scrollen unterstützen. Gib Nutzern visuelles Feedback, wenn sie den Drehknopf verwenden, während Inhalte auf dem Bildschirm gescrollt werden. Visuelles Feedback kann Scrollindikatoren für vertikales Scrollen oder Seitenindikatoren umfassen.

ScalingLazyColumn, TransformingLazyColumn und Picker unterstützen standardmäßig die Scroll-Geste, sofern Sie diese Komponenten in AppScaffold und ScreenScaffold platzieren und den Listenstatus zwischen ScreenScaffold und der Komponente, z. B. einem TransformingLazyColumn, übergeben.

AppScaffold und ScreenScaffold bieten die grundlegende Layoutstruktur für Wear OS-Apps und enthalten bereits einen Slot für eine Scrollanzeige mit einer Standardimplementierung. Wenn Sie den Fortschritt des Scrollens anpassen möchten, erstellen Sie einen Scrollindikator basierend auf dem Listenstatusobjekt, wie im folgenden Code-Snippet gezeigt:

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

Sie können ein Einrastverhalten für ScalingLazyColumn mit ScalingLazyColumnDefaults.snapFlingBehavior konfigurieren, wie im folgenden Code-Snippet gezeigt:

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

Benutzerdefinierte Aktionen

Sie können auch benutzerdefinierte Aktionen erstellen, die auf die Drehknopf-Eingabe in Ihrer App reagieren. Sie können die Drehknopf-Eingabe beispielsweise verwenden, um in einer Media-App zu zoomen oder die Lautstärke zu regeln.

Wenn deine Komponente keine Scroll-Ereignisse wie die Lautstärkeregelung unterstützt, kannst du Scroll-Ereignisse selbst verarbeiten.

// VolumeScreen.kt

val focusRequester: FocusRequester = remember { FocusRequester() }

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

Erstellen Sie einen benutzerdefinierten Status, der im Ansichtsmodell verwaltet wird, und einen benutzerdefinierten Callback, der zum Verarbeiten von Drehscroll-Ereignissen verwendet wird.

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

Der Einfachheit halber werden im vorherigen Beispiel Pixelwerte verwendet, die bei tatsächlicher Verwendung wahrscheinlich zu empfindlich wären.

Verwenden Sie den Callback, sobald Sie die Ereignisse empfangen haben, wie im folgenden Snippet gezeigt.

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

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