Flutter TextField在顶部对齐文本

Question

我有一个像这样的TextField：

我希望提示和文本在顶部而不是在中心对齐。

我尝试了textAlign: TextAlign.start，但这只是为了水平对齐。

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

如何使文字显示在顶部？

我找到了答案，所以我将其添加为自我解答。

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'),
)

Answer 2

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

一个y值，范围从-1.0到1.0。 -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'),
)

Answer 3

添加 alignLabelWithHint：true

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