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 aplicar os efeitos de rolagem e escalonamento recomendados:

  1. Use Modifier.transformedHeight para permitir que o Compose calcule a mudança de altura à medida que o item rola pela tela.
  2. Use transformation = SurfaceTransformation(transformationSpec) para aplicar os efeitos visuais, incluindo a redução do conteúdo do item.
  3. Use um TransformationSpec personalizado para componentes que não usam transformation como parâmetro, como Text.

A animação a seguir mostra como um elemento de lista é dimensionado e muda de forma ao se aproximar da parte de cima e de baixo da 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.

O snippet também demonstra o uso do modificador minimumVerticalContentPadding, que deve ser definido nos itens da lista para aplicar o padding correto na parte de cima e de baixo da lista.

Para mostrar o indicador de rolagem, compartilhe o columnState entre o ScreenScaffold e o 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

Adicionar um efeito de ajuste e deslize rápido

Se você precisar adicionar um comportamento de ajuste e deslize, defina o parâmetro flingBehavior como TransformingLazyColumnDefaults.snapFlingBehavior(columnState), conforme mostrado no snippet de código a seguir: 
val columnState = rememberTransformingLazyColumnState()
ScreenScaffold(scrollState = columnState) {
    TransformingLazyColumn(
        state = columnState,
        flingBehavior = TransformingLazyColumnDefaults.snapFlingBehavior(columnState)
    ) {
        // ...
        // ...
    }
}
List.kt