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 TransformingLazyColumn, qui prend en charge les animations de mise à l'échelle et de morphing. Lorsque les éléments se déplacent vers les bords, ils deviennent plus petits et s'estompent.

Pour ajouter un effet de mise à l'échelle et de défilement, utilisez Modifier.transformedHeight pour permettre à Compose de calculer la modification de la hauteur lorsque l'élément défile sur l'écran et transformation = SurfaceTransformation(transformationSpec) pour appliquer les effets visuels, y compris la réduction visuelle de l'élément pour qu'il corresponde à la hauteur précédente. Utilisez un TransformationSpec personnalisé pour les composants qui ne prennent pas transformation comme paramètre, par exemple Text.

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 mise en page TransformingLazyColumn pour créer du contenu qui s'affiche correctement sur différentes tailles d'écran Wear OS. Par exemple, dans l'extrait de code suivant, il ajoutera la marge intérieure nécessaire aux premier et dernier éléments de la liste, qui sont définis dans le contentPadding du TransformingLazyColumn. Pour que l'indicateur de défilement s'affiche, partagez columnState entre ScreenScaffold et TransformingLazyColumn :

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

Ajouter un effet d'ancrage et de glissement

Si vous devez ajouter un comportement d'accrochage et de balayage, nous vous suggérons d'utiliser 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 de 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