web-dev-qa-db-ja.com

リストを反復してFlutterで複数のウィジェットをレンダリングしますか？

このように定義された文字列のリストがあります：

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

テキストウィジェットを使用して、画面上の値を並べて表示したい。私はこれを試みるために次のコードを使用しようとしました：

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

ただし、このコードを実行すると、forループは1回しか実行されず、one（リストの最初のアイテム）と表示されるテキストウィジェットが1つだけ表示されます。さらに、forループ内にログメッセージを追加すると、それも1回トリガーされます。リストの長さに基づいてforループがループしないのはなぜですか？一度だけ実行してから終了するようです。

dartflutter
29
rakeshdas

基本的に、関数で 'return'を押すと、関数は停止し、反復を続行しません。そのため、すべてをリストに追加してからウィジェットの子として追加する必要があります

次のようなことができます：

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

さらに良いことに、.map（）演算子を使用して、次のようなことを行うことができます。

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

Dart言語には関数型プログラミングの側面があるため、必要なものは次のように簡潔に記述できます。

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

これを「nameの各listを取得してTextにマッピングし、Listに戻します」と読みます。

14
Richard Heap

コレクションでfor要素を使用することで、Flutter 1.5およびDart 2.3でこれを実現することが可能になりました。

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

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

これにより、リスト内のアイテムを含む4つのテキストウィジェットが表示されます。
NB。 forループを囲む中括弧はなく、returnキーワードもありません。

12
nonybrighto

ListViewを使用して、アイテムのリストをレンダリングできます。ただし、ListViewを使用したくない場合は、次のようなウィジェット（この場合はテキスト）のリストを返すメソッドを作成できます。

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();
  }
1
Phuc Tran

何かを返すと、コードはあなたが返すものでループを終了します。したがって、コードの最初の反復では、名前は"one"です。そのため、return new Text(name)に到達するとすぐに、コードはreturn new Text("one")でループを終了します。そのため、それを印刷するか、非同期リターンを使用してください。

0
InAFlash