如何在Flutter中创建一个自定义TextFormField函数

在Flutter里，TextFormField是一个内置的FormField组件，它内部已经封装了TextField，算是官方提供的便捷工具，帮我们把输入框和表单校验逻辑结合在了一起。

如果项目里需要多次使用风格统一的输入框，完全可以自己封装一个静态函数来复用，下面是一个实用的实现示例：

static formField({ 
  required String label, 
  String? initialValue, 
  FormFieldSetter? onSaved, 
  ValueChanged? onChanged, 
  Icon? icon, 
  int? maxLines, 
  TextEditingController? controller, 
  TextInputType? keyboard, 
}) {
  return Padding(
    padding: const EdgeInsets.symmetric(vertical: 10, horizontal: 8),
    child: TextFormField(
      validator: (value) {
        if (value!.isEmpty) {
          return 'please type the $label above';
        }
      },
      initialValue: initialValue,
      controller: controller,
      maxLines: maxLines,
      onChanged: onChanged,
      onSaved: onSaved,
      keyboardType: keyboard,
      decoration: InputDecoration(
        label: Text(label),
        prefixIcon: icon,
        hintText: 'Type $label here',
        border: const OutlineInputBorder(),
      ),
    ),
  );
}

这个封装函数的核心优势在于：

• 自带基础非空校验规则，输入为空时会自动返回对应提示文本
• 统一设置了输入框的垂直/水平内边距，保证全局UI风格一致
• 配置了标准化的输入框装饰，包含标签、提示文本、边框和可选前置图标
• 保留了灵活的可配置参数，比如输入框标签、初始值、编辑控制器、输入类型、最大行数等，能适配不同业务场景的需求

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