如何动态地将小部件添加到Flutter中的列?

esu*_*esu 4 flutter flutter-layout

我在里面添加了一些小部件 ListView.这样我就可以滚动所有小部件.现在我需要再添加一个小部件ListView来加载注释列表.我无法添加ListView内部ListView.此外,我不需要单独的滚动条来表达我的意见.它应该与内部的小部件一起滚动ListView.所以我计划添加Column而不是ListView.可以帮助我动态添加我的评论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

            ],
          ),
        ),
Run Code Online (Sandbox Code Playgroud)

use*_*216 15

其他方式:

return Column(
      children: [
        for(String item in list) Text(item);

    ]);
Run Code Online (Sandbox Code Playgroud)

在这种情况下,您还可以轻松混合静态和动态字段:

return Column(
          children: [
            for(String item in list) Text(item),
          Text("Static text control"),
   
        ]);
Run Code Online (Sandbox Code Playgroud)


Der*_*kin 14

如果您已经有了注释数据,只需创建一个List,然后将其传递给该children属性Column.就像是:

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,),
        ],
      ),
    ),
Run Code Online (Sandbox Code Playgroud)

如果您还没有获取注释数据并需要获取它,请在将来完成后使用FutureBuilder构建UI.


Gen*_* Bo 7

通过维护对对象的引用Column,可以在声明对象.children后引用字段/属性- 如下所示:Column

Column someColumn = Column(
  children: [],
);

someColumn.children.add(Text('Hello 123'));
Run Code Online (Sandbox Code Playgroud)


Pot*_*ips 6

目前(2021-06),Flutter 2.x 实现了 null-safe。@Gene Bo 的答案应该有效,但几乎不需要修改。

这应该有效。

var pwdWidgets = <Widget>[];

Column(
  mainAxisAlignment: MainAxisAlignment.center,
  crossAxisAlignment: CrossAxisAlignment.center,
  children: this.pwdWidgets,
),

ElevatedButton(
  onPressed: (){
    setState((){
      this.pwdWidgets.add(Text("Hello World"),);
    });
  },
  child: Text("click me"),
),
Run Code Online (Sandbox Code Playgroud)