web-dev-qa-db-fra.com

Itérer dans une liste pour rendre plusieurs widgets dans Flutter?

J'ai une liste de chaînes définies comme ceci:

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

Je souhaite afficher les valeurs à l'écran côte à côte à l'aide de widgets de texte. J'ai essayé d'utiliser le code suivant pour tenter ceci:

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

Toutefois, lorsque j'exécute ce code, la boucle for ne s'exécute qu'une seule fois et il n'y a qu'un seul widget texte rendu qui indique one (le premier élément de la liste). De plus, lorsque j'ajoute un message de journal dans ma boucle for, il est également déclenché une fois. Pourquoi ma boucle for loop n'est-elle pas basée sur la longueur de la liste? Il semble ne fonctionner qu'une fois, puis cesser de fumer.

dartflutter
8
rakeshdas

En gros, lorsque vous appuyez sur 'return' sur une fonction, celle-ci s'arrête et ne continue pas votre itération. Vous devez donc tout mettre sur une liste, puis l'ajouter en tant qu'enfant d'un widget

vous pouvez faire quelque chose comme ça:

  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);
  }

ou mieux encore, vous pouvez utiliser l'opérateur .map () et faire quelque chose comme ceci:

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

Le langage Dart a des aspects de programmation fonctionnelle, ainsi ce que vous voulez peut être écrit de manière concise:

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

Lire ceci comme "prend chaque nom dans la liste et mappe-le à une Text et forme-les à nouveau dans une List".

4
Richard Heap

Vous pouvez utiliser ListView pour afficher une liste d'éléments. Mais si vous ne voulez pas utiliser ListView, vous pouvez créer une méthode qui renvoie une liste de widgets (les textes dans votre cas) comme ci-dessous:

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

quand vous retournez quelque chose, le code sort de la boucle avec ce que vous retournez. Ainsi, dans votre code, à la première itération, nom est "one". ainsi, dès qu’il atteint return new Text(name), le code quitte la boucle avec return new Text("one"). alors, essayez de l’imprimer ou d’utiliser des déclarations asynchrones.

0
InAFlash