Question

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

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

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

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

是否可以像在某些聊天应用程序（如WhatsApp和电报）中那样，限制文本字段的高度。

谢谢。

Answer 1

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

Answer 2

如果您没有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,
      );
    }
  )

Answer 3

现在我们实际上拥有minLines的{{1}}参数，不再需要任何解决方法。

TextField

Answer 4

TextField（ minLines：1 maxLines：5 maxLengthEnforced：true，）

输入文本时自动展开的Flutter文本字段，当达到一定高度时开始滚动文本

4 个答案: