Текстовое поле флаттера, которое автоматически расширяется при вводе текста, а затем начинает прокручивать текст при достижении определенной высоты - PullRequest
Новая
       8

Текстовое поле флаттера, которое автоматически расширяется при вводе текста, а затем начинает прокручивать текст при достижении определенной высоты

0 голосов
/ 06 июля 2018

Я перепробовал множество конфигураций Flutter TextField, но не могу понять, как его создать.

Я ищу текстовое поле, которое изначально представляет собой одну строку, и оно автоматически расширяется, когда текст вводится в него, а затем в какой-то момент начинает прокручиваться сам.

Этого можно добиться частично с помощью атрибута maxLines: null. Но затем, когда много текста вводится, текст в текстовом поле сам переполняется.

И если для maxLines задано значение, то само текстовое поле целиком расширяется до тех многих строк, с которых начинается, а не начинается с одной строки.

Есть ли способ ограничить высоту текстового поля в некоторый момент, как это делается во многих приложениях чата, таких как WhatsApp и telegram.

Спасибо.

Ответы [ 2 ]

0 голосов
/ 16 января 2019

Принятый ответ от Гюнтера достаточно хорош, если у вас нет стиля для 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,
      );
    }
  )
0 голосов
/ 06 июля 2018 
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,
                ),
            ),
        ),
    ),
)
...