Abfragen in Flutter ListView

Sep 18 2020

Ich lerne etwas über Listenansichten und habe die folgenden zwei Dart-Dateien, eine mit ListView Builder und die andere mit Listview. Beide geben das gleiche Ergebnis aus. Ich habe die Listenansicht-Anleitung befolgt:https://pusher.com/tutorials/flutter-listviews

Unten sind meine Fragen zur Listenansicht:

  1. Ich verstehe in der realen Welt, dass die Daten von einer API stammen und wollte wissen, welche der folgenden Optionen verwendet werden und warum?
  2. Bin ich richtig zu verstehen, dass jedes Widget wie Container, Text untergeordnet in einer listView sein kann?
  3. In Option 1 ist das untergeordnete ListView eine Funktion _buildListItemsFromLocation (). Ist dies eine gute Vorgehensweise oder sollten wir den Code _buildListItemsFromLocation () in eine separate Dartdatei verschieben?

Option 1: 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(),
    );
  }
}


Option 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),
                )
              ],
            );
        }
        );
      }
  }


Antworten

2 Souvenir Sep 18 2020 at 09:04
  1. Ich verwende Methode 2, weil sie leicht zu verstehen ist und der Reihenfolge von oben nach unten folgt, damit der Code leicht gelesen werden kann.
  2. Jedes Widget kann ein untergeordnetes Element eines anderen Widgets sein. Je nachdem, wie und wofür Sie sie verwenden.
  3. Viele Leute sagen, wir sollten eine andere Klasse erstellen und sie dann erneut aufrufen, anstatt sie wie oben zu teilen, da dies die Leistung der App beeinträchtigt. Wenn Sie viel, aber nur einen Bildschirm verwenden, können Sie dieselbe Methode wie Ihre eigene verwenden. Die Antwort kann fehlerhaft sein, nichts zu geben haben.
1 Autocrab Sep 18 2020 at 09:01
  1. Wenn Sie die Größe der Liste im Voraus nicht kennen, erstellen Sie sie über den Builder

1.1 Wenn Sie eine Liste erstellen und wissen, dass die Anzahl der Elemente nicht mehr als zehn oder zwölf ListViewbeträgt , können Sie aus Beispiel1 erstellen

  1. Jedes Widget kann in sein ListView. Der Einfachheit halber gibt es ein Widget namens ListTile, das führende, nachfolgende, Titel- und Untertitel-Widgets enthält
  2. Es ist in Ordnung