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 Displays, wodurch die Sichtbarkeit erschwert wird Elemente aufgelistet, die oben und unten auf dem Bildschirm angezeigt werden. Aus diesem Grund Compose for Wear OS enthält eine Version der LazyColumn-Klasse namens ScalingLazyColumn für Skalierungs- und Ausblendungseffekte Wenn Elemente zur Bildschirmmitte bewegen, werden sie größer und undurchsichtiger.

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

Das folgende Code-Snippet zeigt, wie Sie mithilfe der Funktion ScalingLazyColumn-Layouts, um Inhalte zu erstellen, die sieht gut auf verschiedenen Wear OS-Bildschirmgrößen aus, zum Beispiel in der Beispiel unten wird der erforderliche Abstand zwischen dem ersten und dem letzten Element der Liste, die in den scrollState der ScalingLazyColumn festgelegt sind:

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

Sie können den Fingergesten, die der Nutzer anwendet, eine Funktion zum Andocken und Kippen hinzufügen. auf ScalingLazyColumn Objekte. Dieser Effekt hilft Nutzenden, sich die Elemente in einer Liste durchgehen und gleichzeitig schneller durch eine Liste navigieren können. lange Liste.

So fügst du der Horologenversion von ScalingLazyColumn diesen Effekt hinzu: rotaryMode 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