将表单数据多次添加到列表中

Question

我试图在列表中收集多个表单数据，然后将列表传递到不同的屏幕。 问题是，list只包含最后一个表单中的数据

这是代码：

class _MyHomePageState extends State<MyHomePage> {
  Map<String, dynamic> _formdata ={};
  List _collection =[];

  void _addcollections() {
    setState(() {

      _collection =List.from(_collection)
      ..add(_formdata);

    });
    print(_collection);
  }

  InputDecoration _decoration({String hint}) {
    return InputDecoration(
      hintText: hint,
      labelText: hint,
      border: OutlineInputBorder(
        gapPadding: 4,
        borderRadius: BorderRadius.circular(4),
      ),
    );
  }
  @override
  Widget build(BuildContext context) {

    return Scaffold(
      appBar: AppBar(
        title: Text(widget.title),
      ),
      body: Center(
        child: Column(
          mainAxisAlignment: MainAxisAlignment.center,
          children: <Widget>[
           TextField(
             decoration: _decoration(hint: 'Name'),
             onChanged: (val)=>_formdata['name']=val,
           ),
           TextField(
             decoration: _decoration(hint: 'Age'),
             onChanged: (val)=>_formdata['age']=val,
           ),
           TextField(
             decoration: _decoration(hint: 'Sex'),
             onChanged: (val)=>_formdata['sex']=val,
           ),
          ],
        ),
      ),
      floatingActionButton: FloatingActionButton(
        onPressed: _addcollections,
        tooltip: 'Increment',
        child: Icon(Icons.add),
      ),
    );
  }
}

我正在打印我的列表集合的内容，这是我得到的结果。

first fab click: [{name: a, age: 1, sex: m}]
second fab click: [{name: b, age: 2, sex: f}, {name: b, age: 2, sex: f}]

Answer 1

如果要将表单数据多次添加到列表中，则可以执行以下操作：

首先创建User模型如下：

class User {
  String name;
  String age;
  String sex;

  User({
    this.name,
    this.age,
    this.sex,
  });

  factory User.fromJson(Map<String, dynamic> json) => new User(
    name: json["name"],
    age: json["age"],
    sex: json["sex"],
  );

  Map<String, dynamic> toJson() => {
    "name": name,
    "age": age,
    "sex": sex,
  };
}

然后下面是listview的示例，它将通过单击“添加”按钮动态显示用户列表

import 'package:flutter/material.dart';
import 'package:flutter_app/models/User.dart';

class MyFormAddList extends StatefulWidget {
  createState() {
    return StateKeeper();
  }
}

class StateKeeper extends State<MyFormAddList> {
  final _formKey = GlobalKey<FormState>();

  List<User> userList = new List();
  User user = new User();

  InputDecoration _decoration({String hint}) {
    return InputDecoration(
      hintText: hint,
      labelText: hint,
      border: OutlineInputBorder(
        gapPadding: 4,
        borderRadius: BorderRadius.circular(4),
      ),
    );
  }

  void _addcollections(User user) {
    setState(() {
      userList.add(user);
      this.user = new User();
    });
  }

  @override
  Widget build(BuildContext context) {

    return Container(
      color: Colors.white,
      child: Center(
        child: Form(

          key: _formKey,
          child: Column(

            mainAxisAlignment: MainAxisAlignment.start,
            children: <Widget>[

              Column(
                mainAxisAlignment: MainAxisAlignment.center,
                children: <Widget>[
                  TextField(
                    decoration: _decoration(hint: 'Name'),
                    onChanged: (val)=>user.name = val,
                  ),
                  TextField(
                    decoration: _decoration(hint: 'Age'),
                    onChanged: (val)=>user.age = val,
                  ),
                  TextField(
                    decoration: _decoration(hint: 'Sex'),
                    onChanged: (val)=>user.sex = val,
                  ),
                ],
              ),

              Container(
                height: 200.0,
                child: ListView.builder(
                  itemCount: userList.length,
                  itemBuilder: (context, index) {
                    return Card(
                      child: Padding(
                        padding: const EdgeInsets.all(16.0),
                            child: Text("Name: " + userList[index].name
                                + ", Age: " + userList[index].age
                                + ", Sex: " + userList[index].sex
                              , style: TextStyle(fontSize: 22.0),),
                      ),
                    );
                  },),
              ),

              Padding(
                padding: const EdgeInsets.only(top: 50),
              ),
              ButtonTheme(
                minWidth: 200,
                height: 50,
                child: RaisedButton(
                  onPressed: () => _addcollections(user),
                  child: Text('Add User', style: new TextStyle(fontSize: 20),), textColor: Colors.white,
                  color: Colors.blue,
                  shape: new RoundedRectangleBorder(borderRadius: new BorderRadius.circular(30.0)),
                ),
              ),


            ],

          ),

        ),
      ),

    );
  }

}