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 sich oben und unten auf dem Display befinden. 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.

Wenn Sie einen Skalierungs- und Scrolling-Effekt hinzufügen möchten, verwenden Sie Modifier.transformedHeight, damit Compose die Höhenänderung berechnen kann, während das Element auf dem Bildschirm gescrollt wird, und transformation = SurfaceTransformation(transformationSpec), um die visuellen Effekte anzuwenden, einschließlich der visuellen Verkleinerung des Elements, damit es zum vorherigen passt. Verwenden Sie einen benutzerdefinierten TransformationSpec für Komponenten, die transformation nicht als Parameter verwenden, 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 Inhalte erstellen, die auf verschiedenen Wear OS-Displaygrößen gut aussehen. Im folgenden Beispielcode wird beispielsweise das erforderliche Padding für das erste und das letzte Element der Liste hinzugefügt, die im contentPadding des TransformingLazyColumn festgelegt sind. Damit die Scrollanzeige angezeigt wird, müssen Sie columnState zwischen ScreenScaffold und TransformingLazyColumn aufteilen:

val columnState = rememberTransformingLazyColumnState()
val contentPadding = rememberResponsiveColumnPadding(
    first = ColumnItemType.ListHeader,
    last = ColumnItemType.Button,
)
val transformationSpec = rememberTransformationSpec()
ScreenScaffold(
    scrollState = columnState,
    contentPadding = contentPadding
) { contentPadding ->
    TransformingLazyColumn(
        state = columnState,
        contentPadding = contentPadding
    ) {
        item {
            ListHeader(
                modifier = Modifier.fillMaxWidth().transformedHeight(this, transformationSpec),
                transformation = SurfaceTransformation(transformationSpec)
            ) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(
                modifier = Modifier.fillMaxWidth().transformedHeight(this, transformationSpec),
                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, empfehlen wir die Verwendung von ScalingLazyColumn. So können Nutzer die Elemente in einer Liste genauer durchgehen und sich gleichzeitig schneller durch eine lange Liste bewegen.

Wenn Sie diesen Effekt der Horologist-Version von ScalingLazyColumn hinzufügen möchten, legen Sie den Parameter rotaryMode von columnState auf RotaryWithSnap fest, wie im folgenden Code-Snippet gezeigt:

val columnState = rememberResponsiveColumnState(
    // ...
    // ...
    rotaryMode = ScalingLazyColumnState.RotaryMode.Snap
)
ScreenScaffold(scrollState = columnState) {
    ScalingLazyColumn(
        columnState = columnState
    ) {
        // ...
        // ...
    }
}
List.kt