[英]What's the best way to dynamically load form fields in flutter?
我的 TextFormFields 無法正常工作並導致頁面在我單擊它們時重建並且鍵盤未完全顯示。
我有一個包含 2 個下拉菜單和多個文本字段的表單。 下拉列表確定顯示哪些文本字段。 我通過執行以下操作來確定這一點:
Form(
key: _formKey,
child: Flex(
direction: Axis.vertical,
children: <Widget>[
//category field
new FormField<String>(
validator: this.validateField,
builder: (FormFieldState<String> state) {
return new DropdownButtonHideUnderline(
child: DropdownButton<String>(
hint: new Text('Select Category'),
value: exercise.categoryName,
items: categoryNameList.map((String value) {
return new DropdownMenuItem<String>(
value: value,
child: new Text(value),
);
}).toList(),
onChanged: (String val) {
setState(() {
//save category name to the exercise object to be saved
exercise.categoryName = val;
state.didChange(val);
// reset exercise dropdown when switching categories
exercise = new Exercise(
categoryName: val, cardioImperial: -1);
// get index of the selected category to be able to load the correct
// exercise list
_exerciseSelectedTextIndex =
categoryNameList.indexOf(val);
_exerciseSelectedList =
categoryList[_exerciseSelectedTextIndex]
.exerciseNames;
});
},
));
}),
// only load the exercise list once the category is selected
_exerciseSelectedList != null
? Container(
child:
Flex(direction: Axis.vertical, children: <
Widget>[
new FormField(
validator: this.validateField,
builder: (FormFieldState<String> state) {
return new DropdownButtonHideUnderline(
child: DropdownButton<String>(
hint: new Text('Select Exercise'),
value: exercise.name,
items: _exerciseSelectedList
.map((String value) {
return new DropdownMenuItem<String>(
value: value,
child: new Text(value),
);
}).toList(),
onChanged: (String val) {
setState(() {
exercise.name = val;
state.didChange(val);
});
},
));
}),
]))
: Container(),
//if cardio load time/length else load reps/quantity
_exerciseSelectedList != null
? categoryList[_exerciseSelectedTextIndex].cardio ==
true
? Flex(direction: Axis.vertical, children: <
Widget>[
Row(
mainAxisAlignment:
MainAxisAlignment.center,
children: <Widget>[
SizedBox(
width: 75.0,
child: TextFormField(
validator: this.validateField,
onSaved: (value) => exercise
.cardioLength = value,
keyboardType:
TextInputType.number,
decoration: InputDecoration(
hintText: 'Length',
),
)),
new Radio(
groupValue: exercise.cardioImperial,
value: 1,
onChanged: (value) => setState(() {
exercise.cardioImperial =
value;
}),
),
new Text('Miles'),
new Radio(
groupValue: exercise.cardioImperial,
value: 2,
onChanged: (value) => setState(() {
exercise.cardioImperial =
value;
}),
),
new Text('KM')
]),
// time fields
Row(
mainAxisAlignment:
MainAxisAlignment.center,
children: <Widget>[
Padding(
padding: const EdgeInsets.all(8.0),
child: SizedBox(
width: 30.0,
child: TextFormField(
validator: this.validateField,
onSaved: (value) =>
exercise.hh = value,
keyboardType:
TextInputType.number,
decoration: InputDecoration(
hintText: 'HH',
),
),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: SizedBox(
width: 30.0,
child: TextFormField(
validator: this.validateField,
onSaved: (value) =>
exercise.mm = value,
keyboardType:
TextInputType.number,
decoration: InputDecoration(
hintText: 'MM',
),
),
),
),
Padding(
padding: const EdgeInsets.all(8.0),
child: SizedBox(
width: 30.0,
child: TextFormField(
validator: this.validateField,
onSaved: (value) =>
exercise.ss = value,
keyboardType:
TextInputType.number,
decoration: InputDecoration(
hintText: 'SS',
),
),
),
)
])
])
// if not cardio, load quantity/reps
: Flex(
direction: Axis.vertical,
children: <Widget>[
SizedBox(
width: 75.0,
child: TextFormField(
onSaved: (value) =>
exercise.quantity = value,
keyboardType: TextInputType.number,
decoration: InputDecoration(
hintText: 'Weight',
),
),
),
// reps field
Padding(
padding: const EdgeInsets.all(8.0),
child: SizedBox(
width: 50.0,
child: TextFormField(
onSaved: (value) =>
exercise.reps = value,
keyboardType:
TextInputType.number,
decoration: InputDecoration(
hintText: 'Reps',
),
),
),
),
])
: Container(),
],
))
我希望當我選擇 Cardio (cardio == true) 時,可以單擊可用的 TextFormFields 並可以輸入數據。 顯示正確的字段,但當我單擊任何文本表單字段時,整個頁面都會重建。 有沒有更好的方法來構建允許預期行為的頁面?
該問題源於 ScaffoldState 和 FormState 存在於包含我的表單的 Stateful 小部件中。
我的應用程序的流程如下:
首頁 -> 第 1 頁 -> 第 2 頁(帶表格)
最初 ScaffoldState 和 FormState 存在於 Page2 上。 我保持相同的流程,但將 ScaffoldState 和 FormState 移動到 Page1,並將它們傳遞給 Page2 以供 Form 使用。 現在,當我單擊 TextFormField 時,它不會導致重建,並且保存功能按預期工作。
聲明:本站的技術帖子網頁,遵循CC BY-SA 4.0協議,如果您需要轉載,請注明本站網址或者原文地址。任何問題請咨詢:yoyou2525@163.com.