Consultas en Flutter ListView

Sep 18 2020

Estoy aprendiendo acerca de las vistas de lista y tengo los dos archivos de dardos a continuación, uno que usa el constructor ListView y el otro Listview. Ambos generan el mismo resultado. He estado siguiendo la guía listview:https://pusher.com/tutorials/flutter-listviews

A continuación se muestran mis consultas en listview:

  1. Entiendo que en el mundo real los datos provendrán de una API y quería saber cuál de las siguientes opciones se utilizará y por qué.
  2. ¿Estoy en lo correcto al entender que cualquier widget como contenedor, el texto puede ser hijo dentro de un listView?
  3. En la opción 1, el hijo ListView es una función _buildListItemsFromLocation (). ¿Es esta una buena práctica o deberíamos mover el código _buildListItemsFromLocation () a un archivo dart separado?

Option1: ListView

class LocationListView extends StatefulWidget {
  @override
  _LocationListViewState createState() => _LocationListViewState();
}

class _LocationListViewState extends State<LocationListView> {

  List<Container> _buildListItemsFromLocation() {
    int index = 0;
    return locationData.map((location) {
      var container = Container(
          child: Row(
            children: [
              Container(
                margin: EdgeInsets.all(10.0),
                child: Image(
                  image: AssetImage(location.imagePath),
                  width: 100.0,
                  height: 100.0,
                  fit: BoxFit.cover,
                ),
              ),
              Container(
                child: Text(location.name),
              )
            ],
          ),
      );
      return container;
    }).toList();
  }

  @override
  Widget build(BuildContext context) {
    return ListView(
      children: _buildListItemsFromLocation(),
    );
  }
}


Opción 2 - ListView.builder

class LocationList extends StatefulWidget {
  @override
  _LocationListState createState() => _LocationListState();
}

class _LocationListState extends State<LocationList> {

  @override
  Widget build(BuildContext context) {
        return ListView.builder(
          itemCount: locationData.length,
          itemBuilder: (context, index) {
            
            return Row(
              children: [
                Container(
                  margin: EdgeInsets.all(10.0),
                  child: Image(
                    image: AssetImage(locationData[index].imagePath),
                    width: 100.0,
                    height: 100.0,
                    fit: BoxFit.cover,
                  ),
                ),
                Container(
                  child: Text(locationData[index].name),
                )
              ],
            );
        }
        );
      }
  }


Respuestas

2 Souvenir Sep 18 2020 at 09:04
  1. Utilizo el método 2 porque es fácil de entender y sigue el orden de arriba a abajo, por lo que es fácil leer el código.
  2. Cualquier widget puede ser hijo de otro widget. Dependiendo de cómo y para qué los uses.
  3. Mucha gente dice que deberíamos crear otra clase y luego volver a llamarla en lugar de dividirla como se indicó anteriormente porque afecta el rendimiento de la aplicación. En caso de usar mucho pero solo en una pantalla, puede usar el mismo método que el suyo. La respuesta puede ser defectuosa, no tienes nada que darte.
1 Autocrab Sep 18 2020 at 09:01
  1. Si no conoce de antemano el tamaño de la lista, créelo a través del constructor

1.1 Si crea una lista y sabe que el recuento de elementos no será más de diez o doce, puede crear a ListViewpartir de example1

  1. Cualquier widget puede estar en formato ListView. Para mayor comodidad, hay un widget llamado ListTile, que contiene widgets iniciales, finales, de título y de subtítulos.
  2. esta bien