如何将提示文本包装在 Flutter 的文本字段中？答案

【问题标题】：How to wrap the hint text in a text field in Flutter?如何将提示文本包装在 Flutter 的文本字段中？
【发布时间】：2017-12-17 13:56:20
【问题描述】：

hintStyle 属性似乎不包含任何可以让我表示提示文本应该换行的内容。我的文本字段中的实际文本会自动换行。如何包装提示文本？

【问题讨论】：

这听起来更像是一个错误报告而不是一个问题。提示文本可能应该换行。 github.com/flutter/flutter/issues/new

标签： flutter textfield

【解决方案1】：

使用 maxlines 对我不起作用（对于 Flutter Web），但在文本自动换行之前，我会在我希望它中断的地方添加 \n。

TextFormField(
    maxLines: 5, 
    decoration: InputDecoration(
    hintMaxLines: 5,
    hintText: 'Make it a descriptive message that allows your client to \n understand what you are working on, what challenges you are \n facing, and if anything is unclear. \n Try to be clear but positive!',
    labelText: 'Today\'s message to your client, \n what is the team working on?',
    labelStyle: TextStyle(fontSize: 14,),
    hintStyle: TextStyle(fontSize: 14,),
    ),
    ),

【讨论】：

【解决方案2】：

我通过在我的 TextField 上使用 maxLines 来修复它

  TextField(  textAlign: TextAlign.center,
              maxLines: 2,
              decoration: InputDecoration(hintText: "Your Hint Your Hint Your Hint Your Hint Your Hint Your Hint")),

【讨论】：

【解决方案3】：

我认为这是一个颤动的网络错误 - 可在 chrome mac、safari mac 和 chrome android 上重现，在 safari ipad 上似乎没问题，至少在模拟器中是这样。我们搞砸了所有设置，但没有任何效果。有人可能应该将它作为一个问题记录在 Flutter github repo 中。

是的 \n 就像一个魅力，非常感谢 Stephane！

【讨论】：

【解决方案4】：

InputDecoration 的hintMaxLines 属性做了预期的事情。只需将其设置为提示应该能够达到的最大行数。

TextField(
  decoration: InputDecoration(
    hintText: 'Imagine a very long hint here word word ...',
    hintMaxLines: 10,
  ),
),

看起来像这样：

【讨论】：