列表中每个项目的颤振调用函数答案

【问题标题】：Flutter call function for each item in list列表中每个项目的颤振调用函数
【发布时间】：2019-07-11 09:58:53
【问题描述】：

我有一个 2x2 网格，我试图用卡片填充，其中每张卡片都有特定的样式。每张卡片都有一个标题和一个路线，点击后会打开另一个页面（路线）。我想为“名称”索引中的每个“名称”指定卡片的“名称”和点击应该指向的“页面名称”。

问题是 1。我不确定如何在小部件中执行 for-each 循环。 2.不知道如何使这个工作超过1个参数；卡片名称和新页面名称。

我已经尝试了几个选项，其中 2 个如下所示。

class SubjectsPage extends StatefulWidget {

  @override
  _SubjectsPageState createState() => new _SubjectsPageState();
}

class _SubjectsPageState extends State<SubjectsPage> with TickerProviderStateMixin {

  @override
  Widget build(BuildContext context) {
    var names = ["one", "two", "three", "four"];
        return new Material(     
          child: new Container(
            child: new Center(
              child: GridView.count(
                crossAxisCount: 2,
                padding: EdgeInsets.fromLTRB(16.0, 128.0, 16.0, 16.0),
                childAspectRatio: 8.0 / 8.5,
                children: <Widget>[

                  //option 1
                  names.forEach((unit) => Cards(unit: unit,)),

                  //option 2
                  for (var i = 0; i < names.length; i++) {
                    Cards(unit: names[i])
                  }

            ],
          ), 
        ),
      ),
    );
  }
}

选项1的错误是“这里的表达式的类型是'void'，因此不能使用。”

选项2的错误是“无法将元素类型'Set'分配给列表类型'Widget'。”

【问题讨论】：

标签： loops flutter dart

【解决方案1】：

是的，您不能使用forEach，而是使用map。您可以使用map 方法将字符串映射到小部件。

例子：

class SubjectsPage extends StatefulWidget {
  @override
  _SubjectsPageState createState() => new _SubjectsPageState();
}

class _SubjectsPageState extends State<SubjectsPage>
    with TickerProviderStateMixin {
  @override
  Widget build(BuildContext context) {
    var names = ["one", "two", "three", "four"];
    return Material(
      child: Container(
        child: Center(
          child: GridView.count(
            crossAxisCount: 2,
            padding: EdgeInsets.fromLTRB(16.0, 128.0, 16.0, 16.0),
            childAspectRatio: 8.0 / 8.5,
            children: names.map((String name) {
              return Cards(unit: name);
            }).toList(),
          ),
        ),
      ),
    );
  }
}

或者：你的选项二可以像

class SubjectsPage extends StatefulWidget {
  @override
  _SubjectsPageState createState() => new _SubjectsPageState();
}

class _SubjectsPageState extends State<SubjectsPage>
    with TickerProviderStateMixin {
  @override
  Widget build(BuildContext context) {
    var names = ["one", "two", "three", "four"];
    return Material(
      child: Container(
        child: Center(
          child: GridView.count(
            crossAxisCount: 2,
            padding: EdgeInsets.fromLTRB(16.0, 128.0, 16.0, 16.0),
            childAspectRatio: 8.0 / 8.5,
            children: [
                for(String name in names) Cards(unit:name)
            ],
          ),
        ),
      ),
    );
  }
}

希望有帮助！

【讨论】：

【解决方案2】：

您可以使用map 代替forEach。 map 函数类似于 forEach 循环，但有一个主要区别。

虽然map 和forEach 在语法上看起来很相似，但两者的主要区别在于map 函数在迭代后返回对象。

简洁地编写一个map 函数并根据需要获得输出：

  @override
  Widget build(BuildContext context) {

    var names = ["one", "two", "three", "four"];
    List<Widget> cards = names.map((name) =>  Cards(unit: name)).toList();

    return new Material(
      child: new Container(
        child: new Center(
          child: GridView.count(
            crossAxisCount: 2,
            padding: EdgeInsets.fromLTRB(16.0, 128.0, 16.0, 16.0),
            childAspectRatio: 8.0 / 8.5,
            children: cards,
          ),
        ),
      ),
    );
  }

【讨论】：