Flutter TextFormField输入触发Changing Content Warning报错如何解决
问题根因
- 未给
TextFormField绑定独立的TextEditingController,输入内容触发组件重绘时,系统会重建输入连接,导致原有连接失效抛出警告 - 嵌套了两层同滚动方向的
ListView,输入时组件树重建会触发滚动组件的重绘逻辑,打断输入法和输入框的连接状态
修复方案
- 在State中为两个输入框分别初始化
TextEditingController,并在组件销毁时释放资源 - 替换
AddressInput中不必要的ListView为Column,避免嵌套滚动导致的异常重绘。如果业务场景确实需要保留内层ListView,可给内层ListView添加physics: const NeverScrollableScrollPhysics()属性,禁止内层滚动,避免和外层ListView冲突
修复后完整代码
class AddressInput extends StatefulWidget { @override _AddressInputState createState() => _AddressInputState(); } class _AddressInputState extends State<AddressInput> { // 声明独立的TextEditingController late final TextEditingController _line1Controller; late final TextEditingController _line2Controller; @override void initState() { super.initState(); _line1Controller = TextEditingController(); _line2Controller = TextEditingController(); } @override void dispose() { // 释放Controller资源 _line1Controller.dispose(); _line2Controller.dispose(); super.dispose(); } TextFormField addressLine(String? hint, String? label, bool isRequired, TextEditingController controller) { return TextFormField ( // 绑定Controller controller: controller, decoration: InputDecoration( hintText: hint, labelText: label, ), validator: (value) { if ((value == null || value.isEmpty) && isRequired) { return 'Required'; } return null; }, ); } @override Widget build(BuildContext context) { // 替换ListView为Column,若需保留ListView可改为下方注释代码 // return ListView( // shrinkWrap: true, // physics: const NeverScrollableScrollPhysics(), // children: [ return Column( mainAxisSize: MainAxisSize.min, children: [ Container(child: addressLine("Address Line 1", "Line 1", true, _line1Controller)), Container(child: addressLine("Address Line 2", "Line 2", false, _line2Controller)), ] ); } }
主类代码无需修改,后续表单提交时可直接通过_line1Controller.text、_line2Controller.text获取对应输入框的内容。
内容的提问来源于stack exchange,提问作者Alex Childs
相关产品推荐
相关产品推荐

