Flutter SliverList嵌套ListView.builder首次加载网络图片不渲染

核心问题来源于多层滚动组件嵌套时的布局计算异常，具体诱因如下：

1. 内层ListView.builder未明确高度约束，也未关闭自身滚动属性：默认ListView是无限延展的可滚动组件，放在外层CustomScrollView的Sliver子项中时，首次布局阶段框架无法计算出ListView的实际视口尺寸，导致内部的Image.network无法获取到正确的渲染边界，不会触发图片加载逻辑。当页面滚动后原有子项被回收再重建时，布局约束重新计算完成，图片才会正常加载渲染。
2. 代码中ListView.builder未声明itemCount参数：框架无法预先知道列表子项数量，也会影响首次布局的尺寸计算逻辑。

可根据业务场景选择以下任意一种方案修复： #

方案1：适配现有嵌套结构，修复布局参数 #

给内层ListView.builder添加shrinkWrap、physics和itemCount参数，让其跟随子元素高度自适应、关闭自身滚动，把滚动控制权交给外层CustomScrollView即可：

CustomScrollView(
 slivers: [
     SliverList(
       delegate: SliverChildBuilderDelegate((_, index) {
        return Column(children: 
                     [
                     Text(somedata[index]),
                     Container(child: ListView.builder(
                                        shrinkWrap: true,
                                        physics: const NeverScrollableScrollPhysics(),
                                        itemCount: arrayOfImages.length,
                                        itemBuilder: (_, int index){
                                        return Image.network(arrayOfImages[index]);
                                      }))
                     ]
               );
     }),
 ]
)

方案2：给图片明确固定尺寸 #

如果你的业务场景中图片展示尺寸是固定的，直接给Image.network指定宽高参数，强制其有确定的布局边界，即可跳过滚动容器的尺寸计算依赖，首次加载就触发渲染：

Image.network(
  arrayOfImages[index],
  width: double.infinity,
  height: 200,
  fit: BoxFit.cover,
)

方案3：移除滚动嵌套，优化性能 #

嵌套滚动组件本身会额外消耗性能，建议直接把内层图片列表拆分到外层SliverList中作为独立子项渲染，完全避免布局冲突：可以把每个图片、每个文本项都作为SliverChildBuilderDelegate的独立item处理，不需要在单个Sliver项内部嵌套另一个列表。

内容的提问来源于stack exchange，提问作者Koala