Listen mit Compose für Wear OS

Mithilfe von Listen können Nutzer auf Wear OS-Geräten einen Artikel aus einer Reihe von Optionen auswählen.

Viele Wear OS-Geräte haben runde Bildschirme. Dadurch ist es schwieriger, Listenelemente zu sehen, die oben und unten auf dem Bildschirm angezeigt werden. Aus diesem Grund enthält Composer für Wear OS eine Version der LazyColumn-Klasse mit dem Namen ScalingLazyColumn, die Skalierungs- und Ausblendungseffekte unterstützt. Wenn sich Elemente zur Mitte des Bildschirms bewegen, werden sie größer und undurchsichtiger.

Die folgende Animation zeigt, wie sich Größe und Transparenz eines Elements ändern, wenn es sich auf dem Bildschirm bewegt:

Das folgende Code-Snippet zeigt, wie Sie eine Liste erstellen, die Text für jedes Element enthält:

val contentModifier = Modifier
    .fillMaxWidth()
    .padding(bottom = 8.dp)

@Composable
fun WearApp() {
    WearAppTheme {
        // Hoist the list state to remember scroll position across compositions.
        val listState = rememberScalingLazyListState()

        ScalingLazyColumn(
            modifier = Modifier.fillMaxSize(),
            autoCentering = AutoCenteringParams(itemIndex = 0),
            state = listState
        ) {
            item { TextItem(contentModifier, stringResource(R.string.first)) }
            item { TextItem(contentModifier, stringResource(R.string.second)) }
        }
    }
}

@Composable
fun TextItem(modifier: Modifier = Modifier, contents: String) {
    Text(
        modifier = modifier,
        textAlign = TextAlign.Center,
        text = contents
    )
}

Snap-and-Schiebe-Effekt hinzufügen

Du kannst Fingergesten, die der Nutzer auf ScalingLazyColumn-Objekte anwendet, ein Andocken und Klicken hinzufügen. Dieser Effekt hilft Nutzern, genauer durch die Elemente in einer Liste zu navigieren, und hilft ihnen gleichzeitig, schneller durch eine lange Liste zu navigieren.

Wenn Sie diesen Effekt einer Liste oder Auswahl in Ihrer App hinzufügen möchten, fügen Sie den Parameter flingBehavior in Ihre ScalingLazyColumn-Definition ein, wie im folgenden Code-Snippet gezeigt:

ScalingLazyColumn(
    modifier = modifier ...,
    flingBehavior = ScalingLazyColumnDefaults.snapFlingBehavior(
        state = listState,
        snapOffset = 0
        // Exponential decay by default. You can also explicitly define a
        // DecayAnimationSpec.
    ) {
        // Contents of the list here.
}

Um ein ähnliches Snap-and-Fing-Verhalten auf ein ScalingLazyColumn anzuwenden, wenn der Nutzer mit einem Drehknopf interagiert, verwenden Sie RotaryWithSnap, das in Horologist auf GitHub verfügbar ist.