如何将小部件动态添加到 Flutter 中的列? [英] How to add the widgets dynamically to column in Flutter?

问题描述

我在 ListView 中添加了一些小部件.这样我就可以滚动所有小部件.现在我需要向 ListView 添加一个小部件来加载评论列表.我无法在 ListView 中添加 ListView.此外，我的评论不需要单独的滚动条.它应该与 ListView 内的小部件一起滚动.所以我打算添加 Column 而不是 ListView.在 Columns 中动态添加我的评论有什么帮助吗?

I have added a few widgets inside the ListView. So that I can scroll all widgets. Now I required to add one more widget to the ListView to load the list of comments. I can not add the ListView inside the ListView. And moreover, I do not require the separate scroll for my comments. It should be scroll along with the widgets inside the ListView. So I planned to add the Column instead of ListView. Could any help to add my comments dynamically in the Columns?

new Expanded(
          child:
          new ListView(
            shrinkWrap: true,
            children: <Widget>[

              // Title

              new Padding(padding: const EdgeInsets.only(
                  top: 10.00, left: 10.00),
                child: new Text(
                  _feed.title, textAlign: TextAlign.start,),
              ),

              // content

              new Container(
                child: new Text(
                  _feed.content, textAlign: TextAlign.start,),
              ),

              // Comments List will go here

            ],
          ),
        ),

推荐答案

如果你已经有了评论数据，只需创建一个 List，然后将其传递给 Column 的 children 属性.比如:

If you have the comments data already, simply create a List, then pass it to the children property of the Column. Something like:

var commentWidgets = List<Widget>();
for (var comment in comments) {
  commentWidgets.Add(Text(comment.text)); // TODO: Whatever layout you need for each widget.
}
…

new Expanded(
      child:
      new ListView(
        shrinkWrap: true,
        children: <Widget>[

          // Title

          new Padding(padding: const EdgeInsets.only(
              top: 10.00, left: 10.00),
            child: new Text(
              _feed.title, textAlign: TextAlign.start,),
          ),

          // content

          new Container(
            child: new Text(
              _feed.content, textAlign: TextAlign.start,),
          ),

          // Comments List will go here
          Column(children: commentWidgets,),
        ],
      ),
    ),

如果您还没有评论数据并且需要获取它，请使用 FutureBuilder 在未来完成后构建 UI.

If you don't have the comments data already and need to fetch it, use a FutureBuilder to build the UI once the future completes.

这篇关于如何将小部件动态添加到 Flutter 中的列?的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！