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 visualizzati nella parte superiore e inferiore dello schermo. Per questo motivo, Compose per 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 si attenuano.

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 dell'elemento in modo che corrisponda a quello precedente.

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

Il seguente snippet di codice mostra come creare un elenco utilizzando il layout TransformingLazyColumn per creare contenuti che appaiano perfettamente su una serie di dimensioni dello schermo Wear OS. Ad esempio, nel seguente codice di esempio, verrà aggiunto il padding necessario al primo e all'ultimo elemento dell'elenco impostati nel contentPadding del TransformingLazyColumn. Affinché l'indicatore di scorrimento venga visualizzato, 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 scatto e lancio

Se devi aggiungere un comportamento di aggancio e lancio, ti consigliamo di utilizzare ScalingLazyColumn. Questo effetto aiuta gli utenti a navigare con maggiore precisione 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