Flutter for 循环以生成小部件列表答案

【问题标题】：Flutter for loop to generate list of widgetsFlutter for 循环以生成小部件列表
【发布时间】：2019-11-18 16:25:42
【问题描述】：

我有这样的代码，但我希望它遍历一个整数数组以显示动态数量的孩子：

return Container(
  child: Column(
    children: <Widget>[
      Center(
        child: Text(text[0].toString(),
            textAlign: TextAlign.center),
      ),
      Center(
        child: Text(text[1].toString(),
            textAlign: TextAlign.center),
      ),
    ],
  ),
)

text 变量是此处的整数转换器列表。我尝试添加一个函数来遍历数组并显示“孩子”，但出现类型错误。由于我是 Dart 和 Flutter 的新手，所以不知道该怎么做。

【问题讨论】：

标签： flutter dart

【解决方案1】：

你可以试试这个：

@override
  Widget build(BuildContext context) {
    List<int> text = [1,2,3,4];
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        child: Column(
          children: [
            for ( var i in text ) Text(i.toString())
          ],
        ),
      ),
    );

请注意，这是在 dart 更新到 2.3 版时添加的。您可以在 this article

中了解一些最佳更改

在 dart 2.3 之前提供的另一种方法是这样的：

@override
  Widget build(BuildContext context) {
    List<int> text = [1,2,3,4];
    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Container(
        child: Column(
          children: List.generate(text.length,(index){
            return Text(text[index].toString());
          }),
        ),
      ),
    );

【讨论】：

奇怪，我尝试了第一种方法，我得到一个错误RangeError (index): Invalid value: Not in range 0..3, inclusive: 4 和List<int> text = [1, 2, 3, 4];
啊，我的错，我编辑了代码来修复它，我为每个循环使用了一个。如果您还需要什么，请告诉我！
应该是Text(i.toString()，因为i这里实际上是值而不是键。
这需要启用“控制流集合”

【解决方案2】：

你可以在这里尝试 .map 方法，

class Example extends StatelessWidget {

  List <int> exampleList =  [1,2,3,4];

  @override
  Widget build(BuildContext context) {
    return
      Container(
        child: Column(
            children: exampleList.map((i) => new Text(i.toString())).toList()
        ),
      );
  }
}

如果列表中有对象，Thie 方法会派上用场。还有 .map() 方法必须在最后使用 .toList()。

【讨论】：

【解决方案3】：

假设您想在 Column 小部件中循环一些小部件（例如 Text()），您可以在 children 属性中添加一个循环。请参阅下面的示例：

Column(
   children: <Widget>[
                   for (int i=0; i<3; i++)
                      Text("Hello" + i)
                     ],
        )

【讨论】：

【解决方案4】：

您可以使用字符串列表的 map 方法。

 Widget _getListWidgets(List<String> yourList){
    return Row(children: yourList.map((i) => Text(i)).toList());
  }

当你的 List 有一个复杂的对象时：

Widget _getListWidgets( List<YourObject> lstItens) {
  return Row(children: lstItens.map((i) => Text(i.name)).toList());
}

【讨论】：

【解决方案5】：

飞镖：Code Snippet

import 'package:flutter/material.dart';

void main() => runApp(MyApp());

class MyApp extends StatelessWidget {
  @override
  Widget build(context) => MaterialApp(
    home: HomePage()
  );
}


class HomePage extends StatelessWidget {
  @override
  Widget build(context) => Scaffold(
    appBar: AppBar(title: Text("test")),
    body: SafeArea(
        child:Center(
          child:
          Row(
            children: [
              Container(
                width: MediaQuery.of(context).size.width-200.0,
                child: Content()
              )
            ]
          )
        )
    )
  );
}

class Content extends StatelessWidget {
  final List<String> elements = ["Zero", "One", "Two", "Three", "Four", "Five", "Six", "Seven", "Eight", "A Million Billion Trillion", "A much, much longer text that will still fit"];
  @override
  Widget build(context) => GridView.builder(
    itemCount: elements.length,
    gridDelegate: SliverGridDelegateWithMaxCrossAxisExtent(
      maxCrossAxisExtent: 130.0,
      crossAxisSpacing: 20.0,
      mainAxisSpacing: 20.0,
    ),
    itemBuilder: (context, i) => Card(
      child: Center(
        child: Padding(
          padding: EdgeInsets.all(8.0), child: Text(elements[i])
        )
      )
    )
  );
}

你也这样做

return new ListView(
  children: new List.generate(10, (index) => new ListTile()),
);

【讨论】：

我在列表中设置了自定义键和值。如何在有状态类的构建函数中循环获取这些键和值？请建议。谢谢

【解决方案6】：

最好的方法是使用List.map()

这样您就不必启用“控制流集合”

 Container(
        child: Column(
            children: myList.map((e) => new Text(e)).toList(),
          ),
   );

【讨论】：