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 mit der Horologen-Version des ScalingLazyColumn-Layouts eine Liste erstellen, um Inhalte zu erstellen, die auf verschiedenen Wear OS-Bildschirmgrößen gut aussehen. Im Beispiel unten werden die erforderlichen Innenabstände für das erste und das letzte Element der Liste hinzugefügt, die in scrollState des ScalingLazyColumn festgelegt werden:

val columnState = rememberResponsiveColumnState(
    contentPadding = ScalingLazyColumnDefaults.padding(
        first = ScalingLazyColumnDefaults.ItemType.Text,
        last = ScalingLazyColumnDefaults.ItemType.SingleButton
    )
)
ScreenScaffold(scrollState = columnState) {
    ScalingLazyColumn(
        columnState = columnState
    ) {
        item {
            ResponsiveListHeader(contentPadding = firstItemPadding()) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(
                imageVector = Icons.Default.Build,
                contentDescription = "Example Button",
                onClick = { }
            )
        }
    }
}
List.kt

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 der Horologen-Version von ScalingLazyColumn hinzufügen möchten, setzen Sie den rotaryMode-Parameter von columnState auf RotaryWithSnap, wie im folgenden Code-Snippet gezeigt:

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