Es probable que casi todas las aplicaciones móviles no triviales tengan listas en sus diseños. Esto se debe a que usar una lista desplazable es a menudo la forma más sencilla de mostrar una gran cantidad de elementos similares en una pantalla pequeña..
El marco de Flutter ofrece varios widgets que puede utilizar de manera eficiente, y con un código mínimo, crear y mostrar dichas listas. En este tutorial, le mostraré cómo usarlos con fuentes de datos locales y remotas.
Si necesita mostrar una pequeña cantidad de elementos similares, y está seguro de que la pantalla del usuario podrá acomodarlos a todos al mismo tiempo, usando la Columna
Widget es lo más eficiente para hacer..
Para crear una lista en su aplicación Flutter, puede usar la Lista
Clase que ofrece el lenguaje de programación Dart. Después de crear la lista, puede utilizar su añadir()
Método para agregar cualquier número de elementos a él. El siguiente código le muestra cómo crear una lista que contiene tres Botón levantado
widgets:
// Crear lista ListamyItems = new List (); // Agregue tres widgets de botón a ella myItems.add (nuevo RaisedButton (hijo: nuevo Texto ("Twitter"), onPressed: () )); myItems.add (nuevo RaisedButton (niño: nuevo texto ("Facebook"), onPressed: () )); myItems.add (nuevo RaisedButton (niño: nuevo texto ("Reddit"), onPressed: () ));
Tenga en cuenta que cada elemento de la lista tiene un vacío onPressed
controlador de eventos asociado con él porque, sin eso, el elemento estaría deshabilitado.
Ahora que la lista está lista, puede asignarla directamente al niños
propiedad de la Columna
Widget que se mostrará. Sin embargo, generalmente también querrá especificar dónde se deben colocar los elementos de la lista en la pantalla. Porque el Columna
widget es un widget flexible, puede controlar las posiciones de los elementos a lo largo de su eje principal y el eje transversal utilizando la mainAxisAlignment
y crossAxisAlignment
propiedades Por defecto, para el Columna
widget, el eje principal es el eje vertical, y el eje transversal es el eje horizontal.
El siguiente código le muestra cómo estirar los tres botones a través del eje horizontal y colocarlos en el centro de la pantalla verticalmente:
Columna columna = columna nueva (mainAxisAlignment: MainAxisAlignment.center, crossAxisAlignment: CrossAxisAlignment.stretch, children: myItems);
Así es como se verá la columna ahora:
Es importante tener en cuenta que encontrará un error de tiempo de ejecución si un Columna
Widget es incapaz de acomodar a todos sus hijos. Por ejemplo, si tuvieras más de una docena Botón levantado
widgets en tu lista en lugar de tres, verías un mensaje de error que se ve así:
Para listas un poco más grandes, listas cuyo contenido pueda desbordar la pantalla, debe considerar usar un Vista de la lista
Widget porque soporta el desplazamiento.
Es posible que haya notado que el código que escribimos para crear la lista en el paso anterior fue largo y repetitivo. Crear una lista más grande usando el mismo enfoque puede ser muy tedioso. Un enfoque alternativo fácil es utilizar dos listas: una que contiene los datos y otra que contiene los widgets.
Así es como puedes usar el []
operador para crear rápidamente una lista de datos, que, por ahora, solo contiene varias cadenas:
Listadatos = ["Twitter", "Reddit", "YouTube", "Facebook", "Vimeo", "GitHub", "GitLab", "BitBucket", "LinkedIn", "Medium", "Tumblr", "Instagram", " Pinterest "];
Para convertir la lista anterior de cadenas en una lista de Botón levantado
widgets, puedes usar el mapa()
y Listar()
metodos Con el mapa()
método, puede utilizar cada cadena para generar un nuevo Botón levantado
widget Y con el Listar()
método, puede convertir el Iterable
objeto devuelto por el mapa()
método en un real Lista
objeto. El siguiente código le muestra cómo:
ListamyWidgets = data.map ((item) return new RaisedButton (child: new Text (item), onPressed: () async String url = "https: // $ item .com"; if (esperar canLaunch (url )) aguardan lanzamiento (url););). toList ();
En aras de la integridad, el código anterior también muestra cómo crear un onPressed
controlador de eventos que utiliza el canLaunch ()
y lanzamiento()
métodos ofrecidos por el url_launcher
Paquete para abrir el sitio web que el usuario seleccionó en el navegador predeterminado..
Una vez que su lista esté lista, puede pasarla a niños
propiedad de la Vista de la lista
widget para mostrarlo.
ListView myList = new ListView (children: myWidgets);
En este punto, si ejecuta la aplicación, debería poder desplazarse por la lista y presionar cualquier botón para iniciar el sitio web asociado.
los Vista de la lista
El widget le permite colocar solo un elemento en su eje transversal. El elemento, por defecto, se estirará para ocupar todo el espacio disponible en ese eje. Si desea más flexibilidad, debería considerar usar un Vista en cuadrícula
widget en su lugar, que le permite especificar cuántos elementos desea en el eje transversal.
El siguiente código usa el GridView.count ()
constructor para crear una Vista en cuadrícula
Widget que muestra dos artículos por fila:
GridView myGrid = GridView.count (crossAxisCount: 2, children: myWidgets);
Así es como se ve la cuadrícula:
Para las listas de datos que contienen más de unas pocas docenas de elementos, debe evitar generar listas de widgets manualmente, como lo hizo en un paso anterior. ¿Por qué? Debido a que crear un widget es una operación costosa, y grandes listas de widgets pueden consumir mucha memoria.
En su lugar, debe utilizar el IndexedWidgetBuilder
Función, que le permite generar widgets solo cuando el usuario necesita verlos. Con él, puede generar widgets con pereza a medida que el usuario se desplaza por su Vista de la lista
widget.
Es bastante improbable que tengas grandes cantidades de datos definidos dentro de tus aplicaciones. Por lo general, estaría obteniendo dichos datos desde un servidor remoto. Por lo tanto, para darle un ejemplo realista, permítame mostrarle cómo obtener 100 preguntas del Desbordamiento de pila usando la API de Exchange Stack y mostrarlas a pedido..
Comience por crear una subclase de Stateful Widget
clase, que actuará como un contenedor para su Vista de la lista
widget y anular su createState ()
método.
la clase VeryLargeListHolder extiende StatefulWidget @override StatecreateState () return new MyState ();
los Mi estado
La clase mencionada en el código anterior aún no existe, así que créela y anule su construir()
método.
clase MyState extiende el estado@override Widget build (contexto BuildContext) // TODO
A continuación, agregue un Lista
Objeto como una de las variables miembro de la clase. Lo utilizará para almacenar las preguntas que descargó de Stack Overflow. Además, agregue el punto final de la API como otra variable.
Haga una lista de preguntas; String endpoint = "https://api.stackexchange.com/2.2/questions?" + "tamaño de página = 100 & order = desc & sort = activity & site = stackoverflow";
A menos que desee que su usuario presione un botón para descargar las preguntas, le sugiero que las descargue automáticamente cuando el widget se está inicializando. En consecuencia, anular el estado inicial ()
Método y hacer una llamada a un nuevo método asíncrono llamado Cargar datos()
.
@override void initState () super.initState (); Cargar datos(); void loadData () async // más código aquí
Dentro de Cargar datos()
método, puede utilizar el obtener()
función de Dart http
Paquete para descargar las preguntas. El punto final de la API devuelve un documento JSON, que puede analizar utilizando el json.decode ()
función disponible en Dart's convertir
paquete. El siguiente código le muestra cómo:
String rawData = (aguarda http.get (punto final)). Body; Mapa jsonData = json.decode (rawData);
Una vez que el documento JSON se ha convertido en un Mapa
objeto, puede utilizar el valor asociado a su artículos
clave para inicializar el preguntas
variable. La variable, sin embargo, es una parte del estado del widget. Por lo tanto, debe asegurarse de actualizarlo dentro de la setState ()
solo método Así es cómo:
setState (() questions = jsonData ["items"];);
En este punto puedes crear una nueva Vista de la lista
widget usando el ListView.builder ()
constructor, que espera una IndexedWidgetBuilder
La función y un elemento cuentan como sus argumentos. Por ahora, el recuento de artículos no es más que el tamaño del preguntas
lista. En consecuencia, agregue el siguiente código dentro de la construir()
método de la Mi estado
clase:
ListView myList = ListView.builder (itemCount: questions == null? 0: questions.length, itemBuilder: (contexto BuildContext, índice int) // Más código aquí);
Dentro de la función de constructor, todo lo que necesita hacer es crear un pequeño árbol de widgets para mostrar varios detalles sobre cada pregunta que descargó. Aleteo material
paquete ofrece un widget muy útil llamado ListTile
, que le permite crear rápidamente un árbol de este tipo a la vez que se adhiere a las directrices de Diseño de materiales.
El siguiente código le muestra cómo mostrar el título y el autor de la pregunta, usando la título
y subtitular
propiedades de la ListTile
widget:
devolver nuevo ListTile (título: Texto (preguntas [índice] ["título"]), subtítulo: Texto ("Preguntado por $ preguntas [índice] [" propietario "] [" nombre de pantalla "]"));
Por último, crea un nuevo Andamio
widget, asigna el Vista de la lista
widget a su cuerpo
propiedad, y devolverla desde el construir()
método para que pueda ser utilizado con una MaterialApp
widget Opcionalmente, puede agregar un AppBar
widget a la Andamio
widget.
devolver nuevo Scaffold (appBar: new AppBar (título: new Text ("LargeListDemo")), body: myList);
Así es como se verá la aplicación después de que haya descargado las preguntas:
Ahora sabe cómo trabajar con listas en una aplicación Flutter. En este tutorial, aprendió no solo cómo crear listas y cuadrículas que admitan grandes fuentes de datos, sino también cómo hacer que cada elemento dentro de ellos sea interactivo. Para obtener más información sobre las listas en Flutter, puede consultar la documentación oficial.