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 = { } ) } } }
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 ) { // ... // ... } }
Recomendados para você
- Observação: o texto do link aparece quando o JavaScript está desativado.
- Codelab sobre o Compose para Wear OS
- Listas e grades
- Como usar visualizações no Compose