Question

我有一个像这样定义的字符串列表：

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

我想使用文本小部件并排显示屏幕上的值。我试图使用以下代码来尝试：

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

但是，当我运行此代码时，for循环只运行一次，并且只有一个文本小部件被渲染，显示one（列表中的第一项）。另外，当我在for循环中添加日志消息时，它也会被触发一次。为什么我的for循环不是基于列表的长度？它似乎只运行一次然后退出。

Answer 1

基本上当你在一个函数上点击'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());
  }

Answer 2

Dart语言具有函数式编程的各个方面，因此您可以简洁地编写为：

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

将其读作“将每个名称列入清单并将其映射到Text并将其重新形成List”。

Answer 3

对于googler，我写了一个简单的Stateless Widget，其中包含本SO中提到的3种方法。希望这使它更容易理解。

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 4

您可以使用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();
  }

Answer 5

现在可以通过使用集合中的 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)
          ],
        ),

这将显示四个Text小部件，其中包含列表中的项目。
NB。在for循环中没有花括号，也没有return关键字。

Answer 6

您需要做的就是将其放在列表中，然后将其添加为小部件的子级。

您可以执行以下操作：

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

这样的通话之后

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

Answer 7

当你返回一些东西时，代码会从你返回的东西中退出循环。因此，在你的代码中，在第一次迭代中，名称是"one"。因此，只要它到达return new Text(name)，代码就会以return new Text("one")退出循环。所以，尝试打印它或使用异步返回。

Answer 8

要在子级中有多个小部件的 for 循环中循环，

children: [
  for(int i = 0; i < item.length; i++) ...[
    Widget1,
    Widget2,
    ...
  ],
],

Answer 9

以下使用集合包对我有用：

https://pub.dev/packages/collection

children: <Widget>[
                ...languages.mapIndex((idx, item) {
                  return InkWell(
                      child: CustomCheckbox(Skill(item, _languageSelections[idx])),
                      onTap: () {
                        setState(() {
                          _languageSelections[idx] = !_languageSelections[idx];
                        });
                      });
                })
              ],

Answer 10

如果您从作为数组的 http 请求接收响应，您可以使用 ListView.Builder()

列表项 = 数据；

Container(
  child: ListView.builder(
    shrinkWrap: true,
    itemCount: items.length,
    itemBuilder: (BuildContext context, int index){
      return Container(
        child: Text(
          items[index]['property']
        ),
      );
    },
  ),
);

哪里 data 是使用 post 或 get 从 http 请求返回的内容 item 是数组 'property' 是数组中每个项目的属性之一，假设您正在接收一个对象列表

迭代列表以在Flutter中呈现多个小部件？

10 个答案: