Flutter中TextFormField聚焦时错误边框宽度翻倍问题求助

这种情况大概率是重复定义了错误状态下的边框样式，或是全局Theme的输入框配置和TextFormField自身的边框设置冲突导致的。

常见解决思路：

• 检查是否同时设置了errorBorder和focusedErrorBorder，且两者的borderSide.width未保持一致。聚焦时两个边框样式叠加就会出现宽度翻倍的视觉效果，正确做法是统一宽度：

TextFormField(
  decoration: InputDecoration(
    errorBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.red, width: 1),
    ),
    focusedErrorBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.red, width: 1),
    ),
    // 其他装饰配置
  ),
  // 表单验证逻辑
)

• 检查全局ThemeData里的inputDecorationTheme是否配置了错误边框，导致和局部TextFormField的边框设置叠加。如果全局有配置，要么统一全局样式，要么在局部显式覆盖：

ThemeData(
  inputDecorationTheme: InputDecorationTheme(
    errorBorder: OutlineInputBorder(
      borderSide: BorderSide(width: 1),
    ),
    focusedErrorBorder: OutlineInputBorder(
      borderSide: BorderSide(width: 1),
    ),
  ),
)

• 避免同时使用border属性和errorBorder，如果border的宽度和错误边框宽度不一致，聚焦时也容易出现视觉上的“翻倍”效果，建议明确设置各状态下的边框样式。

也可以尝试简化配置：只设置focusedErrorBorder，让errorBorder继承其样式，或是反之，确保同一状态下的边框宽度唯一。

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