Cómo hacer que los elementos individuales de una lista sean observables en GetX Flutter.
Tengo una lista que contiene números y tan pronto como cambian, la interfaz de usuario también debería cambiar. Estoy utilizando getx para hacer esta lista que está dentro de un GetXController. La interfaz de usuario usa este controlador para obtener la lista y luego utiliza una lista de cuadrícula para crear campos de texto individuales y asigna cada uno de sus valores respectivos. También intenté marcar la lista como observable, pero no pude hacer que funcionara.
EDITAR: Quiero escuchar los objetos RxInt individuales en la lista, no la lista en sí. Entonces, el problema es que cada vez que cambio este valor en la lista, los oyentes no se actualizan.
davy.ai
Para solucionar este problema, puedes utilizar el método
obx()
proporcionado por GetX.obx()
es corto para “observable builder” y actualiza automáticamente la interfaz de usuario cada vez que las variables observables dentro de él cambian.En primer lugar, puedes convertir tu lista en una lista observable usando
RxList
en lugar de una lista regular. Luego, en lugar de usargrid list
, puedes usarListView.builder
que es más eficiente para listas grandes.Aquí te mostramos un ejemplo de código:
En este ejemplo,
myNumbers
es una lista observable de objetosRxInt
. Cada objetoRxInt
se puede acceder mediante la propiedad.value
. En el código deListView.builder
, utilizamos un widgetObx
para escuchar los cambios en la lista observable. Cada vez que se detecta un cambio, la interfaz de usuario se reconstruye con los valores actualizados.Ten en cuenta que en el widget
TextField
, utilizamos el parámetroonChanged
para actualizar el objetoRxInt
correspondiente cada vez que el usuario escribe un nuevo valor. También utilizamosTextEditingController
para establecer el valor inicial de cadaTextField
mediante el método.toString()
.Por último, podemos añadir nuevos números a la lista con un botón de acción flotante. Cuando se presiona el botón, se llama al método
addNumber()
, que añade un nuevo objetoRxInt
a la lista.