Flutter：糖尿病追踪应用中TextFormField输入文本时持续重载/重建问题

嘿，这种输入时键盘闪来闪去、页面不停重建的问题真的超烦，我之前做表单也踩过类似的坑，咱们一步步来捋清楚怎么解决！

1. 先查TextEditingController的创建位置 #

这是最容易踩的坑！如果你每次在build方法里新建TextEditingController，那每输入一个字符，页面重建时就会重新生成控制器，直接导致输入状态丢失+页面刷新。

正确的做法是在initState里初始化控制器，dispose里销毁它：

late final TextEditingController _glycemiaController;

@override
void initState() {
  super.initState();
  _glycemiaController = TextEditingController();
}

@override
void dispose() {
  // 记得销毁控制器，避免内存泄漏
  _glycemiaController.dispose();
  super.dispose();
}

然后在TextFormField里直接用这个全局的控制器：

TextFormField(
  controller: _glycemiaController,
  decoration: const InputDecoration(labelText: 'Glycémie'),
  keyboardType: TextInputType.number,
)

2. 检查有没有不必要的setState调用 #

很多人会在onChanged回调里随手写setState(() {})，但如果只是要暂存输入值，完全没必要触发整个页面的重建——控制器本身就会帮你保存输入状态啊！

比如别这么写：

// 错误示例：每次输入都触发页面重建
onChanged: (value) {
  setState(() {
    _currentGlycemiaValue = value;
  });
}

如果只是要获取输入值，直接用_glycemiaController.text就行，真的需要更新其他UI元素时再用setState，别没事就触发重建。

3. 防止父组件重建牵连到表单 #

如果你的血糖输入表单是某个父组件的子控件，那父组件的状态更新可能会带着子组件一起重建。这时候可以给表单组件加个const构造函数（如果是无状态组件），或者用AutomaticKeepAliveClientMixin来保持状态（如果是有状态组件）。

比如给有状态组件加保活：

class GlycemiaInputForm extends StatefulWidget {
  const GlycemiaInputForm({super.key}); // 加const构造

  @override
  State<GlycemiaInputForm> createState() => _GlycemiaInputFormState();
}

class _GlycemiaInputFormState extends State<GlycemiaInputForm> with AutomaticKeepAliveClientMixin {
  // 告诉Flutter要保持这个组件的状态
  @override
  bool get wantKeepAlive => true;

  @override
  Widget build(BuildContext context) {
    super.build(context); // 必须调用这个方法，不然保活不生效
    return Form(
      // 你的表单内容
    );
  }
}

4. 状态管理库别瞎用 #

如果你用了Provider、Riverpod这类状态管理工具，别在onChanged里就急着更新全局状态！每次输入一个字符就触发全局状态更新，肯定会导致整个页面甚至更多组件重建，键盘不闪才怪。

正确的做法是：输入时只用控制器暂存值，等用户点击“保存”按钮时，再把值提交到全局状态里：

ElevatedButton(
  onPressed: () {
    final inputValue = _glycemiaController.text;
    // 这里再更新全局状态
    // context.read<GlycemiaProvider>().saveValue(inputValue);
  },
  child: const Text('Sauvegarder'),
)

5. 检查Form的Key #

如果你的表单用了GlobalKey<FormState>，别每次build都新建一个！要把它存在State里，不然每次重建都会生成新的Key，导致Form重置状态：

late final GlobalKey<FormState> _formKey;

@override
void initState() {
  super.initState();
  _formKey = GlobalKey<FormState>();
}

// 然后在Form里用这个key
Form(
  key: _formKey,
  child: ...,
)

按这个顺序排查下来，基本就能解决输入时页面重建、键盘闪烁的问题啦！

备注：内容来源于stack exchange，提问作者khmira