如何在不影响边框的情况下将 TextFormField 中的 Text 和 labelText 垂直居中对齐？

Question

如果您注意到下图，label 和文本都顶部对齐。

1. 任何人都可以帮助使 alignment 将这两个垂直居中吗？

2. 此外，如果您注意到“电子邮件”上方的边框被切掉了。 有人可以帮助代码片段来避免这种情况吗？

3. 还有什么办法，我们可以根据'TextFormField'的内容（值）进行格式化吗？

以下是产生上述图像的编码。

TextFormField(
  decoration: InputDecoration(
    fillColor: Colors.white,
    filled: true,
    contentPadding: EdgeInsets.all(10.0),
    labelText: 'Email:',
    labelStyle: TextStyle(color: Colors.red, height: 3),
    prefixIcon: Icon(Icons.email_outlined),
    enabledBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.white, width: 1.0)),
    focusedBorder: OutlineInputBorder(borderSide: BorderSide(color: Colors.red, width: 2.0)),
    prefixStyle: TextStyle(
      inherit: true,
      color: Colors.red,
    ),
 ),

理想情况下，我想要一个如下所示的文本框

Answer 1

Flutter 允许两种类型的编辑输入。

1. 填充文本字段（如果边框使用 UnderlineInputBorder）
2. 带轮廓的文本字段（如果边框使用 OutlineInputBorder）

以下代码片段帮助我解决了这个问题。

   Container(
      padding: EdgeInsets.zero,
      decoration: BoxDecoration(border: Border.all()),
      child: TextFormField(
         decoration: const InputDecoration(
            fillColor: Colors.white,
            filled: true,
            contentPadding: EdgeInsets.all(10.0),
            labelText: 'Email:',
            labelStyle: TextStyle(color: Colors.red, height: 1),
            prefixIcon: Icon(Icons.email_outlined),
            enabledBorder: UnderlineInputBorder(
                     borderSide: BorderSide(color: Colors.transparent)),
            focusedBorder: UnderlineInputBorder(
                     borderSide: BorderSide(color: Colors.transparent)),
            prefixStyle: TextStyle(
               inherit: true,
               color: Colors.red,
            ),
         ),
      ),
   )

Answer 2

您的代码没问题，只需从 labelStyle 中删除“height”参数

labelStyle: TextStyle(color: Colors.red),