L'itération dans une liste pour rendre plusieurs widgets dans Flutter ?

Question

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

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

Je veux rendre les valeurs à l'écran côte à côte en utilisant des widgets de texte. J'ai essayé d'utiliser le code suivant pour y parvenir :

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

Cependant, lorsque j'exécute ce code, la boucle for ne s'exécute qu'une seule fois et un seul widget de texte est rendu, qui dit 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 ne fonctionne-t-elle pas en fonction de la longueur de la liste ? Il semble ne s'exécuter qu'une seule fois, puis s'arrêter.

Answer 1

En fait, lorsque vous appuyez sur la touche "return" d'une fonction, celle-ci s'arrête et ne poursuit pas l'itération. Vous devez donc placer tous les éléments dans une liste, puis les ajouter comme enfants 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 encore mieux, 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());
  }

Answer 2

Il est maintenant possible d'y parvenir dans Flutter 1.5 et Dart 2.3 en utilisant un pour dans votre collection.

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

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

Cela affichera quatre widgets Texte contenant les éléments de la liste.
NB. Pas d'accolades autour de la boucle for et pas de mot clé return.

Answer 3

Le langage Dart présente des aspects de la programmation fonctionnelle, de sorte que ce que vous voulez peut être écrit de manière concise comme :

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

Lire ceci comme "prendre chaque name sur list et de le faire correspondre à un Text et de les reformer en un List ".

Answer 4

Pour le googler, j'ai écrit un simple widget apatride contenant les 3 méthodes mentionnées dans ce SO. J'espère que cela rendra la compréhension plus facile.

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

Answer 5

Vous pouvez utiliser ListView pour rendre 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 (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() {
    /// 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();
  }