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

Question

我已经尝试了Flutter TextField的许多配置,但无法弄清楚如何构建这个.

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

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

如果将maxLines设置为一个值,那么整个文本字段本身就会扩展到那些许多行,而不是以一行开头.

有没有办法限制文本字段的高度,就像许多聊天应用程序,如WhatsApp和电报.

谢谢.

Answer 1

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

TextField(
    minLines: 1,
    maxLines: 5,
)

Answer 2

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 3

如果您没有风格的话，甘特接受的答案就足够了TextField。但是，如果您至少有一个下划线/底部边框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,
      );
    }
  )