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 appliquer les effets de mise à l'échelle et de défilement recommandés :

  1. Utilisez Modifier.transformedHeight pour permettre à Compose de calculer la modification de la hauteur lorsque l'élément défile sur l'écran.
  2. Utilisez transformation = SurfaceTransformation(transformationSpec) pour appliquer les effets visuels, y compris la réduction de la taille du contenu de l'élément.
  3. Utilisez un TransformationSpec personnalisé pour les composants qui n'acceptent pas transformation comme paramètre, tels que Text.

L'animation suivante montre comment un élément de liste est mis à l'échelle et change de forme lorsqu'il s'approche du haut et du bas de l'écran :

L'extrait de code suivant montre comment créer une liste à l'aide de TransformingLazyColumn mise en page pour créer du contenu qui s'affiche correctement sur différentes tailles d'écran Wear OS.

L'extrait montre également l'utilisation du modificateur minimumVerticalContentPadding, que vous devez définir sur les éléments de la liste pour appliquer le remplissage correct en haut et en bas de la liste.

Pour afficher l'indicateur de défilement, partagez le columnState entre le ScreenScaffold et le TransformingLazyColumn :

val columnState = rememberTransformingLazyColumnState()
val transformationSpec = rememberTransformationSpec()
ScreenScaffold(
    scrollState = columnState
) { contentPadding ->
    TransformingLazyColumn(
        state = columnState,
        contentPadding = contentPadding
    ) {
        item {
            ListHeader(
                modifier = Modifier
                    .fillMaxWidth()
                    .transformedHeight(this, transformationSpec)
                    .minimumVerticalContentPadding(ListHeaderDefaults.minimumTopListContentPadding),
                transformation = SurfaceTransformation(transformationSpec)
            ) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(
                modifier = Modifier
                    .fillMaxWidth()
                    .transformedHeight(this, transformationSpec)
                    .minimumVerticalContentPadding(ButtonDefaults.minimumVerticalListContentPadding),
                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'ancrage et de glissement, définissez le paramètre flingBehavior sur TransformingLazyColumnDefaults.snapFlingBehavior(columnState), comme indiqué dans l'extrait de code suivant : 
val columnState = rememberTransformingLazyColumnState()
ScreenScaffold(scrollState = columnState) {
    TransformingLazyColumn(
        state = columnState,
        flingBehavior = TransformingLazyColumnDefaults.snapFlingBehavior(columnState)
    ) {
        // ...
        // ...
    }
}
List.kt