flutter中ListView渲染错误如何处理

Question

在我的屏幕中，我有一个列，该列有一个 ListView 和一个文本字段。
\n这就像与 NPC 聊天，因此如果用户输入所有答案，文本字段将更改为按钮。
\n此时出现渲染错误，不知道是什么问题。

\n\n

它看起来是这样的：

\n\n

\n\n

我的实现的部分代码如下。

\n\n

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

\n\n

错误

\n\n

\n

I/flutter (32685): \xe2\x95\x90\xe2\x95\x90\xe2\x95\xa1 渲染库捕获异常 \xe2\x95\x9e\xe2\x95\x90\xe2\x95\x90\xe2 \x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95 \x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90 \xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2 \x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95 \x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90 \xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2 \x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\xe2\x95\x90\n I/flutter (32685): 在 PerformLayout() 期间抛出以下断言：\n I /flutter (32685): RenderViewport 超出了其最大布局周期数。\n I/flutter (32685): RenderViewport 渲染对象在布局期间，如果它们的条子或它们的条子可以重试\n I/flutter (32685): ViewportOffset决定应该纠正偏移以考虑收集的信息\n I/flutter (32685)：在该布局期间。\n I/flutter (32685)：但是，在此 RenderViewport 对象的情况下，这种情况发生了 10 次并且仍然没有\n I/flutter (32685)：对滚动偏移达成共识。这通常表明存在错误。具体来说，这意味着 RenderViewport 对象遇到\n I/flutter (32685): 以下三个问题之一：\n I/flutter (32685): * RenderSliv​​er 子项或 ViewportOffset 之一有一个错误，例如他们总是认为\n I/flutter (32685)：无论如何，他们都需要纠正偏移。\n I/flutter (32685): * RenderSliv​​er 子项和 ViewportOffset 的某些组合具有不良交互，例如\n I/ flutter (32685)：一个应用校正，然后另一个应用反向校正，导致无限\n I/flutter (32685)：校正循环。\n I/flutter (32685)：* 有一种病态情况最终会解决，但它太复杂了，以至于\n I/flutter (32685):无法在任何合理数量的布局过程中解决。

\n

\n\n

我怎么解决这个问题？

\n

Answer 1

flutter 布局管理器不知道将列表视图扩展多远，因为它一直在持续，永远找不到停止点。

以下是构建消息传递 UI 需要采取的一些步骤：

1. 将列 mainAxisSize 设置为 MainAxisSize.max

2. 将您的列表视图放在一个带有容器的扩展小部件中。所以你将拥有：

   • 扩展

     • 容器

       • 列表显示

3. 将“消息框 UI”包装在固定高度的容器中，以便 Expanded 可以有一个停止的位置，并将其添加为列表的最后一个子级，并使用上述条件来执行此操作。

最后你应该有

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

这会生成一个聊天 UI。这就是我最近实现相同界面的方式。确保您的条件替换固定容器的子容器，而不是容器本身。