Flutter自定义TextFormField：错误文本对齐边框且内容内边距16px

针对你需要的内容内边距16px和错误文本与输入框边框对齐的需求，我修改了你的代码，修复了问题点：

class MyTextField extends StatefulWidget {
  final TextEditingController? controller;
  final bool isPass, isReadOnly, autoFocus; // 修正拼写错误isReadOny -> isReadOnly
  final String hintText;
  final TextInputType textInputType;
  final VoidCallback? onTap;
  final bool isValidate;
  final String? Function(String?)? validator; // 适配空安全修正泛型
  final int? maxLength;
  final List<TextInputFormatter>? inputFormatters;
  const MyTextField({
    Key? key,
    this.controller,
    this.isPass = false,
    this.isReadOnly = false,
    this.autoFocus = false,
    required this.hintText,
    this.textInputType = TextInputType.text,
    this.onTap,
    this.isValidate = true,
    this.validator,
    this.maxLength,
    this.inputFormatters,
  }) : super(key: key);

  @override
  State<MyTextField> createState() => _MyTextFieldState();
}

class _MyTextFieldState extends State<MyTextField> {
  bool isObserver = false;
  @override
  Widget build(BuildContext context) {
    return TextFormField(
      controller: widget.controller,
      validator: (val) {
        if (!widget.isValidate) return null;
        
        if (val?.isEmpty ?? true) {
          return 'Please enter ${widget.hintText}';
        }
        // 处理自定义validator为空的安全调用
        return widget.validator?.call(val);
      },
      style: GlobalFonts.ts20px700w(),
      readOnly: widget.isReadOnly,
      autofocus: widget.autoFocus,
      cursorColor: greenColor,
      onTap: widget.onTap,
      maxLength: widget.maxLength,
      inputFormatters: widget.inputFormatters,
      decoration: InputDecoration(
        counter: const Offstage(),
        floatingLabelBehavior: FloatingLabelBehavior.always,
        hintText: widget.hintText,
        hintStyle: GlobalFonts.ts16px700w(color: Colors.black.withOpacity(.5)),
        labelText: widget.hintText,
        labelStyle: GlobalFonts.ts16px700w(color: greenColor),
        border: OutlineInputBorder(
            borderRadius: BorderRadius.circular(8),
            borderSide: const BorderSide(color: Color(0xFF166351), width: 1.5)),
        focusedBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(8),
            borderSide: const BorderSide(color: Color(0xFF166351), width: 1.5)),
        enabledBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(8),
            borderSide: const BorderSide(color: Color(0xFF166351), width: 1.5)),
        errorBorder: OutlineInputBorder(
            borderRadius: BorderRadius.circular(8),
            borderSide: const BorderSide(color: Color(0xFFFF2B02), width: 1.5)),
        focusedErrorBorder: OutlineInputBorder( // 补充焦点状态下的错误边框样式
            borderRadius: BorderRadius.circular(8),
            borderSide: const BorderSide(color: Color(0xFFFF2B02), width: 1.5)),
        // 设置上下左右均为16px的内边距
        contentPadding: const EdgeInsets.all(16),
        // 调整错误文本padding，使其与输入框左侧边框对齐
        errorPadding: const EdgeInsets.only(left: 16, top: 8),
        suffixIcon: widget.isPass
            ? IconButton(
                icon: isObserver
                    ? const Icon(Icons.visibility_outlined,
                        color: greenColor, size: 20)
                    : const Icon(Icons.visibility_off_outlined,
                        color: greenColor, size: 20),
                onPressed: () => setState(
                  () => isObserver = !isObserver,
                ),
              )
            : null,
      ),
      keyboardType: widget.textInputType,
      obscureText: widget.isPass && !isObserver,
    );
  }
}

关键修改说明： #

• 内容内边距：将contentPadding改为EdgeInsets.all(16)，实现上下左右16px的内边距需求。
• 错误文本对齐：添加errorPadding: const EdgeInsets.only(left: 16, top: 8)，让错误文本左侧与输入框边框对齐，同时保留顶部间距避免视觉拥挤。
• 空安全与细节修复：
  • 修正构造函数参数isReadOny的拼写错误为isReadOnly
  • 调整validator类型适配空安全，避免空调用报错
  • 补充focusedErrorBorder样式，保证焦点状态下错误边框的一致性

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