Question

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

问题是1。我不确定如何在小部件内执行for-each循环。 2.不确定如何使一个以上的参数有效。卡名和新页面的名称。

我已经尝试了一些选项，下面显示其中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'。”

Answer 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)
            ],
          ),
        ),
      ),
    );
  }
}

希望有帮助！

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

列表中每个项目的Flutter调用功能

2 个答案: