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 = { } ) } } }
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 ) { // ... // ... } }
Empfehlungen für dich
- Hinweis: Der Linktext wird angezeigt, wenn JavaScript deaktiviert ist.
- Für Wear OS-Codelab erstellen
- Listen und Raster
- Ansichten in „Compose“ verwenden