webentwicklung-frage-antwort-db.com.de

Durchlaufen einer Liste zum Rendern mehrerer Widgets in Flutter?

Ich habe eine Liste von Zeichenfolgen wie folgt definiert:

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

Ich möchte die Werte auf dem Bildschirm nebeneinander mit Text-Widgets rendern. Ich habe versucht, den folgenden Code zu verwenden, um dies zu versuchen:

for (var name in list) {
   return new Text(name);
}

Wenn ich diesen Code ausführt, wird die for-Schleife jedoch nur einmal ausgeführt und es gibt nur ein Text-Widget, das gerendert wird, und zwar mit one (dem ersten Element in der Liste). Wenn ich eine Protokollnachricht in meine for-Schleife einfüge, wird sie außerdem einmalig ausgelöst. Warum basiert meine for-Loop-Schleife nicht auf der Länge der Liste? Es scheint nur einmal zu laufen und dann zu beenden.

8
rakeshdas

Wenn Sie bei einer Funktion die Eingabetaste drücken, wird die Funktion angehalten und die Iteration wird nicht fortgesetzt. Sie müssen also alles auf eine Liste setzen und dann als untergeordnetes Element eines Widget hinzufügen

sie können so etwas tun:

  Widget getTextWidgets(List<String> strings)
  {
    List<Widget> list = new List<Widget>();
    for(var i = 0; i < strings.length; i++){
        list.add(new Text(strings[i]));
    }
    return new Row(children: list);
  }

oder noch besser, Sie können den .map () Operator verwenden und so etwas tun:

  Widget getTextWidgets(List<String> strings)
  {
    return new Row(children: strings.map((item) => new Text(item)).toList());
  }
21
Rizky Andriawan

Es ist jetzt möglich, dies in Flutter 1.5 und Dart 2.3 zu erreichen, indem Sie ein for -Element in Ihrer Sammlung verwenden.

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

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

Daraufhin werden vier Text-Widgets mit den Elementen in der Liste angezeigt.
NB. Keine geschweiften Klammern um die for-Schleife und kein return-Schlüsselwort.

12
nonybrighto

Die Dart-Sprache hat Aspekte der funktionalen Programmierung, so dass das, was Sie wollen, kurz geschrieben werden kann:

List<String> list = ['one', 'two', 'three', 'four'];
List<Widget> widgets = list.map((name) => new Text(map)).toList();

Lesen Sie dies als "nehmen Sie jeden Namen in die Liste und ordnen Sie ihn einer Text zu und bilden Sie ihn zurück in eine List".

4
Richard Heap

Sie können ListView verwenden, um eine Liste von Elementen zu rendern. Wenn Sie ListView jedoch nicht verwenden möchten, können Sie eine Methode erstellen, die eine Liste von Widgets (in Ihrem Fall Texte) zurückgibt:

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

@override
Widget build(BuildContext context) {
  return new MaterialApp(
      home: new Scaffold(
    appBar: new AppBar(
      title: new Text('List Test'),
    ),
    body: new Center(
      child: new Column( // Or Row or whatever :)
        children: createChildrenTexts(),
      ),
    ),
  ));
}

List<Text> createChildrenTexts() {
  List<Text> childrenTexts = List<Text>();
  for (String name in list) {
    childrenTexts.add(new Text(name, style: new TextStyle(color: Colors.red),));
  }
  return childrenTexts;
}
1
Phuc Tran

wenn Sie etwas zurückgeben, wird der Code aus der Schleife mit dem zurückgesetzt, was Sie zurückgeben. In Ihrem Code in der ersten Iteration lautet der Name "one". Sobald er return new Text(name) erreicht, verlässt der Code die Schleife mit return new Text("one"). Versuchen Sie es also zu drucken oder verwenden Sie asynchrone Rückgaben.

0
InAFlash