Как я могу справиться с ошибкой рендеринга ListView во флаттере

Question

На моем экране есть столбец, а в столбце есть ListView и текстовое поле.
Это похоже на чат с NPC, поэтому, если пользователи вводят все ответы, текстовое поле заменяется кнопкой.
В этот момент произошла ошибка рендеринга, и я не знаю, в чем проблема.

Вот как это выглядит:

Неполный код моей реализации приведен ниже.

return Column(
  children: <Widget>[
    Flexible(
      child: ListView.builder(
        scrollDirection: Axis.vertical,
        physics: const AlwaysScrollableScrollPhysics(),
        padding: const EdgeInsets.symmetric(horizontal: 20.0,vertical: 30.0),
        itemCount: widgets.length,
        itemBuilder: (context,index) => widgets[index],
        controller: _scrollController,
      ),
    ),
    state.showSubmitButton 
    ? Padding(
        padding: const EdgeInsets.only(bottom: 20.0),
        child: PrimaryButton(
          color: primaryBeige,
          text: 'Submit',
          callback: ()=>_tagChatBloc.emitEvent(TagChatEventComplete())
        )
      ) 
    : (state.isDetailStoreLoading 
      ? Padding(
          padding: const EdgeInsets.only(bottom: 20.0),
          child: CustomProgressIndicator()
        )
      : TagChatInput(scrollController: _scrollController)
    )
  ],
);

Ошибка

I / flutter (32685): ══╡ ИСКЛЮЧЕНИЕ ВЫДЕРЖИВАЕТСЯ ПРИ ПОЛУЧЕНИИ БИБЛИОТЕКИ ╞═════════════════════════════════════════════════════════ I / flutter (32685): во время выполнения executeLayout () было выдано следующее утверждение: I / flutter (32685): превышено максимальное число циклов компоновки в RenderViewport.I / flutter (32685): объекты рендеринга RenderViewport во время макета могут повторить попытку, если их осколки или их I / flutter (32685): ViewportOffset решает, что смещение должно быть исправлено с учетом информации, собранной I / flutter (32685):во время этого макета.I / flutter (32685): Однако в случае этого объекта RenderViewport это происходило 10 раз, и все же не было I / flutter (32685): консенсус по смещению прокрутки.Это обычно указывает на ошибку.В частности, это означает, что объект RenderViewport испытывает одну из проблем I / flutter (32685): следующие три проблемы: I / flutter (32685): * Один из дочерних элементов RenderSliver или ViewportOffset имеет такую ​​ошибку, что они всегда думаютI / flutter (32685): что им нужно исправить смещение независимо.I / flutter (32685): * Некоторая комбинация дочерних элементов RenderSliver и ViewportOffset имеет плохое взаимодействие, например I / flutter (32685): одна применяет коррекцию, а другая применяет обратную коррекцию, приводя к бесконечному I / flutter (32685): цикл исправлений.I / flutter (32685): * Существует патологический случай, который в конечном итоге разрешится, но он настолько сложен, что I / flutter (32685): не может быть разрешен ни за какое разумное количество проходов макета.

Как мне решить эту проблему?

Answer 1

Более низкие версии будут выбрасывать это исключение.В моем приложении флаттера 1.1.5 не удалось, 1.5.4 успешно.

Или вы можете изменить исходный код флаттера в каталоге: packages\flutter\lib\src\rendering\sliver_list.dart.

Подробности в ссылках ниже:

https://github.com/flutter/flutter/issues/29852

Answer 2

Менеджер макетов флаттера не знает, как далеко расширять ваше представление списка, потому что оно продолжается и никогда не находит точку остановки.

Вот несколько шагов для создания интерфейса обмена сообщениями:

1. Установите для столбца mainAxisSize значение MainAxisSize.max

2. Поместите ваш список в расширенный виджет с контейнером в нем.Таким образом, у вас будет:

   • Расширенный

     • Контейнер

       • ListView

3. Оберните ваш "интерфейс окна сообщений" в контейнере фиксированной высоты, чтобы в Expanded можно было остановиться и добавить его в качестве последнего дочернего элемента вашего спискас вашими вышеуказанными условиями, чтобы сделать это.

В конце у вас должно быть

Column: MainAxisSize.max
  Expanded
    Container: No given size
      ListView
  Container: Fixed height (For Messages input UI and your button)

Это создаст пользовательский интерфейс чата.Это то, как я совсем недавно реализовал тот же интерфейс.Убедитесь, что ваше условное выражение заменяет дочерний элемент фиксированного контейнера, а не сам контейнер.