Zapytania na Flutter ListView

Sep 18 2020

Uczę się o listviews i mam poniższe dwa pliki dart, jeden z konstruktora ListView, a drugi Listview. Oba dają ten sam wynik. Korzystałem z przewodnika po liście:https://pusher.com/tutorials/flutter-listviews

Poniżej znajdują się moje zapytania dotyczące widoku listy:

  1. Rozumiem, że w prawdziwym świecie dane będą pochodzić z interfejsu API i chciałem wiedzieć, które z poniższych opcji zostaną użyte i dlaczego?
  2. Czy mam rację, aby zrozumieć, że każdy widżet, taki jak kontener, tekst może być elementem podrzędnym elementu listView?
  3. W opcji 1 elementem potomnym ListView jest funkcja _buildListItemsFromLocation (). Czy to dobra praktyka, czy też powinniśmy przenieść kod _buildListItemsFromLocation () do osobnego pliku rzutek?

Opcja 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(),
    );
  }
}


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


Odpowiedzi

2 Souvenir Sep 18 2020 at 09:04
  1. Używam metody 2, ponieważ jest łatwa do zrozumienia i jest zgodna z kolejnością od góry do dołu, dzięki czemu łatwo jest odczytać kod.
  2. Każdy widżet może być elementem podrzędnym innego widżetu. W zależności od tego, jak i do czego ich używasz.
  3. Wiele osób twierdzi, że powinniśmy utworzyć inną klasę, a następnie wywołać ją ponownie, zamiast dzielić jak powyżej, ponieważ wpływa to na wydajność aplikacji. W przypadku dużego wykorzystania, ale tylko na jednym ekranie, możesz użyć tej samej metody, co Twoja. Odpowiedź może być błędna, nie masz nic do zaoferowania.
1 Autocrab Sep 18 2020 at 09:01
  1. Jeśli nie znasz wcześniej rozmiaru listy, utwórz ją za pomocą kreatora

1.1 Jeśli tworzysz listę i wiesz, że liczba elementów nie będzie większa niż dziesięć lub dwanaście, możesz utworzyć ListViewz przykładu1

  1. Każdy widżet może się znajdować ListView. Dla wygody istnieje widget nazwany ListTile, który zawiera widżety wiodące, końcowe, tytuł, napisy
  2. jest w porządku