Flutter TextFormField组件borderSide边框颜色设置不生效问题求助

问题原因 #

Flutter 的 InputDecoration 对不同交互状态的边框有独立的配置项，优先级高于通用的 border 属性：

• 聚焦状态读取 focusedBorder 配置
• 未聚焦且输入框处于可用状态时，读取 enabledBorder 配置
• 你当前只配置了通用 border 和聚焦态的 focusedBorder，未配置 enabledBorder，所以默认未聚焦状态会加载系统默认的灰色边框，你设置在border里的红色不会生效。

修正方案 #

在InputDecoration中新增enabledBorder配置，把你想要的默认未聚焦边框样式写在这个属性里即可，参考修正后代码：

passwordtext() {
  return Container(
    width: MediaQuery.of(context).size.width * 0.9,
    child: Focus(
      focusNode: myFocusNode,
      child: TextFormField(
        decoration: InputDecoration(
          // 聚焦时的边框
          focusedBorder: OutlineInputBorder(
            borderRadius: BorderRadius.all(Radius.circular(10.0)),
            borderSide: BorderSide(color: HexColor("#d8d6de"))
          ),
          // 新增：未聚焦可用状态的边框
          enabledBorder: OutlineInputBorder(
            borderRadius: BorderRadius.all(Radius.circular(10.0)),
            borderSide: BorderSide(color: Colors.red)
          ),
          // 通用border可以保留也可以删除，状态化配置优先级更高
          border: OutlineInputBorder(
            borderRadius: BorderRadius.all(Radius.circular(10.0)),
            borderSide: BorderSide(color: Colors.red)
          ),
        ),
      ),
    )
  );
}

补充说明 #

如果后续需要适配其他状态的边框，可对应添加配置：

• 输入框禁用状态：disabledBorder
• 校验失败错误状态：errorBorder
• 校验失败且聚焦状态：focusedErrorBorder

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