Listas con Compose para Wear OS

Las listas les permiten a los usuarios seleccionar un elemento de un conjunto de opciones en dispositivos Wear OS.

Muchos dispositivos Wear OS usan pantallas redondas, lo que dificulta la visualización de los elementos de la lista que aparecen cerca de la parte inferior y superior de la pantalla. Por este motivo, Compose para Wear OS incluye una versión de la clase LazyColumn llamada ScalingLazyColumn, que admite efectos de escalamiento y atenuación. Cuando los elementos se mueven hacia el centro de la pantalla, se hacen más grandes y más opacos.

En la siguiente animación, se muestra cómo cambian el tamaño y la transparencia de un elemento a medida que se mueve por la pantalla:

En el siguiente fragmento de código, se muestra cómo crear una lista con la versión de Horologist del diseño ScalingLazyColumn para crear contenido que se vea muy bien en una variedad de tamaños de pantalla de Wear OS. Por ejemplo, en el siguiente ejemplo, se agregará el padding necesario al primer y al último elemento de la lista que se establece en el scrollState de 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

Cómo agregar un efecto de ajustar y deslizar.

Puedes agregar un comportamiento de ajustar y deslizar a los gestos del dedo que el usuario aplique a objetos ScalingLazyColumn. Este efecto ayuda a los usuarios a navegar con mayor precisión por los elementos de una lista y, a la vez, agiliza su desplazamiento por listas largas.

Para agregar este efecto a la versión de ScalingLazyColumn de Horologist, establece el parámetro rotaryMode de columnState en RotaryWithSnap, como se muestra en el siguiente fragmento de código:

val columnState = rememberResponsiveColumnState(
    // ...
    // ...
    rotaryMode = ScalingLazyColumnState.RotaryMode.Snap
)
ScreenScaffold(scrollState = columnState) {
    ScalingLazyColumn(
        columnState = columnState
    ) {
        // ...
        // ...
    }
}
List.kt