Durch eine Liste iterieren, um mehrere Widgets in Flutter zu rendern?

Ich habe eine Liste von Zeichenfolgen wie folgt definiert:

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

Ich möchte die Werte auf dem Bildschirm mithilfe von Text-Widgets nebeneinander 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ühre, wird die for-Schleife jedoch nur einmal ausgeführt, und es wird nur ein Text-Widget gerendert, das besagt one(das erste Element in der Liste). Wenn ich eine Protokollnachricht in meine for-Schleife einfüge, wird diese außerdem einmal ausgelöst. Warum basiert meine for-Schleife nicht auf der Länge der Liste? Es scheint nur einmal zu laufen und dann zu beenden.

Wenn Sie bei einer Funktion auf "Zurück" klicken, wird die Funktion gestoppt und die Iteration nicht fortgesetzt. Sie müssen also alles auf eine Liste setzen und es dann als untergeordnete Elemente eines Widgets 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 Operator .map () verwenden und so etwas tun:

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

In Flutter 1.5 und Dart 2.3 ist dies jetzt möglich, 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 angezeigt, die die Elemente in der Liste enthalten.
NB. Keine geschweiften Klammern um die for-Schleife und kein return-Schlüsselwort.

Die Dart-Sprache hat Aspekte der funktionalen Programmierung, sodass Sie genau das schreiben können, was Sie möchten:

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

Lesen Sie dies als "Nehmen Sie jedes nameauf listund ordnen Sie es einem zu Textund formen Sie es wieder zu einem List".

Für Googler habe ich ein einfaches Stateless Widget geschrieben, das drei in dieser SO erwähnte Methode enthält. Hoffe das macht es leichter zu verstehen.

import 'package:flutter/material.dart';

class ListAndFP extends StatelessWidget {
  final List<String> items = ['apple', 'banana', 'orange', 'lemon'];

  //  for in (require dart 2.2.2 SDK or later)
  Widget method1() {
    return Column(
      children: <Widget>[
        Text('You can put other Widgets here'),
        for (var item in items) Text(item),
      ],
    );
  }

  // map() + toList() + Spread Property
  Widget method2() {
    return Column(
      children: <Widget>[
        Text('You can put other Widgets here'),
        ...items.map((item) => Text(item)).toList(),
      ],
    );
  }

  // map() + toList()
  Widget method3() {
    return Column(
      // Text('You CANNOT put other Widgets here'),
      children: items.map((item) => Text(item)).toList(),
    );
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: method1(),
    );
  }
}

Mit ListView können Sie eine Liste von Elementen rendern. Wenn Sie ListView jedoch nicht verwenden möchten, können Sie eine Methode erstellen, die eine Liste von Widgets (in Ihrem Fall Texte) wie folgt 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() {
    /// Method 1
//    List<Text> childrenTexts = List<Text>();
//    for (String name in list) {
//      childrenTexts.add(new Text(name, style: new TextStyle(color: Colors.red),));
//    }
//    return childrenTexts;

    /// Method 2
    return list.map((text) => Text(text, style: TextStyle(color: Colors.blue),)).toList();
  }

Alles, was Sie tun müssen, ist, es in eine Liste aufzunehmen und es dann als untergeordnete Elemente des Widgets hinzuzufügen.

Sie können so etwas tun:

Widget listOfWidgets(List<String> item) {
  List<Widget> list = List<Widget>();
  for (var i = 0; i < item.length; i++) {
    list.add(Container(
        child: FittedBox(
          fit: BoxFit.fitWidth,
          child: Text(
            item[i],
          ),
        )));
  }
  return Wrap(
      spacing: 5.0, // gap between adjacent chips
      runSpacing: 2.0, // gap between lines
      children: list);
}

Nach diesem Anruf so

child: Row(children: <Widget>[
   listOfWidgets(itemList),
])

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