Flutter:TextField边框颜色设置未生效,无需Theme如何解决
问题原因
errorBorder、focusedErrorBorder仅在InputDecoration配置了非空errorText时才会生效,你当前代码未配置该属性,因此错误状态的边框不会触发渲染。- 你只配置了默认状态的
border,未补充聚焦状态的focusedBorder,输入框聚焦时会使用系统默认样式,导致自定义的未验证通过状态颜色不生效。 - 你原有代码中未验证通过时的默认边框颜色设置为白色,若页面背景为白色会出现边框不可见的问题,需要调整为需求指定的红色。
实现方案(无需修改全局Theme)
直接补全所有状态下的边框配置,同时添加errorText触发错误状态样式即可,不需要显示错误文本的话可以将errorStyle的高度设为0,不会占用布局空间:
decoration: InputDecoration( // 配置非空errorText触发错误样式,不需要展示错误内容可填空字符串 errorText: _isPasswordValidated ? null : " ", errorStyle: const TextStyle(height: 0), border: OutlineInputBorder( borderSide: BorderSide( width: 2, color: _isPasswordValidated ? Colors.orange : Colors.red)), focusedBorder: OutlineInputBorder( borderSide: BorderSide( width: 2, color: _isPasswordValidated ? Colors.orange : Colors.red)), errorBorder: OutlineInputBorder( borderSide: BorderSide( width: 2, color: _isPasswordValidated ? Colors.orange : Colors.red)), focusedErrorBorder: OutlineInputBorder( borderSide: BorderSide( width: 2, color: _isPasswordValidated ? Colors.orange : Colors.red)), // 其他原有配置保持不变即可... )
效果示意

内容的提问来源于stack exchange,提问作者chichi
相关产品推荐
相关产品推荐

