输入文本时自动扩展的 Flutter 文本字段，然后在达到特定高度时开始滚动文本

Posted 2023-02-23

【中文标题】输入文本时自动扩展的 Flutter 文本字段，然后在达到特定高度时开始滚动文本

【英文标题】：Flutter textfield that auto expands when text is entered and then starts scrolling the text when a certain height is reached

【发布时间】：2018-12-14 18:20:06

【问题描述】：

我已经尝试了 Flutter TextField 的许多配置，但不知道如何构建这个。

我正在寻找一个最初是单行的文本字段，它会在输入文本时自动扩展，然后在某个时候开始自行滚动。

这可以通过使用 maxLines: null 属性部分实现。但是当输入大量文本时，文本字段中的文本本身就会溢出。

如果将 maxLines 设置为一个值，则整个文本字段本身会扩展为从多行开始，而不是从单行开始。

有没有办法像在 WhatsApp 和电报等许多聊天应用程序中那样在某些时候限制文本字段的高度。

【参考方案1】：

Container(
    child: new ConstrainedBox(
        constraints: BoxConstraints(
            maxHeight: 300.0,
        ),
        child: TextField(
                    maxLines: null,
                ),
            ),
        ),
    ),
)

在旧的 Flutter 版本中是

Container(
    child: new ConstrainedBox(
        constraints: BoxConstraints(
            maxHeight: 300.0,
        ),
        child: new Scrollbar(
            child: new SingleChildScrollView(
                scrollDirection: Axis.vertical,
                reverse: true,
                child: new TextField(
                    maxLines: null,
                ),
            ),
        ),
    ),
)

【参考方案2】：

文本字段（ minLines: 1, 最大线数：5， 最大长度强制：真， )

【参考方案3】：

现在我们实际上有了TextField 的minLines 参数，不再需要解决方法。

TextField(
    minLines: 1,
    maxLines: 5,
)

【讨论】：

清洁解决方案，现在看来这可能是公认的答案。谢谢

这个应该被接受的答案在所有情况下都能很好地工作，即使受约束框的直接子项不是文本字段。如果直接子代不是文本字段，则接受的答案可能会导致一些问题。

干净的解决方案，这应该被接受的答案

太棒了，超级简单。谢谢！！

【参考方案4】：

如果您对TextField 没有任何风格，Gunter 接受的答案就足够了。但如果TextField 至少有下划线/底部边框，则向上滚动时它将消失。

我的建议是使用 TextPainter 计算行数，然后将计算的行数应用到 TextField。这是代码，将您当前的 TextField 替换为 LayoutBuilder ：

LayoutBuilder(
    builder: (context, size)
      TextSpan text = new TextSpan(
        text: yourTextController.text,
        style: yourTextStyle,
      );

      TextPainter tp = new TextPainter(
          text: text,
          textDirection: TextDirection.ltr,
          textAlign: TextAlign.left,
      );
      tp.layout(maxWidth: size.maxWidth);

      int lines = (tp.size.height / tp.preferredLineHeight).ceil();
      int maxLines = 10;

      return TextField(
        controller: yourTextController,
        maxLines: lines < maxLines ? null : maxLines,
        style: yourTextStyle,
      );
    
  )

【讨论】：

伟大的实施！我认为这是正确的答案！谢谢！