Elenchi con Scrivi per Wear OS

Compose for Wear OS Material versione 2.5 3

---

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 vedere gli elementi dell'elenco che appaiono nella 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 trasformazione. 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 man mano che 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

Il blocco garantisce che, quando un utente termina un gesto di scorrimento o di scorrimento rapido, l'elenco si stabilizzi con un elemento posizionato con precisione in un punto specifico, in genere al centro dello schermo. Sugli schermi rotondi, in cui gli elementi vengono scalati e trasformati man mano che si allontanano dal centro, il blocco è particolarmente utile per garantire che l'elemento più pertinente rimanga completamente visibile e leggibile nell'area di visualizzazione ottimale.

Per aggiungere un comportamento di scorrimento con blocco, imposta il parametro flingBehavior su TransformingLazyColumnDefaults.snapFlingBehavior(columnState). Imposta rotaryScrollableBehavior in modo che corrisponda, utilizzando RotaryScrollableDefaults.snapBehavior(columnState) per un'esperienza coerente quando utilizzi la corona o la ghiera fisica.

val columnState = rememberTransformingLazyColumnState()
ScreenScaffold(scrollState = columnState) { contentPadding ->
    TransformingLazyColumn(
        state = columnState,
        flingBehavior = TransformingLazyColumnDefaults.snapFlingBehavior(columnState),
        rotaryScrollableBehavior = RotaryScrollableDefaults.snapBehavior(columnState)
    ) {
        // ...
        // ...
    }
}
List.kt

Layout inverso

Per impostazione predefinita, un elenco scorrevole si ancora al bordo superiore. Se un utente ha scorre fino alla fine di un elenco standard e viene aggiunto un nuovo elemento alla fine, l'elenco mantiene la visualizzazione dell'utente sull'elemento corrente. Ad esempio, se l'utente sta visualizzando l'elemento 10 nella parte inferiore dello schermo e viene aggiunto l'elemento 11, la visualizzazione rimane incentrata sull'elemento 10 e l'elemento 11 viene visualizzato fuori schermo sotto la visualizzazione corrente.

Per casi d'uso come le applicazioni di messaggistica o i log live, questo comportamento in genere non è desiderato. Quando arrivano nuovi elementi, gli utenti in genere vogliono vedere immediatamente i contenuti più recenti se si trovano già alla fine dell'elenco. Se arrivano molti elementi contemporaneamente, l'elenco deve saltare per visualizzare l'elemento più recente in basso (il che significa che alcuni elementi intermedi potrebbero non essere visualizzati affatto a meno che l'utente non scorra verso l'alto).

Per supportare questi casi d'uso, TransformingLazyColumn ti consente di invertire il layout impostando reverseLayout = true. In questo modo, l'ancoraggio dell'elenco passa dal bordo superiore al bordo inferiore.

Per comodità, l'impostazione di reverseLayout = true inverte anche l'ordine visivo degli elementi e la direzione dei gesti di scorrimento:

• Gli elementi sono composti dal basso verso l'alto, il che significa che l'indice 0 viene visualizzato nella parte inferiore dello schermo.
• Lo scorrimento verso l'alto mostra gli elementi con indici più elevati.

Per aggiungere un comportamento di scorrimento con blocco insieme al layout inverso, puoi combinare flingBehavior e rotaryScrollableBehavior come mostrato nel seguente snippet:

val columnState = rememberTransformingLazyColumnState()
val transformationSpec = rememberTransformationSpec()
ScreenScaffold(scrollState = columnState) { contentPadding ->
    TransformingLazyColumn(
        state = columnState,
        contentPadding = contentPadding,
        reverseLayout = true,
        modifier = Modifier.fillMaxWidth()
    ) {
        items(10) { index ->
            Button(
                label = {
                    Text(
                        text = "Item ${index + 1}"
                    )
                },
                onClick = {},
                modifier = Modifier
                    .fillMaxWidth()
                    .transformedHeight(this, transformationSpec)
                    .minimumVerticalContentPadding(ButtonDefaults.minimumVerticalListContentPadding),
                transformation = SurfaceTransformation(transformationSpec)
            )
        }
        item {
            // With reverseLayout = true, the last item declared appears at the top.
            ListHeader(
                modifier = Modifier
                    .fillMaxWidth()
                    .transformedHeight(this, transformationSpec)
                    .minimumVerticalContentPadding(ListHeaderDefaults.minimumTopListContentPadding),
                transformation = SurfaceTransformation(transformationSpec)
            ) {
                Text("Header")
            }
        }
    }
}
List.kt

Le immagini seguenti mostrano la differenza tra un elenco normale e un elenco invertito:

Figura 1. Un layout di elenco standard in cui i contenuti vengono riempiti dall'alto verso il basso.

Figura 2. Un layout di elenco invertito in cui i contenuti vengono riempiti dal basso verso l'alto.

Pulsanti sui bordi degli elenchi

Per Material 3, puoi aggiungere un EdgeButton, ovvero un pulsante che si trova sul bordo inferiore degli elenchi. Tuttavia, fai attenzione a non aggiungerlo come elemento all'interno di TransformingLazyColumn, ma utilizza lo slot edgeButton in ScreenScaffold.

L'utilizzo dello slot edgeButton garantisce che il pulsante sia posizionato correttamente nella parte inferiore dello schermo e si comporti in modo appropriato quando l'elenco viene scorre.

Il seguente snippet di codice mostra come implementare EdgeButton:

val columnState = rememberTransformingLazyColumnState()
ScreenScaffold(
    scrollState = columnState,
    edgeButton = {
        EdgeButton(
            onClick = { /* TODO */ },
            modifier = Modifier.scrollable(
                columnState,
                orientation = Orientation.Vertical,
                reverseDirection = true,
                // Apply overscroll to the EdgeButton for proper scrolling behavior.
                overscrollEffect = rememberOverscrollEffect(),
            )
        ) {
            Text("More")
        }
    }
) { contentPadding ->
    TransformingLazyColumn(
        contentPadding = contentPadding,
        state = columnState,
    ) {
        // ...
        // ...
    }
}
List.kt

SwipeToReveal negli elenchi

Il componente SwipeToReveal ti consente di accedere alle azioni per un elemento dell'elenco, ad esempio un Card o un Chip, scorrendo. Lo scorrimento in genere rivela uno o due pulsanti di azione (ad esempio "Elimina" o "Altro") dal lato.

Quando utilizzi SwipeToReveal all'interno di un TransformingLazyColumn, segui queste linee guida:

• Reimposta allo scorrimento: quando l'utente scorre l'elenco, reimposta tutti gli elementi aperti con lo scorrimento allo stato coperto.
• Altezze coerenti: imposta le altezze dei pulsanti di azione in modo che corrispondano all'elemento interno scorrevole (che sia un Button o un Card) per garantire un aspetto coerente.
• Trasforma il container: applica il modificatore transformedHeight e transformationSpec al componente SwipeToReveal stesso.
• Non trasformare due volte: non applicare i modificatori transformedHeight o transformation all'elemento interno scorrevole (la scheda o il pulsante all'interno del container SwipeToReveal).