Flutter TextFormField表单保存后未更新食材列表问题

问题详情 #

开发Flutter多字段表单时，用于收集食材的TextFormField出现异常：已将_ingredientsController绑定到该字段，执行_formKey.currentState!.save()保存表单时，预期_ingredients会从_ingredientsController.text分割为食材列表，但保存后_ingredients仍为空数组[]，尽管_ingredientsController.text的输入内容显示正确。

已排查步骤 #

• 在initState()中初始化_ingredientsController
• 在TextFormField中实现onSaved回调，尝试从_ingredientsController.text更新_ingredients
• 提交按钮逻辑中确保先调用_formKey.currentState!.validate()再执行save()
• 使用print语句调试，检查表单保存后及_saveRecipe()中_ingredients的状态

预期行为 #

表单保存后，_ingredients应包含从_ingredientsController.text分割出的食材列表。例如输入Ingredient 1\nIngredient 2时，_ingredients应为['Ingredient 1', 'Ingredient 2']。

实际行为 #

调试print语句显示，尽管_ingredientsController.text内容正确，但保存表单后_ingredients仍为[]。

代码示例 #

class _AddRecipeScreenState extends ConsumerState<AddRecipeScreen> {
  final _formKey = GlobalKey<FormState>();
  final TextEditingController _ingredientsController = TextEditingController();
  List<String> _ingredients = [];

  @override
  void initState() {
    super.initState();
    _ingredientsController.text = _ingredients.join('\n');
  }

  @override
  void dispose() {
    _ingredientsController.dispose();
    super.dispose();
  }

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Padding(
        padding: const EdgeInsets.all(16.0),
        child: Form(
          key: _formKey,
          child: ListView(
            children: [
              // 食材输入框
              TextFormField(
                controller: _ingredientsController,
                maxLines: null,
                keyboardType: TextInputType.multiline,
                decoration: InputDecoration(
                  labelText: 'Ingredients',
                  border: OutlineInputBorder(
                    borderRadius: BorderRadius.circular(10.0),
                  ),
                ),
                validator: (value) {
                  if (value == null || value.isEmpty) {
                    return 'Please enter ingredients';
                  }
                  return null;
                },
                onSaved: (value) {
                  _ingredients = value!.split('\n');
                },
              ),
              // 提交按钮
              ElevatedButton(
                onPressed: () {
                  if (_formKey.currentState!.validate()) {
                    _formKey.currentState!.save();
                    print('Ingredients after form saved: $_ingredients');
                    _saveRecipe();
                  }
                },
                child: Text('Add Recipe'),
              ),
            ],
          ),
        ),
      ),
    );
  }

  // 保存食谱方法
  Future<void> _saveRecipe() async {
    print("Now Let's check ingredients : " + _ingredients.toString());

    // 准备保存到Firestore的数据模型
    final mealModel = MealModel(
      ingredients: _ingredients,
    );

    // 调用Firestore保存方法
    addRecipeToFirestore(mealModel);
  }
}

Flutter版本 #

• Flutter 3.22.1（stable通道）
• Framework修订版本：a14f74ff3a（3周前，2024-05-22 11:08:21 -0500）
• Engine修订版本：55eae6864b
• Tools：Dart 3.4.1、DevTools 2.34.3

解决方案 #

问题出在TextFormField绑定控制器后，onSaved的value参数可能无法同步最新输入内容。直接读取控制器的text属性即可解决：

修改方案1：调整onSaved回调 #

onSaved: (value) {
  // 直接使用控制器的实时文本值
  _ingredients = _ingredientsController.text.split('\n');
  // 可选：过滤空行，避免无效元素
  _ingredients = _ingredients.where((item) => item.trim().isNotEmpty).toList();
}

修改方案2：手动在保存后更新列表 #

ElevatedButton(
  onPressed: () {
    if (_formKey.currentState!.validate()) {
      _formKey.currentState!.save();
      // 跳过onSaved，直接从控制器取值分割
      _ingredients = _ingredientsController.text.split('\n');
      _ingredients = _ingredients.where((item) => item.trim().isNotEmpty).toList();
      print('Ingredients after form saved: $_ingredients');
      _saveRecipe();
    }
  },
  child: Text('Add Recipe'),
),

原因说明 #

当TextFormField绑定TextEditingController时，框架优先通过控制器管理文本状态，onSaved的value参数可能存在同步延迟，直接读取控制器的text能确保获取到实时输入内容。

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