Flutter 自定义输入框（TextField 或 TextFormField）的样式

如何自定义 TextField 或 TextFormField 的样式

以下是修改边框、背景色、圆角以及移除默认间距的详细步骤和代码示例。

1. 使用 InputDecoration 自定义样式

通过 InputDecoration 的 border、filled、fillColor 和 contentPadding 等属性可以修改输入框的视觉样式。

代码示例：

TextField(
  decoration: InputDecoration(
    // 设置边框样式
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(12.0), // 圆角半径
      borderSide: BorderSide(color: Colors.blue, width: 2.0), // 边框颜色和宽度
    ),
    // 启用背景填充
    filled: true,
    fillColor: Colors.grey[200], // 背景色
    // 调整内边距（包括顶部间距）
    contentPadding: EdgeInsets.symmetric(vertical: 8.0, horizontal: 12.0),
    // 其他可选修饰
    hintText: '请输入内容',
    hintStyle: TextStyle(color: Colors.grey),
  ),
)

2. 移除默认顶部间距和垂直间距

Flutter 的输入框默认包含一定的内边距（padding）和装饰间距。通过以下方式调整：

• 使用 contentPadding 精确控制内边距，例如设置 vertical: 0 来减少或移除垂直间距。
• 设置 isDense: true 可以压缩装饰区域（如标签、错误文本等占据的空间），减少整体高度。

代码示例：

TextField(
  decoration: InputDecoration(
    isDense: true, // 减少装饰区域占用的垂直空间
    contentPadding: EdgeInsets.only(left: 12, right: 12, top: 0, bottom: 0), // 自定义内边距，移除顶部和底部间距
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(8.0),
    ),
    filled: true,
    fillColor: Colors.white,
  ),
)

3. 完整示例：自定义样式并移除间距

以下是一个综合示例，修改边框、背景色、圆角，并移除默认间距：

TextField(
  decoration: InputDecoration(
    filled: true,
    fillColor: Colors.grey[100],
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(10.0),
      borderSide: BorderSide.none, // 移除默认边框线
    ),
    enabledBorder: OutlineInputBorder(
      borderRadius: BorderRadius.circular(10.0),
      borderSide: BorderSide(color: Colors.grey, width: 1.0),
    ),
    focusedBorder: OutlineInputBorder(
      borderRadius: BorderRadius.circular(10.0),
      borderSide: BorderSide(color: Colors.blue, width: 2.0),
    ),
    contentPadding: EdgeInsets.symmetric(horizontal: 12, vertical: 8), // 调整内边距
    isDense: true, // 压缩垂直空间
    hintText: '输入内容...',
  ),
)

关键属性说明：

• border: 定义默认状态下的边框。
• enabledBorder: 输入框可用但未聚焦时的边框。
• focusedBorder: 输入框聚焦时的边框。
• filled 和 fillColor: 控制是否填充背景及背景颜色。
• contentPadding: 调整输入框内容与边框的内边距（包括上下左右）。
• isDense: 设置为 true 可减少装饰（如标签、前缀/后缀）占用的垂直空间，使输入框更紧凑。

通过组合这些属性，可以灵活自定义输入框的样式和布局。