Flutter复用TextFormField时onSaved无法获取数据的问题

你的代码存在三个关键错误，导致无法获取输入值并在SnackBar中显示：

1. 错误的Form嵌套结构 #

你在AuthTextfields组件内部给每个TextFormField都包裹了一个Form，还将主组件的GlobalKey<FormState>传入这个内部Form。这会导致Form的状态管理完全混乱——正确的逻辑应该是在主组件中只创建一个顶层Form，所有输入组件（AuthTextfields）都放在这个顶层Form内部，每个输入框不需要单独套Form。

2. 赋值运算符使用错误 #

在saveTxt回调里，你误用了比较运算符==而非赋值运算符=：

userName == txt; // 这是判断相等，不会修改userName的值

正确写法是：

userName = txt;

3. save方法未实际执行 #

按钮点击时，你只是引用了save方法，没有调用它：

formGlobal.currentState!.save; // 缺少括号，未触发方法执行

正确写法是：

formGlobal.currentState!.save();

修正后的完整代码 #

1. 重构AuthTextfields组件（移除内部Form） #

class AuthTextfields extends StatelessWidget {
  const AuthTextfields({
    super.key,
    required this.inputType,
    required this.autoCorrect,
    required this.enableSuggestion,
    required this.labTxt,
    required this.iconData,
    required this.saveTxt,
    required this.vaildCheck,
  });

  final TextInputType inputType;
  final bool autoCorrect;
  final bool enableSuggestion;
  final String labTxt;
  final IconData iconData;
  final String Function(String vaildTxt) vaildCheck;
  final void Function(String txt) saveTxt;

  @override
  Widget build(BuildContext context) {
    return TextFormField(
      style: const TextStyle(color: Colors.white),
      keyboardType: inputType,
      autocorrect: autoCorrect,
      enableSuggestions: enableSuggestion,
      decoration: InputDecoration(
        labelText: labTxt,
        border: const OutlineInputBorder(),
        prefixIcon: Icon(
          iconData,
          color: Theme.of(context).colorScheme.primary,
        ),
      ),
      validator: (value) {
        return vaildCheck(value!);
      },
      onSaved: (newValue) => saveTxt(newValue!),
    );
  }
}

2. 修正主组件代码（添加顶层Form，修复赋值和方法调用） #

// 主组件内的状态定义
final formGlobal = GlobalKey<FormState>();
String userName = "";

// build方法内的UI代码
Form(
  key: formGlobal,
  child: Column(
    children: [
      AuthTextfields(
        inputType: TextInputType.name,
        autoCorrect: false,
        enableSuggestion: false,
        labTxt: "User Name",
        iconData: Icons.account_circle_rounded,
        vaildCheck: (value) {
          if (value == "" ||
              value.trim().isEmpty ||
              value.trim().length < 3) {
            return "Please add A Valid Name with at least 3 Character";
          }
          return "";
        },
        saveTxt: (String txt) {
          setState(() {
            userName = txt; // 修正赋值运算符
          });
        },
      ),
      const Gap(20),
      ElevatedButton.icon(
        onPressed: () {
          final isValid = formGlobal.currentState!.validate();
          FocusScope.of(context).unfocus();

          if (!isValid) {
            return;
          }
          formGlobal.currentState!.save(); // 调用save方法触发回调
          ScaffoldMessenger.of(context)
              .showSnackBar(SnackBar(content: Text("hello$userName")));
        },
        label: const Text("Save"),
      ),
    ],
  ),
)

修复逻辑说明 #

• 顶层Form统一管理所有输入框的状态，确保validate()和save()能正确作用于所有TextFormField；
• 修正赋值运算符后，userName才能正确接收输入值；
• 调用save()方法会触发所有输入框的onSaved回调，更新userName的值，最终SnackBar就能正常显示输入内容。

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