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

Question

从上图中可以看出，我想在“电子邮件”标签文本和实际电子邮件输入 (abcd@gmail.com) 之间添加间隙/空格。怎么做 ？

这是我当前的代码

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

Answer 1

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

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无济于事，文本和标签之间的差距无论如何都是相同的。

要添加一些空间，您可以使用 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 小部件并手动添加它。