Проблема переполнения текста в ListView Flutter
У меня есть код с плавающей кнопкой, текстовым полем и списком сообщений (ListView).
Когда пользователь записывает текст в textField и нажимает кнопку, текст добавляется к ListView.
Код для создания textField и ListView приведен ниже:
body: new Column(children:
<Widget>[
new Text(
'You have pushed the button this many times:',
),
new Text(
'$_counter',
style: Theme.of(context).textTheme.display1,
),
new Flexible(
fit: FlexFit.tight,
child: new ListView.builder(
padding: new EdgeInsets.all(8.0),
itemExtent: 20.0,
itemBuilder: (BuildContext context, int index) {
return new Text(_getNthValue(index), overflow: TextOverflow.clip,);
},
itemCount: _listTexts.length,
),
),
new Divider(height: 2.0,),
new TextField(
controller: _controller,
onChanged: _appendText,
)
],
),
Проблема находится между этими двумя: textField и ListView. Когда количество элементов превышает пределы пространства перед разделителем, ListView продолжает отображать данные поверх него и textField: см. Фото ниже.
Как видите, три (3) из последних OK внизу перекрывают свои пределы. В веб-мире вы можете нарисовать фон textField так, чтобы переполнение было невидимым, но я не мог сделать этого и никаких других уловок для решения проблемы.
Между текстовым полем в верхней части страницы (не видно на фото) все работает нормально, отскок прекращается внутри элемента, если вы пытаетесь прокрутить слишком много.
Что сделать внизу, чтобы он подчинялся границам так же, как и вверху (без переполнения)?
Ответы 1
Я нашел решение. У вас должен быть ClipRect, прикрепленный к Flexible, как показано ниже:
new Flexible(
child:
new ClipRect(
child:
new ListView.builder(
padding: new EdgeInsets.all(8.0),
itemExtent: 20.0,
itemBuilder: (BuildContext context, int index) {
return new Text(_getNthValue(index));
},
itemCount: _listTexts.length,
),
),
),
Flexible указывает ListView не расширять больше экрана, а ClipRect заботится о том, чтобы не было слишком много элементов, которые могли бы выйти за пределы текстовой области.