Flutter：为什么在将新记录保存到列表时更新以前的记录

Question

我创建了一个表单，其中包含四个用于用户输入数据的文本编辑字段和一个用于将数据保存到列表的按钮。

但是当我将第二条记录添加到列表时，第一条记录会自动更新，发生了什么。

IDE：VS 代码 Flutter SDK 版本：1.12.13+hotfix.8 操作系统：Windows 10

这是我的代码：

import 'package:flutter/material.dart'; 

class GridPage extends StatelessWidget { 

  @override
  Widget build(BuildContext context) {
    List<TextEditingController> gControlers = [];
    List<FocusNode> _fNodes = [];
    List<Map> gridRecords = [];
    _fNodes.addAll(new List<FocusNode>.generate(4, (_) => new FocusNode()));
    gControlers.addAll(new List<TextEditingController>.generate(
        4, (_) => new TextEditingController()));

    final formKey = GlobalKey<FormState>();
    List<Map> rowset = [
      {"command": "X1", "columnID": "1", "value": ""},
      {"command": "X2", "columnID": "2", "value": ""},
      {"command": "X3", "columnID": "3", "value": ""},
      {"command": "X4", "columnID": "4", "value": ""}
    ];

    return Scaffold(
      appBar: AppBar(
        title: Text('Doc Detail'),
      ),
      body: Center(
        child: Form(
          key: formKey,
          child: Column(children: [
            Expanded(
              child: Container(
                height: 100.0,
                child: Column(children: [
                  Card(
                    elevation: 5.0,
                    child: ListTile(
                      title: TextFormField(
                        decoration: InputDecoration(
                          labelText: 'Item',
                        ),
                        keyboardType: TextInputType.text,
                        autocorrect: false,
                        textInputAction: TextInputAction.next,
                        focusNode: _fNodes[0],
                        controller: gControlers[0],
                        autofocus: true,
                        onFieldSubmitted: (value) {
                          FocusScope.of(context).requestFocus(_fNodes[1]);
                        },
                      ),
                    )
                  ),
                  Card(
                    elevation: 5.0,
                    child: ListTile(
                      title: TextFormField(
                        decoration: InputDecoration(
                          labelText: 'Lot',
                        ),
                        keyboardType: TextInputType.text,
                        autocorrect: false,
                        textInputAction: TextInputAction.next,
                        focusNode: _fNodes[1],
                        controller: gControlers[1],
                        autofocus: true,
                        onFieldSubmitted: (value) {
                          FocusScope.of(context).requestFocus(_fNodes[2]);
                        },
                      ),
                    )
                  ),
                  Card(
                    elevation: 5.0,
                    child: ListTile(
                      title: TextFormField(
                        decoration: InputDecoration(
                          labelText: 'Location',
                        ),
                        textInputAction: TextInputAction.next,
                        focusNode: _fNodes[2],
                        controller: gControlers[2],
                        autofocus: true,
                        onFieldSubmitted: (value) {
                          FocusScope.of(context).requestFocus(_fNodes[3]);
                        },
                      ),
                    )
                  ),
                  Card(
                    elevation: 5.0,
                    child: ListTile(
                      title: TextFormField(
                        decoration: InputDecoration(
                          labelText: 'QTY',
                        ),
                        keyboardType: TextInputType.number,
                        autocorrect: false,
                        textInputAction: TextInputAction.next,
                        focusNode: _fNodes[3],
                        controller: gControlers[3],
                        autofocus: true,
                        onFieldSubmitted: (value) {
                          FocusScope.of(context).requestFocus(_fNodes[0]);
                        },
                      ),
                    )
                  ),
                ]),
              )
            ),
            RaisedButton(
              child: Text('New'),
              onPressed: () {
                int len = gridRecords.length;
                var t1 = getTextToRecord(rowset, len ?? 0,gControlers);
                gridRecords.add(t1);
                FocusScope.of(context).requestFocus(_fNodes[0]);
              }
            )
          ])
        )
      )
    );
  }

  Map getTextToRecord(List<Map> rowset, int length,List gControlers) {
    int x = 0;
    rowset.forEach((f) {
      f["value"] = gControlers[x].text;
      x = x+1;
    });

    Map _g1 = {};
    _g1["line"] = length + 1;
    _g1["valueMap"] = rowset;
    return _g1;
  }
}

列表 gridRecords 中的所有记录将根据上次输入的数据自动更新，请帮助，谢谢。

Answer 1

请尝试以下代码并检查输出

class GridPage extends StatefulWidget {
  @override
  _GridPageState createState() => _GridPageState();
}

class _GridPageState extends State<GridPage> {
  List<Map> gridRecords = [];
  List<TextEditingController> gControlers = [];
  List<FocusNode> _fNodes = [];
  final formKey = GlobalKey<FormState>();

  @override
  void initState() {
    super.initState();
    _fNodes.addAll(new List<FocusNode>.generate(4, (_) => new FocusNode()));
    gControlers.addAll(new List<TextEditingController>.generate(
        4, (_) => new TextEditingController()));
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
        appBar: AppBar(
          title: Text('Doc Detail'),
        ),
        body: Center(
            child: Form(
                key: formKey,
                child: Column(children: [
                  Flexible(
                      child: ListView(children: [
                    Card(
                        elevation: 5.0,
                        child: ListTile(
                          title: TextFormField(
                            decoration: InputDecoration(
                              labelText: 'Item',
                            ),
                            keyboardType: TextInputType.text,
                            autocorrect: false,
                            textInputAction: TextInputAction.next,
                            focusNode: _fNodes[0],
                            controller: gControlers[0],
                            autofocus: true,
                            onFieldSubmitted: (value) {
                              FocusScope.of(context).requestFocus(_fNodes[1]);
                            },
                          ),
                        )),
                    Card(
                        elevation: 5.0,
                        child: ListTile(
                          title: TextFormField(
                            decoration: InputDecoration(
                              labelText: 'Lot',
                            ),
                            keyboardType: TextInputType.text,
                            autocorrect: false,
                            textInputAction: TextInputAction.next,
                            focusNode: _fNodes[1],
                            controller: gControlers[1],
                            autofocus: true,
                            onFieldSubmitted: (value) {
                              FocusScope.of(context).requestFocus(_fNodes[2]);
                            },
                          ),
                        )),
                    Card(
                        elevation: 5.0,
                        child: ListTile(
                          title: TextFormField(
                            decoration: InputDecoration(
                              labelText: 'Location',
                            ),
                            textInputAction: TextInputAction.next,
                            focusNode: _fNodes[2],
                            controller: gControlers[2],
                            autofocus: true,
                            onFieldSubmitted: (value) {
                              FocusScope.of(context).requestFocus(_fNodes[3]);
                            },
                          ),
                        )),
                    Card(
                        elevation: 5.0,
                        child: ListTile(
                          title: TextFormField(
                            decoration: InputDecoration(
                              labelText: 'QTY',
                            ),
                            keyboardType: TextInputType.number,
                            autocorrect: false,
                            textInputAction: TextInputAction.next,
                            focusNode: _fNodes[3],
                            controller: gControlers[3],
                            autofocus: true,
                            onFieldSubmitted: (value) {
                              FocusScope.of(context).requestFocus(_fNodes[0]);
                            },
                          ),
                        )),
                  ])),
                  RaisedButton(
                    child: Text('New'),
                    onPressed: () {
                      for (int i = 0; i < 4; i++) {
                        Map _g1 = Map();
                        _g1["line"] = i + 1;
                        _g1["valueMap"] = {
                          "command": 'X' + (i + 1).toString(),
                          "columnID": i + 1,
                          "value": gControlers[i].text
                        };
                        gridRecords.add(_g1);
                        gControlers[i].clear();
                      }
                      FocusScope.of(context).requestFocus(_fNodes[0]);
                      print("size of list" + gridRecords.toString());
                    },
                  )
                ]))));
  }
}