Elenchi con Scrivi per Wear OS

Gli elenchi consentono agli utenti di selezionare un elemento da un insieme di scelte sui dispositivi Wear OS.

Molti dispositivi Wear OS utilizzano schermi rotondi, il che rende più difficile visualizzare gli elementi dell'elenco che appaiono vicino alla parte superiore e inferiore dello schermo. Per questo motivo, Compose for Wear OS include una versione della classe LazyColumn chiamata TransformingLazyColumn, che supporta animazioni di scalabilità e morphing. Quando gli elementi si spostano verso i bordi, diventano più piccoli e svaniscono.

Per applicare gli effetti di scalabilità e scorrimento consigliati:

  1. Utilizza Modifier.transformedHeight per consentire a Compose di calcolare la variazione dell'altezza mentre l'elemento scorre sullo schermo.
  2. Utilizza transformation = SurfaceTransformation(transformationSpec) per applicare gli effetti visivi, inclusa la riduzione della scalabilità dei contenuti dell'elemento.
  3. Utilizza un TransformationSpec personalizzato per i componenti che non accettano transformation come parametro, ad esempio Text.

L'animazione seguente mostra come un elemento dell'elenco viene scalato e cambia forma quando si avvicina alla parte superiore e inferiore dello schermo:

Il seguente snippet di codice mostra come creare un elenco utilizzando TransformingLazyColumn layout per creare contenuti che abbiano un aspetto ottimale su una varietà di dimensioni dello schermo di Wear OS.

Lo snippet mostra anche l'utilizzo del modificatore minimumVerticalContentPadding, che devi impostare sugli elementi dell'elenco per applicare il padding corretto nella parte superiore e inferiore dell'elenco.

Per mostrare l'indicatore di scorrimento, condividi columnState tra ScreenScaffold e 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

Aggiungere un effetto di scorrimento con blocco

Se devi aggiungere un comportamento di scorrimento con blocco, imposta il parametro flingBehavior su TransformingLazyColumnDefaults.snapFlingBehavior(columnState), come mostrato nel seguente snippet di codice: 
val columnState = rememberTransformingLazyColumnState()
ScreenScaffold(scrollState = columnState) {
    TransformingLazyColumn(
        state = columnState,
        flingBehavior = TransformingLazyColumnDefaults.snapFlingBehavior(columnState)
    ) {
        // ...
        // ...
    }
}
List.kt