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

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

要循环遍历子级中包含多个小部件的 for 循环，

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

Answer 3

现在，可以通过在集合中使用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小部件，其中包含列表中的项目。
注意 for循环中没有大括号，也没有return关键字。

Answer 4

Dart语言具有功能编程的各个方面，因此您想要的内容可以简洁地编写为：

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

将其读为“将它们分别name放入list并映射到a，Text然后将它们重新组合成a List”。

Answer 5

一条线

Column( children: list.map((e) => Text(e)).toList() )

Answer 6

最简单的方法是将列表映射到行或列小部件中：

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

Widget build(BuildContext context) {
    return Row(children: List.from(list.map((name) => Text(name))));
}

Answer 7

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