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 API de Horologist versión del diseño ScalingLazyColumn para crear contenido que se ve muy bien en varios tamaños de pantalla de Wear OS, por ejemplo, en la ejemplo a continuación, agregará el padding necesario a los primeros y últimos elementos de la lista, que se establecen 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 Horologist de la ScalingLazyColumn, haz lo siguiente: 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