Listes avec Compose pour Wear OS

Grâce aux listes, les utilisateurs peuvent faire leur choix parmi un ensemble d'éléments sur des appareils Wear OS.

De nombreux appareils Wear OS utilisent des écrans ronds, ce qui rend plus difficile la visibilité des éléments de liste qui apparaissent en haut et en bas de l'écran. C'est la raison pour laquelle Compose pour Wear OS inclut une version de la classe LazyColumn appelée ScalingLazyColumn, qui prend en charge les effets de mise à l'échelle et de fondu. Lorsque les éléments se déplacent vers le centre de l'écran, ils deviennent plus grands et plus opaques.

L'animation suivante montre comment la taille et la transparence d'un élément changent à mesure qu'il se déplace sur l'écran :

L'extrait de code suivant montre comment créer une liste à l'aide de la méthode de la mise en page ScalingLazyColumn pour créer du contenu est parfaitement adaptée à différentes tailles d'écran de Wear OS, par exemple dans l'exemple ci-dessous, elle ajoutera la marge intérieure nécessaire aux premier et dernier éléments de la liste définies dans le scrollState du ScalingLazyColumn:

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

Ajouter un effet d'ancrage et de glissement

Vous pouvez ajouter un comportement d'ancrage et de glissement aux gestes des doigts que l'utilisateur applique aux objets ScalingLazyColumn. Cet effet aide les utilisateurs à parcourir les éléments d'une liste avec plus de précision, et à se déplacer plus rapidement dans les listes longues.

Pour ajouter cet effet à la version Horologist, procédez comme suit : ScalingLazyColumn : définissez le paramètre rotaryMode de columnState sur RotaryWithSnap, comme indiqué dans l'extrait de code suivant:

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