flutter - Flutter 在表单中添加更多字段

Question

我正在用颤振创建一个用于捕获数据的表单。捕获表单的一个区域应该能够捕获多个条目。如何使用按钮添加更多字段，以便用户可以输入多个条目。这是表格的一部分

  _Details() {
    return Column(
      children: <Widget>[
        Container(
          alignment: Alignment.center,
          width: double.infinity,
          color: Theme.of(context).accentColor,
          padding: const EdgeInsets.all(8.0),
          child: Text("Details "),
        ),
        SizedBox(
          height: 5.0,
        ),
        Padding(
          padding: const EdgeInsets.all(8.0),
          child: Column(
            mainAxisAlignment: MainAxisAlignment.start,
            // crossAxisAlignment: CrossAxisAlignment.stretch,
            mainAxisSize: MainAxisSize.min,
            children: <Widget>[
              TextFormField(
                controller: _bankController,
                decoration: InputDecoration(
                  hintText: 'Name',
                ),
              ),
              SizedBox(
                height: 5.0,
              ),
              TextFormField(
                controller: _bankController,
                decoration: InputDecoration(
                  hintText: 'Branch',
                ),
              )              
            ],
          ),
        ),
      ],
    );
  }

Answer 1

首先制作一个这样的模型类

    class TextFieldClass{
      TextEditingController controller = new TextEditingController();
      var hint;
    
      TextFieldClass({this.controller,this.hint});
    }

然后你只需要制作一个列表视图并在任何你想要的地方调用一个小部件函数，就像这样

      List<TextFieldClass> textFields = [];
    
      Widget list(){
        return Container(
          padding:EdgeInsets.symmetric(vertical: 10),
          
          child: ListView.builder(
              physics: NeverScrollableScrollPhysics(),
              shrinkWrap: true,
              itemCount: textFields.length,
              itemBuilder: (context,index){
                return Padding(
                    padding: EdgeInsets.symmetric(vertical: 5),
    
                    child:TextFormField(
                      controller: textFields[index].controller,
                      decoration: InputDecoration(
                        hintText:textFields[index].hint,
                      ),
                    )
                );
              }),
        );
      }

现在最后一部分您只需在列表中添加项目例如您制作一个添加按钮并在添加按钮的 onTap 函数中编写

 textFields.add(TextFieldClass(
  controller: newController,
  hint: 'new field'
));