Flutter TextField 在顶部对齐文本答案

【问题标题】：Flutter TextField align text at the topFlutter TextField 在顶部对齐文本
【发布时间】：2023-04-04 16:08:01
【问题描述】：

我有一个这样的文本字段：

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

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

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

如何让文字置顶？

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

【问题讨论】：

标签： flutter alignment textfield

【解决方案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'),
)

【讨论】：

【解决方案2】：

添加 alignLabelWithHint: true,


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

【讨论】：

【解决方案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'),
)

【讨论】：