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

Question

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

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

IDE:VS代码flutter SDK版本：1.12.13+修补程序.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());
},
)
]))));
}
}