Flutter TextField将文本对齐到顶部

Question

我有一个像这样的文本框：

我想让提示和文本对齐到顶部，而不是中心。

我尝试了textAlign: TextAlign.start,但那只是用于水平对齐。

TextField(
  textAlign: TextAlign.start,
  expands: true,
  maxLines: null,
  decoration: InputDecoration(
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(3),
      ),
      hintText: 'Enter Unicode text'),
),

我该如何使文本到达顶部？

我找到了答案，所以我将其作为自我回答的问答添加。

- Suragch

Answer 1

要将TextField中的文本对齐到顶部，请使用

textAlignVertical: TextAlignVertical.top

这将给您想要的东西：

TextField(
  textAlignVertical: TextAlignVertical.top,
  expands: true,
  maxLines: null,
  decoration: InputDecoration(
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(3),
      ),
      hintText: 'Enter Unicode text'),
)

- Suragch

Answer 2

添加alignLabelWithHint: true,

TextFormField(
  maxLines: 10,
  minLines: 5,
  decoration: InputDecoration(
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(3),
      ),
      hintText: 'Enter Unicode text'),
      alignLabelWithHint: true,
)

- Techalgoware

Answer 3

将文本在输入框中的垂直对齐方式应用。

一个可取值范围为-1.0到1.0的单个 y 值。-1.0 使得文本的第一行顶部适合输入框及其填充，从而与输入框的顶部对齐。0.0 对齐于框的中心。1.0 使最后一行文本的底部与输入框的底部内缘对齐。

您需要确保：

TextField.textAlignVertical 被传递给 InputDecorator。

TextField(
  textAlignVertical: TextAlignVertical.top,
  expands: true,
  maxLines: null,
  decoration: InputDecoration(
      border: OutlineInputBorder(
        borderRadius: BorderRadius.circular(3),
      ),
      hintText: 'Enter Unicode text'),
)

- Scaphae Studio

Answer 4

TextFormField( 
  decoration: InputDecoration(
    alignLabelWithHint: true,
    label: Text('Your label name'),
  ),
)

- Syying Em

---

请添加解决方案的说明。请提供文本以便进行翻译。 - Zig Razor

你的回答可以通过提供更多支持性信息来改进。请编辑以添加进一步的细节，例如引用或文档，以便他人能够确认你的回答是否正确。你可以在帮助中心找到关于如何撰写好回答的更多信息。 - Community

Answer 5

现在你可以将 alignLabelWithHint: true 传递给 InputDecoration，使标签与顶部对齐。

- Mitva Panchani

---

你的回答可以通过提供更多的支持性信息来改进。请编辑以添加进一步的细节，比如引用或文档，以便他人可以确认你的回答是否正确。你可以在帮助中心找到关于如何撰写好回答的更多信息。 - undefined