如何在 Flutter 中处理 InputDecoration->labelText 中的长文本答案

【问题标题】：How to handle long text in InputDecoration->labelText in Flutter如何在 Flutter 中处理 InputDecoration->labelText 中的长文本
【发布时间】：2018-12-12 11:03:50
【问题描述】：

我在 Flutter 设置中有一个 TextFormField，如下所示：

new TextFormField (
    decoration: new InputDecoration(
    labelText: questionString,
    labelStyle: new TextStyle(
      fontSize: 18.0,
      color: new Color(0xFF18776A),
    )
),

这会生成以下屏幕截图：

由于太长，文本在末尾自动剪切。有没有办法调整字体大小以适应屏幕或使 labelText 扩展到两行？

【问题讨论】：

标签： flutter flutter-layout

【解决方案1】：

很抱歉添加了一个老问题，但只是在学习时让自己颤抖并偶然发现了一个类似的问题。

我的解决方法是使用hintText而不是labelText，并显式添加\n换行符。

类似

String questionString = 'This sample is very \n very very very long'
new TextFormField (
    decoration: new InputDecoration(
    hintText: questionString,
    hintStyle: new TextStyle(
      fontSize: 18.0,
      color: new Color(0xFF18776A),
    ) .

我不喜欢这样，因为它本质上是对屏幕宽度进行硬编码。但它至少提供了多行提示文本。

当我尝试在 labelText 中添加换行符时，由于 labelText 的较低行合并到实际输入字段中，事情变得非常奇怪。也许如果我能找到一种方法在某处添加填充以防止这种情况会更好一点？

【讨论】：

【解决方案2】：

你可以使用TextFormFieldsmaxLines属性：

new TextFormField ( 
    maxLines: 4,
    decoration: new InputDecoration( 
        labelText: questionString, 
        labelStyle: new TextStyle( 
            fontSize: 18.0, 
            color: new Color(0xFF18776A), 
        ) 
 ),

【讨论】：

TextFormFIeld 上的 maxLines 只是增加了字段的高度，对 labelText 没有影响
你可以改用hintText。
试过了，hintText 也只显示在第一行（如果 TextFormField 有多个 maxLines），所以文本再次在末尾剪切。

【解决方案3】：

你需要使用hintText和hintMaxLines：

String questionString = 'This sample is very \n very very very long'
new TextFormField (
    decoration: new InputDecoration(
    hintText: questionString,
    hintMaxLines: 2,
    hintStyle: new TextStyle(
      fontSize: 18.0,
      color: new Color(0xFF18776A),
    )

【讨论】：