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 TransformingLazyColumn, que admite animaciones de escalamiento y transformación. Cuando los elementos se mueven hacia los bordes, se hacen más pequeños y se atenúan.

Para agregar un efecto de desplazamiento y ajuste de escala, usa Modifier.transformedHeight para permitir que Compose calcule el cambio de altura a medida que el elemento se desplaza por la pantalla y transformation = SurfaceTransformation(transformationSpec) para aplicar los efectos visuales, incluido el ajuste de escala visual del elemento para que coincida con el anterior. Usa un TransformationSpec personalizado para los componentes que no toman transformation como parámetro, por ejemplo, Text.

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 el diseño TransformingLazyColumn para crear contenido que se vea bien en una variedad de tamaños de pantalla de Wear OS. Por ejemplo, en el siguiente código de muestra, se agregará el padding necesario a los primeros y últimos elementos de la lista que se establecen en el contentPadding del TransformingLazyColumn. Para que se muestre el indicador de desplazamiento, comparte el columnState entre el ScreenScaffold y el TransformingLazyColumn:

val columnState = rememberTransformingLazyColumnState()
val contentPadding = rememberResponsiveColumnPadding(
    first = ColumnItemType.ListHeader,
    last = ColumnItemType.Button,
)
val transformationSpec = rememberTransformationSpec()
ScreenScaffold(
    scrollState = columnState,
    contentPadding = contentPadding
) { contentPadding ->
    TransformingLazyColumn(
        state = columnState,
        contentPadding = contentPadding
    ) {
        item {
            ListHeader(
                modifier = Modifier.fillMaxWidth().transformedHeight(this, transformationSpec),
                transformation = SurfaceTransformation(transformationSpec)
            ) {
                Text(text = "Header")
            }
        }
        // ... other items
        item {
            Button(
                modifier = Modifier.fillMaxWidth().transformedHeight(this, transformationSpec),
                transformation = SurfaceTransformation(transformationSpec),
                onClick = { /* ... */ },
                icon = {
                    Icon(
                        imageVector = Icons.Default.Build,
                        contentDescription = "build",
                    )
                },
            ) {
                Text(
                    text = "Build",
                    maxLines = 1,
                    overflow = TextOverflow.Ellipsis,
                )
            }
        }
    }
}
List.kt

Cómo agregar un efecto de ajustar y deslizar.

Si necesitas agregar un comportamiento de ajuste y desplazamiento, te sugerimos que uses 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 ScalingLazyColumn, 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