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.
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