Question

Main.dart

我想在颤动中循环卡片。在Angular 2中只是* ngFor现在以同样的方式正常工作我怎么能循环它。我没有在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文件屏幕截图

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)),
                             )

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

Answer 2

万一上述解决方案出现错误，请将 .toList() 添加到

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

Answer 3

为了避免此错误：

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

只需放

最终

在这一行：

列表卡=新的List.generate（20，（i）=>新的CustomCard（））;

留下来：

最终列表卡=新的List.generate（20，（i）=>新的CustomCard（））;

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

3 个答案: