大家
我正在使用 Form 和 TextFieldForm,没有任何自己的 TextEditController。有 3 个带有初始值的 TextFieldForm(Value_1、Value_2、Total)。当我编辑第一个时,“总计”文本字段应包含计算结果。为了更新小部件,我使用 setState。变量 _total 和 Text 小部件始终具有正确的计算值,但 Total 文本字段不想更新的问题。
为什么?是否可以不使用自己的 TextEditController 来完成?
import 'package:flutter/material.dart';
void main() => runApp(MyApp());
class MyApp extends StatelessWidget {
@override
Widget build(BuildContext context) {
return MaterialApp(
home: TestForm(),
);
}
}
class TestForm extends StatefulWidget {
@override
_TestFormState createState() => _TestFormState();
}
class _TestFormState extends State<TestForm> {
GlobalKey<FormState> _formKey = GlobalKey();
int _value1 = 0;
int _value2 = 20;
int _total = 0;
@override
Widget build(BuildContext context) {
print('rebuild');
return Scaffold(
appBar: AppBar(title: Text('test form')),
body: Padding(
padding: const EdgeInsets.all(16.0),
child: Form(
key: _formKey,
child: ListView(
children: <Widget>[
TextFormField(
initialValue: _value1.toString(),
decoration: InputDecoration(
labelText: 'Value_1',
),
keyboardType: TextInputType.number,
onChanged: (value) {
setState(() {
_total = int.parse(value) * _value2;
print('total: ' + _total.toString());
});
},
),
TextFormField(
initialValue: _value2.toString(),
keyboardType: TextInputType.number,
decoration: InputDecoration(
labelText: 'Value_2',
),
),
TextFormField(
initialValue: _total.toString(),
keyboardType: TextInputType.number,
decoration: InputDecoration(
labelText: 'Total',
),
),
SizedBox(height: 20),
Text('total: ' + _total.toString()),
],
),
),
),
);
}
}
如果您有一个反应性数据源,即可以根据网络更新或其他数据进行更改的数据,对我有用的一个技巧是使用
Key
。
通过制作反应数据 (
Key
) 的 toString()
,每次 Key
更改时,表单字段都会更改。
所以在这种情况下你可以这样做:
TextFormField(
key: Key(_total.toString()), // <- Magic!
initialValue: _total.toString(),
keyboardType: TextInputType.number,
decoration: InputDecoration(
labelText: 'Total',
),
),
我使用了这样简单的东西:
TextFormField(
controller: TextEditingController()..text = '23232',
keyboardType: TextInputType.number,
decoration: InputDecoration(
labelText: 'Total',
),
),
我使用了这个,它对我有用(很快更新验证器):
TextFormField(
// trigger validation as soon as this field value has been changed
autovalidateMode: AutovalidateMode.onUserInteraction,
),