Flutter：如何移除TextFormField获取焦点时的蓝色边框？

我用TextFormField实现了一个带圆角、灰色边框的白色搜索框，但点击获取焦点后会出现蓝色边框，破坏了原有样式。我需要保持搜索框的形状不变，同时让光标居中显示。

当前代码：

TextFormField(
  decoration: InputDecoration(
    suffixIcon: Container(
      height: 22,
      width: 22,
      padding: EdgeInsets.only(top: 2,bottom: 0,right: 7),
      child: Image.asset("images/search.png"),
    ),
    hintText: 'search',
    fillColor: Colors.white,
    filled: true,
    enabledBorder: OutlineInputBorder(
      borderRadius: BorderRadius.circular(15),
      borderSide: const BorderSide(
        color: kViveLaCarLightGrey, width: 2.0),
    )),
),

解决这个问题只需两步：

• 统一焦点状态下的边框样式：在InputDecoration中添加*focusedBorder*属性，设置和enabledBorder完全相同的样式，这样获取焦点后边框不会变成蓝色。
• 让光标居中：给TextFormField添加*textAlign: TextAlign.center*，光标和输入文本都会自动居中；如果需要调整光标高度，可额外设置cursorHeight属性。

修改后的完整代码：

TextFormField(
  textAlign: TextAlign.center, // 光标与文本居中
  cursorHeight: 20, // 可选：适配搜索框的光标高度
  decoration: InputDecoration(
    suffixIcon: Container(
      height: 22,
      width: 22,
      padding: EdgeInsets.only(top: 2, bottom: 0, right: 7),
      child: Image.asset("images/search.png"),
    ),
    hintText: 'search',
    fillColor: Colors.white,
    filled: true,
    enabledBorder: OutlineInputBorder(
      borderRadius: BorderRadius.circular(15),
      borderSide: const BorderSide(
        color: kViveLaCarLightGrey, width: 2.0),
    ),
    // 焦点状态下保持边框样式一致
    focusedBorder: OutlineInputBorder(
      borderRadius: BorderRadius.circular(15),
      borderSide: const BorderSide(
        color: kViveLaCarLightGrey, width: 2.0),
    ),
  ),
),

如果完全不需要焦点边框，也可以将focusedBorder的borderSide设为BorderSide.none，但这会降低焦点状态的辨识度，建议保留原有边框样式。

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