Listas com o Compose para Wear OS

Listas permitem que os usuários selecionem um item de um conjunto de opções em dispositivos Wear OS.

Muitos dispositivos Wear OS usam telas redondas, o que dificulta a visualização de itens de lista que aparecem perto das partes de cima e de baixo da tela. Por esse motivo, o Compose para Wear OS inclui uma versão da classe LazyColumn chamada TransformingLazyColumn, que oferece suporte a animações de dimensionamento e transformação. Quando os itens se movem para as bordas, eles ficam menores e desaparecem.

Para adicionar um efeito de escalonamento e rolagem, use Modifier.transformedHeight para permitir que o Compose calcule a mudança de altura à medida que o item rola pela tela e transformation = SurfaceTransformation(transformationSpec) para aplicar os efeitos visuais, incluindo o escalonamento do item visualmente para corresponder ao anterior. Use um TransformationSpec personalizado para componentes que não usam transformation como parâmetro, por exemplo, Text.

A animação abaixo mostra como o tamanho e a transparência de um elemento mudam conforme ele se move pela tela:

O snippet de código a seguir mostra como criar uma lista usando o layout TransformingLazyColumn para criar conteúdo que fica ótimo em vários tamanhos de tela do Wear OS. Por exemplo, no código de exemplo a seguir, ele adiciona o padding necessário aos primeiros e últimos elementos da lista, que são definidos no contentPadding do TransformingLazyColumn. Para que o indicador de rolagem seja mostrado, compartilhe o columnState entre o ScreenScaffold e o 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

Adicionar um efeito de ajuste e deslize rápido

Se você precisar adicionar um comportamento de ajuste e movimento rápido, sugerimos usar ScalingLazyColumn. Esse efeito ajuda os usuários a navegar com mais precisão pelos itens de uma lista e, ao mesmo tempo, os ajuda a percorrer uma lista longa com mais rapidez.

Para adicionar esse efeito à versão do Horologist do ScalingLazyColumn, defina o parâmetro rotaryMode de columnState como RotaryWithSnap, conforme mostrado no snippet de código a seguir:

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