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 ScalingLazyColumn, que oferece suporte a efeitos de dimensionamento e esmaecimento. Quando os itens se movem em direção ao centro da tela, eles ficam maiores e mais opacos.

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 a função versão do layout ScalingLazyColumn para criar conteúdo que funciona bem em vários tamanhos de tela do Wear OS, por exemplo, exemplo abaixo, ele adicionará o padding necessário ao primeiro e ao último elementos da lista definida no scrollState do ScalingLazyColumn:

val columnState = rememberResponsiveColumnState(
    contentPadding = ScalingLazyColumnDefaults.padding(
        first = ScalingLazyColumnDefaults.ItemType.Text,
        last = ScalingLazyColumnDefaults.ItemType.SingleButton
    )
)
ScreenScaffold(scrollState = columnState) {
    ScalingLazyColumn(
        columnState = columnState
    ) {
        item {
            ResponsiveListHeader(contentPadding = firstItemPadding()) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(
                imageVector = Icons.Default.Build,
                contentDescription = "Example Button",
                onClick = { }
            )
        }
    }
}
List.kt

Adicionar um efeito de ajuste e deslize rápido

É possível adicionar um comportamento de ajuste e deslize rápido a gestos de dedo que o usuário aplica a objetos 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 de ScalingLazyColumn do Horologist, 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