Flutter登录页TextFormField获焦时OutlineInputBorder消失问题求助

嘿，这个问题我之前也踩过坑！其实原因很简单：你只给输入框设置了border属性，但这个样式仅在输入框未被选中且处于可用状态时生效。当输入框获得焦点时，Flutter会自动切换到focusedBorder样式，如果你没定义这个样式，它就会用默认的（甚至直接隐藏边框），看起来就像边框凭空消失了。

解决方法超直接，在InputDecoration里显式配置focusedBorder，让它和你定义的圆角边框样式保持一致就行。另外，建议顺便设置enabledBorder来明确未获焦状态的样式，让状态切换更统一。

修改后的完整代码如下：

final email = new TextFormField(
  keyboardType: TextInputType.emailAddress,
  autofocus: false,
  decoration: new InputDecoration(
    hintText: "Email",
    contentPadding: new EdgeInsets.fromLTRB(20.0, 10.0, 20.0, 10.0),
    // 未获焦且可用时的边框样式
    enabledBorder: new OutlineInputBorder(
      borderRadius: new BorderRadius.circular(32.0),
    ),
    // 获焦时的边框，和enabledBorder保持一致的圆角
    focusedBorder: new OutlineInputBorder(
      borderRadius: new BorderRadius.circular(32.0),
      // 要是想让获焦时边框更醒目，可以在这里调整颜色/粗细
      // borderSide: BorderSide(color: Colors.blueAccent, width: 2.0),
    ),
  ),
);

这样设置后，不管输入框有没有获得焦点，都会保持你想要的圆角边框样式，再也不会出现消失的情况啦。如果需要区分获焦状态，只需要修改focusedBorder里的borderSide属性即可。

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