der Elementtyp ‘Liste’ kann nicht dem Listentyp ‘Widget’ zugeordnet werden

Ich versuche, Daten mit for-Schleife in Gridview hinzuzufügen, aber es zeigt einen Fehler. Hier ist mein Code für die Komponente

return new GridView.count(
    crossAxisCount: 2,
    padding: const EdgeInsets.all(10.0),
    crossAxisSpacing: 10.0,
    mainAxisSpacing: 10.0,
    children: <Widget>[getList()],
);

getList()-Code

List<Widget> getList() {
  List<Widget> childs = [];
  for (var i = 0; i < 10; i++) {
    childs.add(new ListItem('abcd ' + $i));
  }
  return childs;
}

Aber es zeigt Kompilierzeitfehler.

The element type 'List<widget>' can't be assigned to the list type 'Widget'

Hier packen Sie eine Liste als Liste ein

children: <Widget>[getList()],

Das sollte eher sein

children: getList(),

Verwenden Sie einfach den Spread-Operator:

return new GridView.count(
    crossAxisCount: 2,
    padding: const EdgeInsets.all(10.0),
    crossAxisSpacing: 10.0,
    mainAxisSpacing: 10.0,
    children: <Widget>[...getList()],
);

Die Verwendung des Spread-Operators ist eine Möglichkeit, dieses Problem zu lösen. Aber es gibt auch eine andere, die die Verwendung von beinhaltet toList() Methode.

children Eigenschaft erfordert eine Liste von Widgets. In Ihrem Fall wird es jedoch wie folgt:

return new GridView.count(
    crossAxisCount: 2,
    padding: const EdgeInsets.all(10.0),
    crossAxisSpacing: 10.0,
    mainAxisSpacing: 10.0,
    children: [
      [
        ListItem('abcd 0'),
        ListItem('abcd 1'),
        ...
      ]
    ],
);

Deswegen,

Lösung 1

die Verpackung sollte sein children: getList(),

Lösung 2 (Spread-Operator)

children: <Widget>[...getList()],

Als Nebenbemerkung kann dieses Problem auftreten, wenn Sie versuchen, etwas wie a zu verwenden map() Methode. In diesem Fall ist die Verwendung von toList() Methode ist praktisch. Zum Beispiel,

children: someListOfObjects.map((el) => Text(el)).toList(),

Es gibt zwei Methoden, die ich gefunden habe.

Methode 1 – Einfach

Diese Methode wird in der neuesten Version von unterstützt flutter

var list = ["one", "two", "three", "four"]; 

child: Column(
      mainAxisAlignment: MainAxisAlignment.center,
      children: <Widget>[
          for(var item in list ) Text(item)
      ],
),

Methode 2 – Ein bisschen komplex

Getestet in Flutter 1.12.13+hotfix.7 und Dart 2.7.0können wir die Liste der Objekte wie folgt durchlaufen:

Iterieren Sie über die Liste der Objekte

...data.map((f) => paragraph(f.title, f.description)).toList(),

Benutzerdefiniertes Widget

Column paragraph(String title, String description) {
  return new Column(
    children: <Widget>[
      Container(
        child: Text(title),
      ),
      Container(
        child: Text(description),
      ),
    ],
  );
}

Daten: Liste von Objekten

List<AboutUsData> data = [
    new AboutUsData(
      title: 'Our Vision',
      description:
          'OUR VISION',
    ),
    new AboutUsData(
      title: 'Our Mission',
      description:
          'OUR MISSION',
    ),
    new AboutUsData(
      title: 'Our Values',
      description:
          'As we grow as a company',
    ),
  ];

Da die Antwort für mich nicht zufriedenstellend war, habe ich eine andere Lösung gefunden.

Flutter gibt Ihnen die Möglichkeit, Bedingungen auch in der Grafik in eine einzelne Zeile zu schreiben, sodass Sie einen Zyklus in eine einzelne Zeile einfügen und dann die anderen verschiedenen Widgets einfügen können. Dies ist ein praktisches Beispiel als Antwort auf die Hauptfrage:

 Column(
    children: <Widget>
      [
        for (int i = 0;
        i < workouts.series.length;
        i++)
          "//CREATE N YOUR WIDGETS//",
          new Text(
          "${workouts.series.length} x ${exerciseWorkout.repsToDo} ",
          style: TextStyle(
          color: Colors.black87,
          fontSize: 16,
          fontWeight: FontWeight.bold),
          )
      ],
     )

Ich habe das gleiche Problem, ich habe eine Liste von:

List<Info> li = [
    Info(name: "oussama", height: 180, date: DateTime.now()),
    Info(name: "mehdy", height: 150, date: DateTime.utc(1997, 05, 14)),
    Info(name: "ahmed", height: 190, date: DateTime.utc(1997, 04, 11)),
    Info(name: "sofiene", height: 160, date: DateTime.utc(1995, 07, 13)),
    Info(name: "mohamed", height: 150, date: DateTime.utc(1994, 01, 17))
];

und ich möchte, dass es sie in einer Spalte anzeigt, die a zurückgibt list<Widget> also bin ich genauso vorgegangen wie traurig @Günter Zöchbauer: ich habe eine funktion erstellt getList():

List<Widget> getList() {
    List<Widget> childs = li
        .map((e) => Row(children: <Widget>[
              Text(e.name, style: const TextStyle(fontSize: 25)),
              Text("${e.height}", style: const TextStyle(fontSize: 25)),
              Text("${e.date}", style: const TextStyle(fontSize: 25))
            ]))
        .toList();
    return childs;
  }

dann habe ich es zugeordnet Column:

body: Container(
 child: Column(
   children: getList()
))

bei mir hat es funktioniert 🙂