如何为Flutter TextField设置圆角下划线输入边框？

要给Flutter的TextField设置带圆角的下划线输入边框，这里有两种实用方案：

方案一：直接修改UnderlineInputBorder的圆角 #

UnderlineInputBorder本身支持通过borderRadius参数设置底部左右的圆角，这是最直接的实现方式：

TextField(
  decoration: InputDecoration(
    hintText: "请输入内容",
    // 未获取焦点时的边框样式
    enabledBorder: UnderlineInputBorder(
      borderSide: BorderSide(color: Colors.grey.shade400, width: 1.5),
      borderRadius: BorderRadius.only(
        bottomLeft: Radius.circular(8),
        bottomRight: Radius.circular(8),
      ),
    ),
    // 获取焦点时的边框样式
    focusedBorder: UnderlineInputBorder(
      borderSide: BorderSide(color: Colors.blue, width: 2),
      borderRadius: BorderRadius.only(
        bottomLeft: Radius.circular(8),
        bottomRight: Radius.circular(8),
      ),
    ),
  ),
)

方案二：用OutlineInputBorder模拟下划线效果 #

如果需要更灵活的边框控制（比如偶尔需要显示其他边的边框），可以用OutlineInputBorder隐藏其他边，只保留底部：

TextField(
  decoration: InputDecoration(
    hintText: "请输入内容",
    enabledBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.transparent),
      borderRadius: BorderRadius.circular(8),
    ),
    focusedBorder: OutlineInputBorder(
      borderSide: BorderSide(color: Colors.transparent),
      borderRadius: BorderRadius.circular(8),
    ),
    // 单独设置底部边框
    border: OutlineInputBorder(
      borderRadius: BorderRadius.circular(8),
      borderSide: BorderSide(color: Colors.grey.shade400, width: 1.5),
    ),
    contentPadding: EdgeInsets.only(bottom: 10), // 调整内边距，避免文字紧贴边框
  ),
)

全局统一样式（可选） #

如果你的App里多个TextField都需要这个样式，可以在ThemeData中全局配置，不用每个TextField单独写：

MaterialApp(
  theme: ThemeData(
    inputDecorationTheme: InputDecorationTheme(
      enabledBorder: UnderlineInputBorder(
        borderSide: BorderSide(color: Colors.grey.shade400),
        borderRadius: BorderRadius.only(
          bottomLeft: Radius.circular(8),
          bottomRight: Radius.circular(8),
        ),
      ),
      focusedBorder: UnderlineInputBorder(
        borderSide: BorderSide(color: Colors.blue),
        borderRadius: BorderRadius.only(
          bottomLeft: Radius.circular(8),
          bottomRight: Radius.circular(8),
        ),
      ),
    ),
  ),
  home: YourHomePage(),
)

内容的提问来源于stack exchange，提问作者Justin Hüsges