Сбой ListView.builder
Я пытаюсь настроить страницу поиска в приложении Flutter. Этот виджет представляет поле поиска, отслеживает, что печатает пользователь, и обновляет список предлагаемых совпадений при каждом изменении в поле поиска. Соответствующий фрагмент здесь:
List<Text> suggestList = [new Text('')];
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
new Form(
child: new TextFormField(
// _controller listens for changes and updates suggestList
controller: _controller,
autocorrect: false,
decoration: InputDecoration(labelText: 'Search here'),
onSaved: (str) => print(str),
),
),
new ListView.builder(
itemBuilder: (context, index) => suggestList[index],
itemCount: suggestList.length,
)
],
);
}
Этот виджет аварийно завершает работу с сообщением об ошибке длиной в несколько страниц, но включает в себя этот текст, который предполагает, что моя ошибка является проблемой макета. Я новичок во Флаттере и Дартсе и не могу по-настоящему применить этот совет к моей проблеме.
══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
The following assertion was thrown during performResize():
Vertical viewport was given unbounded height.
Viewports expand in the scrolling direction to fill their container.
In this case, a vertical
viewport was given an unlimited amount of vertical space in which to expand.
This situation
typically happens when a scrollable widget is nested inside another
scrollable widget.
If this widget is always nested in a scrollable widget there is no
need to use a viewport because
there will always be enough vertical space for the children.
In this case, consider using a Column
instead. Otherwise, consider using the "shrinkWrap" property
(or a ShrinkWrappingViewport) to size
the height of the viewport to the sum of the heights of its children.
В приведенном ниже фрагменте я пытаюсь смоделировать нужный эффект, представив последовательность текстовых виджетов:
@override
Widget build(BuildContext context) {
return Column(
children: <Widget>[
new Form(
child: new TextFormField(
controller: _controller,
autocorrect: false,
decoration: InputDecoration(labelText: 'Search here'),
onSaved: (str) => print(str),
),
),
// Present the two first items manually as Text widgets
suggestList[0],
suggestList.length > 1 ? suggestList[1] : new Text('...'),
],
);
}
Это работает отлично, но выглядит некрасиво и явно является взломом, который я не хочу в конечном приложении. Также я подтвердил, что моя логика работает отлично - я проверил, что suggestList
всегда заполнен хотя бы одним Text
виджет, подходящий для отображения. Любые идеи о том, как восстановить подход ListView?
1 ответ
Один из способов - просто создать таких столбцов для детей
@override
Widget build(BuildContext context) {
List<Widget> columnChildren = [
new Form(
child: new TextFormField(
// _controller listens for changes and updates suggestList
//controller: _controller,
autocorrect: false,
decoration: InputDecoration(labelText: 'Search here'),
onSaved: (str) => print(str),
),
)
];
columnChildren.addAll(suggestList);
return new Scaffold(
appBar: new AppBar(
title: new Text(widget.title),
),
body: new Column(
children: columnChildren,
),
);
}
или, что еще лучше, просто оставьте offerList как список
List<String> suggestList = [
'hello',
'world',
];
@override
Widget build(BuildContext context) {
List<Widget> columnChildren = [
new Form(
child: new TextFormField(
// _controller listens for changes and updates suggestList
//controller: _controller,
autocorrect: false,
decoration: InputDecoration(labelText: 'Search here'),
onSaved: (str) => print(str),
),
)
];
columnChildren.addAll(suggestList.map((s) => new Text(s)).toList());
В качестве альтернативы, оберните ListView в расширенном
body: new Column(
children: <Widget>[
new Form(
child: new TextFormField(
// _controller listens for changes and updates suggestList
//controller: _controller,
autocorrect: false,
decoration: InputDecoration(labelText: 'Search here'),
onSaved: (str) => print(str),
),
),
new Expanded(
child: new ListView.builder(
itemBuilder: (context, i) => new Text(wordList[i]),
itemCount: wordList.length,
),
),
],
),
Это позволяет бесконечный список прокрутки ниже фиксированной формы.