Elenchi con Scrivi per Wear OS

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

Molti dispositivi Wear OS utilizzano schermi rotondi, il che rende più difficile vedere gli elementi dell'elenco che vengono visualizzati nella parte superiore e inferiore dello schermo. Per questo motivo, Compose for Wear OS include una versione della classe LazyColumn chiamata TransformingLazyColumn, che supporta le animazioni di ridimensionamento e morphing. Quando gli elementi si spostano verso i bordi, diventano più piccoli e sbiadiscono.

Per aggiungere un effetto di ridimensionamento e scorrimento, utilizza Modifier.transformedHeight per consentire a Compose di calcolare la variazione di altezza man mano che l'elemento scorre sullo schermo e transformation = SurfaceTransformation(transformationSpec) per applicare gli effetti visivi, incluso il ridimensionamento visivo dell'elemento in modo che corrisponda a quello precedente. Utilizza un TransformationSpec personalizzato per i componenti che non accettano transformation come parametro, ad esempio Text.

La seguente animazione mostra come cambiano le dimensioni e la trasparenza di un elemento mentre si sposta sullo schermo:

Il seguente snippet di codice mostra come creare un elenco utilizzando il layout TransformingLazyColumn per creare contenuti che hanno un aspetto ottimale su una vasta gamma di dimensioni dello schermo di Wear OS, ad esempio nel seguente codice di esempio, aggiungerà il padding necessario al primo e all'ultimo elemento dell'elenco impostati in contentPadding di TransformingLazyColumn. Affinché l'indicatore di scorrimento venga mostrato, condividi columnState tra ScreenScaffold e 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

Aggiungere un effetto di scatto e lancio

Se devi aggiungere un comportamento di scorrimento rapido, ti consigliamo di utilizzare ScalingLazyColumn. Questo effetto aiuta gli utenti a navigare in modo più preciso tra gli elementi di un elenco e a spostarsi più rapidamente in un elenco lungo.

Per aggiungere questo effetto alla versione di ScalingLazyColumn di Horologist, imposta il parametro rotaryMode di columnState su RotaryWithSnap, come mostrato nello snippet di codice seguente:

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