Listen mit Compose für Wear OS

Über 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 Bildschirme, was es schwieriger macht, Listenelemente oben und unten auf dem Bildschirm zu sehen. 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 gelangen, werden sie kleiner und verblassen.

Wenn Sie einen Skalierungs- und Scrolleffekt hinzufügen möchten, verwenden Sie Modifier.transformedHeight, um Compose die Berechnung der Höhenänderung zu ermöglichen, während das Element über den Bildschirm scrollt, und transformation = SurfaceTransformation(transformationSpec), um die visuellen Effekte anzuwenden, einschließlich der visuellen Verkleinerung des Elements, damit es dem vorherigen entspricht.

In der folgenden Animation wird gezeigt, wie sich die Größe und Transparenz eines Elements ändert, während es sich über den Bildschirm bewegt:

Im folgenden Code-Snippet wird gezeigt, wie Sie eine Liste mit dem Layout TransformingLazyColumn erstellen, um Inhalte zu erstellen, die auf einer Vielzahl von Wear OS-Bildschirmgrößen gut aussehen. Im folgenden Beispielcode wird dem ersten und letzten Element der Liste, die im contentPadding der TransformingLazyColumn festgelegt sind, das erforderliche Abstandselement hinzugefügt. Damit der Bildlaufindikator angezeigt wird, muss der Wert „columnState“ zwischen „ScreenScaffold“ und „TransformingLazyColumn“ aufgeteilt werden:

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. Dieser Effekt hilft Nutzern, die Elemente in einer Liste genauer zu durchsuchen und sich schneller durch eine lange Liste zu bewegen.

Wenn Sie diesen Effekt der Version der ScalingLazyColumn des Uhrmachers hinzufügen möchten, legen Sie den rotaryMode-Parameter 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