TabBarView内嵌套PagedListView报RenderViewport固有尺寸错误

报错原因 #

这个错误的本质是嵌套可滚动组件时，内层滚动视图没有拿到明确的高度约束，触发了RenderViewport的固有尺寸计算逻辑，而视口组件本身不支持返回固有宽高。之前给外层Container设置固定高度没有生效，是因为问题出在PagedListView内部的滚动配置和嵌套的子滚动组件上，外层高度约束没有正确传递到内层滚动视口。

修复步骤 #

• 第一步：修改PagedListView的基础配置
  给PagedListView添加shrinkWrap: true属性，让列表根据内容自适应高度，避免无边界约束触发视口计算错误：

  Widget _paginatedPendingDoubtBody() {
    return PagedListView(
      // 新增以下两行配置
      shrinkWrap: true,
      physics: const AlwaysScrollableScrollPhysics(),
      pagingController: _pendingPagingController,
      builderDelegate: PagedChildBuilderDelegate<TeacherDoubtModel>(
        // 原有其他配置保持不变
        // ...
      ),
    );
  }
  

• 第二步：修复首屏加载骨架屏的嵌套列表问题
  firstPageProgressIndicatorBuilder中返回的ListView.builder也是可滚动组件，嵌在PagedListView内部没有明确高度约束，同样会触发报错，需要给它添加收缩和禁止滚动的配置：

  firstPageProgressIndicatorBuilder: (context) => Shimmer.fromColors(
    baseColor: Colors.white.withOpacity(0.4),
    highlightColor: Colors.grey.withOpacity(0.4),
    child: ListView.builder(
      // 新增以下两行配置
      shrinkWrap: true,
      physics: const NeverScrollableScrollPhysics(),
      itemCount: 3,
      itemBuilder: (context, index) {
        // 原有骨架屏代码保持不变
        // ...
      },
    ),
  ),
  

性能优化可选方案 #

如果列表数据量较大，shrinkWrap: true会一次性渲染所有已加载子项带来性能损耗，可以替换为给PagedListView明确传递布局约束的写法，不需要开启shrinkWrap：

Widget _paginatedPendingDoubtBody() {
  return LayoutBuilder(
    builder: (context, constraints) {
      return SizedBox(
        height: constraints.maxHeight,
        child: PagedListView(
          physics: const AlwaysScrollableScrollPhysics(),
          pagingController: _pendingPagingController,
          builderDelegate: PagedChildBuilderDelegate<TeacherDoubtModel>(
            // 原有配置不变，骨架屏内的ListView仍需保留shrinkWrap和禁止滚动配置
            // ...
          ),
        ),
      );
    },
  );
}

提示：所有嵌在另一个滚动视图内部的次级滚动组件，要么设置shrinkWrap: true自适应高度，要么拿到明确的宽高约束，同时非主滚动的次级列表要设置physics: NeverScrollableScrollPhysics()，避免多个滚动组件抢滑动事件、触发视口计算错误。

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