带有列表视图的动画交叉淡入淡出出现无限高度错误

Question

这是代码。 我想要的是请求结果时显示进度，并在请求完成时将结果显示为列表。

我选择动画交叉淡入淡出，因为它具有方便的过渡动画;

Widget SearchResultPage() {
return AnimatedCrossFade(
firstChild: Center(
child: CircularProgressIndicator(),
),
secondChild: ListView.builder(
itemCount: _searchResult.length,
itemBuilder: (BuildContext context, int index) {
return SearchListItem(_searchResult[index]);
}),
crossFadeState: _searchResult.isEmpty
? CrossFadeState.showFirst
: CrossFadeState.showSecond,
duration: Duration(milliseconds: 500));
}

Widget SearchListItem(BookFuzzySearchDetail detail) {
return Container(
decoration:
BoxDecoration(border: Border(bottom: BorderSide(color: Colors.grey))),
child: ListTile(
contentPadding: EdgeInsets.symmetric(vertical: 5.0, horizontal: 4.0),
leading: Image.network(
detail.cover,
width: 50.0,
height: 50.0,
),
title: Text(
detail.title,
),     
),
);
}

我得到了错误：

I/flutter ( 6281): ══╡ EXCEPTION CAUGHT BY RENDERING LIBRARY ╞═════════════════════════════════════════════════════════
I/flutter ( 6281): The following assertion was thrown during performResize():
I/flutter ( 6281): Vertical viewport was given unbounded height.
I/flutter ( 6281): Viewports expand in the scrolling direction to fill their container.In this case, a vertical
I/flutter ( 6281): viewport was given an unlimited amount of vertical space in which to expand. This situation
I/flutter ( 6281): typically happens when a scrollable widget is nested inside another scrollable widget.
I/flutter ( 6281): If this widget is always nested in a scrollable widget there is no need to use a viewport because
I/flutter ( 6281): there will always be enough vertical space for the children. In this case, consider using a Column
I/flutter ( 6281): instead. Otherwise, consider using the "shrinkWrap" property (or a ShrinkWrappingViewport) to size
I/flutter ( 6281): the height of the viewport to the sum of the heights of its children.

新来的飘飘然，在这里停留了几天，请感谢任何建议。

Answer 1

尝试将属性shrinkWrap添加到ListView.builder

ListView.builder(
shrinkWrap: true,
itemCount: _searchResult.length,
itemBuilder: (BuildContext context, int index) {
return SearchListItem(_searchResult[index]);
}),

Answer 2

AnimatedCrossFade 不仅可以对两个小部件的不透明度变化进行动画处理，还可以对大小过渡进行动画处理;由于列表的大小在构建时是未知的(我的意思是构建生命周期方法，而不是构建项目(，因此没有shrinkWrap: true它会引发异常。

正如@nickolay-savchenko在对接受答案的评论中指出的那样，shrinkWrap: true可能会导致严重的性能问题，对于这种情况来说绝对是不必要的矫枉过正。

我建议使用AnimatedSwitcher而不是AnimatedCrossFade，后者只会进行不透明度更改(默认行为(。 可以说，您不需要在可能溢出屏幕的大型列表和"空搜索结果"小部件之间对大小变化进行动画处理。

以下是我如何在我的一个项目中使用它来动画列表和"加载"小部件之间的过渡：

AnimatedSwitcher(
duration: const Duration(milliseconds: 500),
child: items.isEmpty
? const LoadingWidget()
: ListView.builder(
itemCount: items.length,
itemBuilder: (context, index) => ...
),
),