边框仅留在 Flutter TextField 的顶部

Question

我想知道是否可以在 Flutter TextField 的特定边上设置边框。在这种特殊情况下，我只需要顶部和左侧，但想知道这是否可行，谢谢。

Answer 1

是的，当然可以，试试这个（或检查我为此制作的 DartPad：https://dartpad.dev/1a28bdd9203250d3226cc25d512579ec?null_safety=true）：

Padding(
        padding: const EdgeInsets.all(8.0),
        child: Container(
          padding: EdgeInsets.all(8.0),
          decoration: BoxDecoration(
            border: Border(
              top: BorderSide(width: 4.0, color: Colors.lightBlue.shade900),
              left: BorderSide(width: 4.0, color: Colors.lightBlue.shade900),
            ),
          ),
          child: TextField(),
        ),
      ),

Answer 2

您可以使用 Container 包装 TextField 小部件并提供边框：

Container(
 decoration: BoxDecoration(
 color: Colors.white,
 border: Border(
  top: BorderSide(color: Colors.red),
  left: BorderSide(color: Colors.red),
  ),
 ),
 child: TextFormField(
  decoration: InputDecoration(
   labelText: 'Email',
   border: InputBorder.none,
  ),
 ),
),

结果：

边框仅留在 Flutter TextField 的顶部

Border only left top on Flutter TextField

border

textfield

flutter

flutter-layout