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

【问题标题】：Flutter Cards - How to Loop a card widgets in FlutterFlutter Cards - 如何在 Flutter 中循环卡片小部件
【发布时间】：2018-04-13 14:24:04
【问题描述】：

Main.dart

我想在颤振中循环卡片。因为在 Angular 2 中，*ngFor 现在可以正常工作，我如何循环它。我在颤振网络上找不到和文档。您将在屏幕截图中找到输出请帮助我了解如何循环卡片或任何其他小部件

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 flutter flutter-layout

【解决方案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)),
                             )

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

【讨论】：

生成列表时抛出错误。但是在添加 .toList() 之后，它工作正常。不要为什么我们需要添加 .toList()。 ://
你能解释一下你是如何添加 .toList() 的吗？
将 .toList() 添加到列表卡 = new List.generate(20, (i)=>new CustomCard()).toList();

【解决方案2】：

如果有人对上述解决方案有错误，请添加.toList()到

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

【讨论】：

【解决方案3】：

为了避免这个错误：

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

随便放

最终

在这一行：

列出卡片 = new List.generate(20, (i)=>new CustomCard());

留下来：

最终列表卡片 = new List.generate(20, (i)=>new CustomCard());

【讨论】：