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 abaixo mostra como criar uma lista que contém texto para cada item:

val contentModifier = Modifier
    .fillMaxWidth()
    .padding(bottom = 8.dp)

@Composable
fun WearApp() {
    WearAppTheme {
        // Hoist the list state to remember scroll position across compositions.
        val listState = rememberScalingLazyListState()

        ScalingLazyColumn(
            modifier = Modifier.fillMaxSize(),
            autoCentering = AutoCenteringParams(itemIndex = 0),
            state = listState
        ) {
            item { TextItem(contentModifier, stringResource(R.string.first)) }
            item { TextItem(contentModifier, stringResource(R.string.second)) }
        }
    }
}

@Composable
fun TextItem(modifier: Modifier = Modifier, contents: String) {
    Text(
        modifier = modifier,
        textAlign = TextAlign.Center,
        text = contents
    )
}

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 a uma lista ou um seletor no seu app, inclua o parâmetro flingBehavior na definição de ScalingLazyColumn, conforme mostrado no snippet de código abaixo:

ScalingLazyColumn(
    modifier = modifier ...,
    flingBehavior = ScalingLazyColumnDefaults.snapFlingBehavior(
        state = listState,
        snapOffset = 0
        // Exponential decay by default. You can also explicitly define a
        // DecayAnimationSpec.
    ) {
        // Contents of the list here.
}

Para aplicar um comportamento semelhante de ajuste e deslize rápido a uma ScalingLazyColumn quando o usuário interage com um seletor giratório, use o RotaryWithSnap, disponível na Horologist no GitHub.