Flutter 颤振:多个小部件使用相同的GlobalKey或重复的GlobalKey
我正在尝试创建一个动态表单,并使用TextFormField进行验证 下面的代码给出了使用同一全局键或重复全局键的多个小部件的错误。 我不知道如何修复这个问题,或者如何按照标准使动态表单干净Flutter 颤振:多个小部件使用相同的GlobalKey或重复的GlobalKey,flutter,Flutter,我正在尝试创建一个动态表单,并使用TextFormField进行验证 下面的代码给出了使用同一全局键或重复全局键的多个小部件的错误。 我不知道如何修复这个问题,或者如何按照标准使动态表单干净 import 'package:flutter/material.dart'; class App extends StatefulWidget { @override _AppState createState() => _AppState(); } class _AppState
import 'package:flutter/material.dart';
class App extends StatefulWidget {
@override
_AppState createState() => _AppState();
}
class _AppState extends State<App> {
final GlobalKey<FormState> _formKey = GlobalKey<FormState>();
String person;
String age;
String job;
var nameTECs = <TextEditingController>[];
var ageTECs = <TextEditingController>[];
var jobTECs = <TextEditingController>[];
var cards = <Card>[];
var nameController = TextEditingController();
var ageController = TextEditingController();
var jobController = TextEditingController();
@override
void initState() {
super.initState();
cards.add(createCard());
}
Card createCard() {
nameTECs.add(nameController);
ageTECs.add(ageController);
jobTECs.add(jobController);
return Card(
child:new Form(
key: _formKey,
child: Column(
mainAxisSize: MainAxisSize.min,
children: <Widget>[
Text('Person ${cards.length + 1}'),
TextFormField(
style: TextStyle(color: Colors.blue),
controller: nameController,
decoration: InputDecoration(labelText: 'Full Name'),
validator: validatetext,
onSaved: (String val) {
person = val;
},
),
TextFormField(
style: TextStyle(color: Colors.blue),
controller: ageController,
decoration: InputDecoration(labelText: 'Age'),
validator: validatetext,
onSaved: (String val) {
age = val;
},
),
TextFormField(
style: TextStyle(color: Colors.blue),
controller: jobController,
decoration: InputDecoration(labelText: 'Study/ job'),
validator: validatetext,
onSaved: (String val) {
job = val;
},
),
],
),
),
);
}
void _validateInputs() {
print('button');
if (_formKey.currentState.validate()) {
// If all data are correct then save data to out variables
_formKey.currentState.save();
_onDone();
}
}
_onDone() {
List<PersonEntry> entries = [];
for (int i = 0; i < cards.length; i++) {
var name = nameTECs[i].text;
var age = ageTECs[i].text;
var job = jobTECs[i].text;
entries.add(PersonEntry(name, age, job));
}
Navigator.pop(context, entries);
}
@override
Widget build(BuildContext context) {
return Scaffold(
appBar: AppBar(),
body: Column(
children: <Widget>[
Expanded(
child: ListView.builder(
itemCount: cards.length,
itemBuilder: (BuildContext context, int index) {
return cards[index];
},
),
),
Padding(
padding: const EdgeInsets.all(16.0),
child: RaisedButton(
child: Text('Add new'),
onPressed: () => setState(() => cards.add(createCard())),
),
),
Padding(
padding: const EdgeInsets.all(16.0),
child: RaisedButton(
child: Text('Remove last'),
onPressed: () => setState(() => cards.removeLast()),
),
)
],
),
floatingActionButton:
FloatingActionButton(child: Icon(Icons.save), onPressed: _validateInputs),
);
}
}
class PersonEntry {
final String name;
final String age;
final String studyJob;
PersonEntry(this.name, this.age, this.studyJob);
@override
String toString() {
return 'Person: name= $name, age= $age, study job= $studyJob';
}
}
String validatetext(String value) {
if (value.length < 5)
return 'More than 5 char is required';
else
return null;
}
导入“包装:颤振/材料.省道”;
类应用程序扩展StatefulWidget{
@凌驾
_AppState createState();
}
类_AppState扩展了状态{
最终的GlobalKey _formKey=GlobalKey();
线人;
弦年龄;
字符串作业;
var nameTECs=[];
var ageTECs=[];
var jobTECs=[];
var卡=[];
var nameController=TextEditingController();
var ageController=TextEditingController();
var jobController=TextEditingController();
@凌驾
void initState(){
super.initState();
添加(createCard());
}
卡片创建卡片(){
nameTECs.add(nameController);
ageTECs.add(ageController);
jobTECs.add(作业控制器);
回程卡(
儿童:新表格(
键:_formKey,
子:列(
mainAxisSize:mainAxisSize.min,
儿童:[
文本('Person${cards.length+1}'),
TextFormField(
样式:TextStyle(颜色:Colors.blue),
控制器:名称控制器,
装饰:输入装饰(标签文本:“全名”),
验证程序:validatetext,
onSaved:(字符串val){
person=val;
},
),
TextFormField(
样式:TextStyle(颜色:Colors.blue),
控制员:年龄控制员,
装饰:输入装饰(标签文本:“年龄”),
验证程序:validatetext,
onSaved:(字符串val){
年龄=val;
},
),
TextFormField(
样式:TextStyle(颜色:Colors.blue),
控制器:作业控制器,
装饰:输入装饰(标签文本:“学习/工作”),
验证程序:validatetext,
onSaved:(字符串val){
job=val;
},
),
],
),
),
);
}
void _validateInputs(){
打印(“按钮”);
if(_formKey.currentState.validate()){
//如果所有数据都正确,则将数据保存到out变量
_formKey.currentState.save();
_onDone();
}
}
_onDone(){
列表条目=[];
对于(int i=0;isetState(()=>cards.add(createCard()),
),
),
填充物(
填充:常数边集全部(16.0),
孩子:升起按钮(
子项:文本('Remove last'),
按下时:()=>设置状态(()=>cards.removeLast()),
),
)
],
),
浮动操作按钮:
浮动操作按钮(子:图标(Icons.save),按下时:_validateInputs),
);
}
}
阶级人格{
最后的字符串名;
最终管柱年龄;
最后的字符串学习工作;
personetry(this.name,this.age,this.studyJob);
@凌驾
字符串toString(){
返回'Person:name=$name,age=$age,studyJob=$studyJob';
}
}
字符串验证文本(字符串值){
如果(值。长度<5)
返回“需要超过5个字符”;
其他的
返回null;
}
以防有人想要完全的错误
The following assertion was thrown while finalizing the widget tree:
Multiple widgets used the same GlobalKey.
The key [LabeledGlobalKey<FormState>#89788] was used by multiple widgets. The parents of those widgets were:
- Semantics(container: false, properties: SemanticsProperties, label: null, value: null, hint: null, hintOverrides: null, renderObject: RenderSemanticsAnnotations#65de2 relayoutBoundary=up10)
- Semantics(container: false, properties: SemanticsProperties, label: null, value: null, hint: null, hintOverrides: null, renderObject: RenderSemanticsAnnotations#f4085 relayoutBoundary=up10)
A GlobalKey can only be specified on one widget at a time in the widget tree.
When the exception was thrown, this was the stack
#0 GlobalKey._debugVerifyGlobalKeyReservation.<anonymous closure>.<anonymous closure>.<anonymous closure>
package:flutter/…/widgets/framework.dart:246
#1 _LinkedHashMapMixin.forEach (dart:collection-patch/compact_hash.dart:379:8)
#2 GlobalKey._debugVerifyGlobalKeyReservation.<anonymous closure>.<anonymous closure>
package:flutter/…/widgets/framework.dart:193
#3 _LinkedHashMapMixin.forEach (dart:collection-patch/compact_hash.dart:379:8)
#4 GlobalKey._debugVerifyGlobalKeyReservation.<anonymous closure>
在完成小部件树时引发了以下断言:
多个小部件使用相同的GlobalKey。
多个小部件使用了键[LabeledGlobalKey#89788]。这些小部件的父部件是:
-语义(容器:false,属性:semanticProperties,标签:null,值:null,提示:null,hintOverrides:null,renderObject:renderManticsAnnotations 65de2relayoutBoundary=up10)
-语义(容器:false,属性:semanticProperties,标签:null,值:null,提示:null,hintOverrides:null,renderObject:renderManticsAnnotations#f4085 relayoutBoundary=up10)
在小部件树中,一次只能在一个小部件上指定GlobalKey。
当抛出异常时,这是堆栈
#0 GlobalKey.\u调试验证GlobalKey保留。。。
包:flatter/../widgets/framework.dart:246
#1 _LinkedHashMapMixin.forEach(dart:collection patch/compact_hash.dart:379:8)
#2 GlobalKey.\u调试验证GlobalKey保留。。
包:flatter/../widgets/framework.dart:193
#3_LinkedHashMapMixin.forEach(dart:collection patch/compact_hash.dart:379:8)
#4 GlobalKey._调试验证GlobalKey保留。
您使用的是相同的密钥\u formKey创建卡并将其添加到列表卡时,您应该为每张卡创建一个全局密钥,作为具有相同大小卡的列表,因此,每次您添加/删除一张卡时,您都会对全局密钥列表执行相同的操作,问题是您对所有表单使用相同的密钥\u formKey
。您可以创建一个列表
,其中包含Globalkey
和基于