Flutter：如何结合OutlineInputBorder与UnderlineInputBorder实现指定TextFormField边框

要达成图中仅底部显示边框的效果，你可以通过以下两种方式实现，解决OutlineInputBorder和UnderlineInputBorder的使用问题：

方法一：自定义OutlineInputBorder（精准控制四边样式） #

核心思路是仅保留底部边框线条，其余三边设为无，同时区分聚焦/未聚焦状态：

TextFormField(
  decoration: InputDecoration(
    // 基础边框设为无，避免默认样式干扰
    border: const OutlineInputBorder(
      borderSide: BorderSide.none,
      borderRadius: BorderRadius.zero,
    ),
    // 未聚焦时的底部边框样式
    enabledBorder: const OutlineInputBorder(
      borderSide: BorderSide(
        color: Colors.grey,
        width: 1.0,
      ),
      borderRadius: BorderRadius.zero,
    ),
    // 聚焦时的底部边框样式
    focusedBorder: const OutlineInputBorder(
      borderSide: BorderSide(
        color: Colors.blue,
        width: 2.0,
      ),
      borderRadius: BorderRadius.zero,
    ),
    hintText: "请输入内容",
    contentPadding: const EdgeInsets.symmetric(vertical: 15, horizontal: 10),
  ),
)

方法二：优化UnderlineInputBorder（简洁实现底部边框） #

如果之前用UnderlineInputBorder未生效，大概率是主题样式覆盖了默认设置，直接指定borderSide即可：

TextFormField(
  decoration: InputDecoration(
    border: const UnderlineInputBorder(
      borderSide: BorderSide(color: Colors.grey, width: 1),
    ),
    focusedBorder: const UnderlineInputBorder(
      borderSide: BorderSide(color: Colors.blue, width: 2),
    ),
    hintText: "请输入内容",
  ),
)

关键提示 #

• 若需要圆角边框，调整borderRadius参数即可，比如BorderRadius.circular(8)。
• 如果项目中有全局主题设置，检查ThemeData.inputDecorationTheme是否覆盖了边框样式，必要时在局部输入框中单独指定样式优先级。

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