Flutter中TextField配合Consumer使用点击键盘done文本清空问题求助

问题根因 #

你在销售人员输入框外层的Consumer的builder回调中，每次widget触发重绘时都会直接将TextEditingController的文本强制覆盖为全局状态appState里的selectedSaleSource值。而你手动在TextField中输入内容时，没有同步将输入的内容更新到全局状态中，当点击键盘done按钮时会触发页面重绘，你输入的内容就会被全局状态里的值（如果没选过下拉默认是空值）覆盖，看起来就像被清空了。

修复方案 #

修改销售人员输入框对应的Consumer部分代码即可：

Container(
  width: 350,
  child: Consumer(builder: (context, watch, child) {
    final selectedSource = watch(appState).selectedSaleSource!;
    // 只有全局状态值和当前输入框内容不一致时才赋值，避免覆盖手动输入的内容、避免光标跳转问题
    if (selectedSource != salesPerson.text) {
      salesPerson.text = selectedSource;
    }
    return TextField(
      controller: salesPerson,
      keyboardType: TextInputType.text,
      textCapitalization: TextCapitalization.words,
      autocorrect: false,
      // 新增onChanged回调，把手动输入的内容同步到全局状态
      onChanged: (value) {
        context.read(appState).setSaleSource(value);
      },
      decoration: InputDecoration(
        border: OutlineInputBorder(borderSide: BorderSide(color: Colors.black)),
        labelText: 'Name',
      ),
    );
  }),
),

修改后不管是选择下拉菜单的选项，还是手动输入内容，全局状态和输入框内容都会保持同步，点击done按钮触发重绘也不会再出现内容被清空的问题。

内容的提问来源于stack exchange，提问作者RobbB