web-dev-qa-db-ja.com

テキストが入力されると自動的に拡大し、特定の高さに達するとテキストのスクロールを開始するフラッターテキストフィールド

Flutter TextFieldの多くの構成を試してみましたが、これを構築する方法がわかりません。

最初は1行のテキストフィールドを探しています。テキストが入力されると自動的に拡大し、ある時点でそれ自体がスクロールし始めます。

これは、maxLines：null属性を使用して部分的に実現できます。しかし、大量のテキストが入力されると、テキストフィールド自体のテキストがオーバーフローします。

また、maxLinesが値に設定されている場合、テキストフィールド全体がそれらの多くの行に拡張され、単一の行から開始するのではなく、最初から開始されます。

WhatsAppや電報などの多くのチャットアプリで行われているように、ある時点でテキストフィールドの高さを制限する方法はありますか？.

dartfluttertextfield
7
sujay_br
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,
                ),
            ),
        ),
    ),
)
18
Günter Zöchbauer

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,
      );
    }
  )
6
Bobby Stenly

これで、実際にminLinesパラメータがTextFieldになり、回避策は必要なくなりました。

TextField(
    minLines: 1,
    maxLines: 5,
)
3
flomaster