Flutter TextFormField 隐藏下划线

在Flutter中，使用TextFormField会默认显示一个下划线，但是在一些情况下可能需要隐藏下划线以适应设计需求。本文将介绍如何在Flutter中隐藏TextFormField下划线。

1. 在decoration属性中设置underLine属性为null

TextFormField中的decoration属性用于定义控件的样式，包括下划线。通过将underline属性设置为null，可以隐藏下划线。

TextFormField(
  decoration: InputDecoration(
    hintText: '请输入内容',
    border: UnderlineInputBorder(
      borderSide: BorderSide.none,
    ),
  ),
)

以上代码将创建一个没有下划线的文本框。

2. 自定义下划线样式

如果需要更加灵活地控制下划线的样式，可以自定义UnderlineInputBorder。以下是一些自定义样式示例：

实线

TextFormField(
  decoration: InputDecoration(
    hintText: '请输入内容',
    border: UnderlineInputBorder(
      borderSide: BorderSide(color: Colors.red),
    ),
  ),
)

虚线

TextFormField(
  decoration: InputDecoration(
    hintText: '请输入内容',
    border: UnderlineInputBorder(
      borderSide: BorderSide(
        color: Colors.grey,
        width: 1.0,
        style: BorderStyle.dashed,
      ),
    ),
  ),
)

圆角

TextFormField(
  decoration: InputDecoration(
    hintText: '请输入内容',
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(20.0),
      borderSide: BorderSide.none,
    ),
  ),
)

结论

以上是隐藏Flutter TextFormField下划线的方法，可以根据需求选择使用。如果需要更加灵活的样式控制，可以自定义UnderlineInputBorder。