Сбой 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,
        ),
      ),
    ],
  ),

Это позволяет бесконечный список прокрутки ниже фиксированной формы.

Другие вопросы по тегам