Administración del estado de la lista

Ícono de calificación de tres estrellas

Las listas desplazables en Jetpack Compose, como LazyColumn y LazyRow, pueden mostrar grandes cantidades de datos de manera eficiente. Sin embargo, los cambios de configuración, como la rotación del dispositivo o el plegado o desplegado de un dispositivo plegable, pueden restablecer el estado de una lista, lo que obliga a los usuarios a desplazarse nuevamente a su posición anterior.

Prácticas recomendadas

Las listas desplazables deben mantener su estado (en particular, la posición de desplazamiento) y el estado de sus elementos de lista individuales (como las entradas de texto) durante todos los cambios de configuración para proporcionar una experiencia del usuario fluida.

Ingredientes

  • rememberLazyListState(): Crea y recuerda un LazyListState que se usa para controlar y observar la posición de desplazamiento de la lista. Se conserva automáticamente en los cambios de configuración.
  • rememberSaveable: Recuerda el valor del estado en los cambios de configuración, lo que resulta útil para conservar los estados de los elementos de la lista individuales (como las entradas de los campos de texto).

Pasos

En Jetpack Compose, la conservación de la posición de desplazamiento de una lista se controla automáticamente cuando usas un estado de desplazamiento. Para conservar el estado de los elementos de lista individuales y complejos (como las entradas TextField), usa rememberSaveable.

1. Cómo conservar el estado de desplazamiento de la lista

Para guardar y restablecer la posición de desplazamiento de tu lista en los cambios de configuración, crea un LazyListState con rememberLazyListState() y pásalo como el parámetro state de tu lista desplazable, como un LazyColumn.

Compose conserva automáticamente la posición de desplazamiento.

2. Cómo conservar el estado de los elementos de lista individuales

Si tu lista contiene elementos con estado (por ejemplo, elementos con campos de texto), el estado de esos elementos individuales se puede perder cuando se desplazan fuera de la pantalla y se reciclan, o durante los cambios de configuración.

Para conservar el estado de los elementos individuales, usa rememberSaveable dentro del alcance del elemento de lista. Esto garantiza que, cuando el elemento se vuelva a componer o se desplace de nuevo a la vista, se restablezca su estado.

A continuación, se muestra una implementación completa y compilable que demuestra la restauración del estado de desplazamiento y del estado del elemento:

// Scroll state is automatically saved and restored by rememberLazyListState
val listState = rememberLazyListState()

LazyColumn(state = listState) {
    items(100) { index ->
        // Use rememberSaveable to preserve individual item state (e.g., text input)
        var text by rememberSaveable { mutableStateOf("") }
        TextField(
            value = text,
            onValueChange = { text = it },
            label = { Text("Item $index") }
        )
    }
}

Resultados

Tu lista desplazable ahora puede restablecer su posición de desplazamiento y el estado de cada elemento de la lista.

Recursos adicionales