Listen mit Compose für Wear OS

Mit Listen können Nutzer auf Wear OS-Geräten ein Element aus einer Reihe von Optionen auswählen.

Viele Wear OS-Geräte haben runde Displays. Das macht es schwieriger, Listenelemente zu sehen, die oben und unten auf dem Display angezeigt werden. Aus diesem Grund enthält Compose for Wear OS eine Version der Klasse LazyColumn namens TransformingLazyColumn, die Skalierungs- und Morphing-Animationen unterstützt. Wenn Elemente an den Rand verschoben werden, werden sie kleiner und blenden aus.

So wenden Sie die empfohlenen Skalierungs- und Scrolling-Effekte an:

  1. Verwenden Sie Modifier.transformedHeight, damit Compose die Höhenänderung berechnen kann, während das Element durch den Bildschirm scrollt.
  2. Verwenden Sie transformation = SurfaceTransformation(transformationSpec), um die visuellen Effekte anzuwenden, einschließlich des Herunterskalierens des Inhalts des Elements.
  3. Verwenden Sie einen benutzerdefinierten TransformationSpec für Komponenten, die transformation nicht als Parameter akzeptieren, z. B. Text.

Die folgende Animation zeigt, wie sich ein Listenelement skaliert und seine Form ändert, wenn es sich dem oberen und unteren Bildschirmrand nähert:

Das folgende Code-Snippet zeigt, wie Sie mit dem Layout TransformingLazyColumn eine Liste erstellen, um Inhalte zu erstellen, die auf Wear OS-Bildschirmen verschiedener Größen gut aussehen.

Im Snippet wird auch der Modifikator minimumVerticalContentPadding verwendet, den Sie für die Listenelemente festlegen sollten, um das richtige Padding oben und unten in der Liste anzuwenden.

Wenn Sie die Scrollmarkierung einblenden möchten, teilen Sie columnState zwischen ScreenScaffold und TransformingLazyColumn auf:

val columnState = rememberTransformingLazyColumnState()
val transformationSpec = rememberTransformationSpec()
ScreenScaffold(
    scrollState = columnState
) { contentPadding ->
    TransformingLazyColumn(
        state = columnState,
        contentPadding = contentPadding
    ) {
        item {
            ListHeader(
                modifier = Modifier
                    .fillMaxWidth()
                    .transformedHeight(this, transformationSpec)
                    .minimumVerticalContentPadding(ListHeaderDefaults.minimumTopListContentPadding),
                transformation = SurfaceTransformation(transformationSpec)
            ) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(
                modifier = Modifier
                    .fillMaxWidth()
                    .transformedHeight(this, transformationSpec)
                    .minimumVerticalContentPadding(ButtonDefaults.minimumVerticalListContentPadding),
                transformation = SurfaceTransformation(transformationSpec),
                onClick = { /* ... */ },
                icon = {
                    Icon(
                        imageVector = Icons.Default.Build,
                        contentDescription = "build",
                    )
                },
            ) {
                Text(
                    text = "Build",
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis,
                )
            }
        }
    }
}
List.kt

Snap-and-Fling-Effekt hinzufügen

Wenn Sie ein Snap-and-Fling-Verhalten hinzufügen möchten, legen Sie den Parameter flingBehavior auf TransformingLazyColumnDefaults.snapFlingBehavior(columnState) fest, wie im folgenden Code-Snippet gezeigt: 
val columnState = rememberTransformingLazyColumnState()
ScreenScaffold(scrollState = columnState) {
    TransformingLazyColumn(
        state = columnState,
        flingBehavior = TransformingLazyColumnDefaults.snapFlingBehavior(columnState)
    ) {
        // ...
        // ...
    }
}
List.kt