Flutter卡片 - 如何在Flutter中循环卡片小部件

Question

Main.dart

我想在Flutter中循环卡片。在Angular 2中，只需要使用*ngFor就可以正常工作，那么在Flutter中如何循环呢？我没有在Flutter Web的文档中找到相关内容。您可以在屏幕截图中看到输出结果。请帮助我了解如何循环卡片或任何其他小部件。

class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        home:new MyCard()
    );
  }
}
class MyCard extends StatelessWidget{
  @override
  Widget build(BuildContext context) {
    Widget allcards;
      return new Scaffold(
            appBar: new AppBar(
              title: new Text('My First App'),
              backgroundColor:new Color(0xFF673AB7),
            ),
            body: new Container(
              child: new Column(
                children: <Widget>[
                  new Card(
                    child: new Column(
                      children: <Widget>[
                        new Image.network('https://i.ytimg.com/vi/fq4N0hgOWzU/maxresdefault.jpg'),
                        new Padding(
                          padding: new EdgeInsets.all(7.0),
                          child: new Row(
                            children: <Widget>[
                             new Padding(
                               padding: new EdgeInsets.all(7.0),
                               child: new Icon(Icons.thumb_up),
                             ),
                             new Padding(
                               padding: new EdgeInsets.all(7.0),
                               child: new Text('Like',style: new TextStyle(fontSize: 18.0),),
                             ),
                             new Padding(
                               padding: new EdgeInsets.all(7.0),
                               child: new Icon(Icons.comment),
                             ),
                             new Padding(
                               padding: new EdgeInsets.all(7.0),
                               child: new Text('Comments',style: new TextStyle(fontSize: 18.0)),
                             )

                            ],
                          )
                        )
                      ],
                    ),
                  )
                ],
              ),

            )

        );

    }
}`

这是我的Dart文件截图

- HaSnen Tai

Answer 1

就像Angular2一样，拥有一个可迭代对象来循环遍历是使任何循环工作的关键。

因此，我对您的代码进行了一些重构，并添加了列表，将Column更改为ListView，这是结果：

  class MyApp extends StatelessWidget {
  // This widget is the root of your application.
  @override
  Widget build(BuildContext context) {
    return new MaterialApp(
        home:new MyCard()
    );
  }
}
class MyCard extends StatelessWidget{
  List cards = new List.generate(20, (i)=>new CustomCard());
  @override
  Widget build(BuildContext context) {
      return new Scaffold(
            appBar: new AppBar(
              title: new Text('My First App'),
              backgroundColor:new Color(0xFF673AB7),
            ),
            body: new Container(
              child: new ListView(
                children: cards,
              )

            )

        );

    }
}

class CustomCard extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
              return  new Card(
                    child: new Column(
                      children: <Widget>[
                        new Image.network('https://i.ytimg.com/vi/fq4N0hgOWzU/maxresdefault.jpg'),
                        new Padding(
                          padding: new EdgeInsets.all(7.0),
                          child: new Row(
                            children: <Widget>[
                             new Padding(
                               padding: new EdgeInsets.all(7.0),
                               child: new Icon(Icons.thumb_up),
                             ),
                             new Padding(
                               padding: new EdgeInsets.all(7.0),
                               child: new Text('Like',style: new TextStyle(fontSize: 18.0),),
                             ),
                             new Padding(
                               padding: new EdgeInsets.all(7.0),
                               child: new Icon(Icons.comment),
                             ),
                             new Padding(
                               padding: new EdgeInsets.all(7.0),
                               child: new Text('Comments',style: new TextStyle(fontSize: 18.0)),
                             )

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

- Shady Aziza

---

生成列表时出现错误。但添加 .toList() 后，它可以正常工作。不知道为什么需要添加 .toList()。:/ - Tushar Pol

你能解释一下你是如何添加 .toList() 的吗？ - khan

将 .toList() 添加到：List cards = new List.generate(20, (i)=>new CustomCard()).toList(); - PradeepKN

Answer 2

如果以上解决方案出现错误，请在下面的代码中添加.toList()：

List cards = new List.generate(20, (i)=>new CustomCard()).toList();

- PradeepKN

Answer 3

为了避免这个错误：

这个类（或者继承自该类的类）被标记为 '@immutable'，但其中一个或多个实例字段不是最终状态：

只需在此处添加：

final

在此行上：

List cards = new List.generate(20, (i)=>new CustomCard());

修改为：

final List cards = new List.generate(20, (i)=>new CustomCard());

- Kleyber Derick