如何在 TextFormField 中添加标签文本和用户输入之间的间隙？

Question

如上图所示，我想在 'email' 标签文本和实际电子邮件输入 (abcd@gmail.com) 之间添加 gap/space。怎么做？

这是我当前的代码

Form(
      child: Column(
        children: [
          TextFormField(
            autocorrect: false,
            decoration: InputDecoration(labelText: "Email"),
            keyboardType: TextInputType.emailAddress,
            textInputAction: TextInputAction.next,
          ),
        ],
      ),
    );

Answer 1

您可以通过在TextField 装饰中添加contentPadding 来解决您的问题。用这个替换你的代码，

Form(
      child: Column(
        children: [
          TextFormField(
            autocorrect: false,
            decoration: InputDecoration(labelText: "Email",
                        contentPadding: const EdgeInsets.only(top: 1)),
            keyboardType: TextInputType.emailAddress,
            textInputAction: TextInputAction.next,
          ),
        ],
      ),
    );

让我知道它是否适合你。

Answer 2

您的文本字段默认为 UnderlineInputBorder。仅指定 contentPadding 无济于事，文本和标签之间的间隙无论如何都是相同的。

要添加一些 space，您可以将 OutlineInputBorder 与 contentPadding 一起使用。如果您不想添加轮廓边框样式，只需使用 borderSide: BorderSide.none。这是代码：

TextFormField(
  autocorrect: false,
  decoration: InputDecoration(
    labelText: "Email",
    border: OutlineInputBorder(borderSide: BorderSide.none),
    contentPadding: const EdgeInsets.fromLTRB(12, 24, 12, 24),
  ),
  keyboardType: TextInputType.emailAddress,
  textInputAction: TextInputAction.next,
),

如果您仍然想看到下划线，您应该使用上面的 Stack 小部件并手动添加它。

如何在 TextFormField 中添加标签文本和用户输入之间的间隙？

how to add gap between label text and user input in TextFormField?

flutter

flutter-textinputfield