.NET6 Blazor中Virtualize组件搭配card-deck/flex布局陷入无限循环

.NET 6 Blazor WebAssembly 项目中，使用 Bootstrap4 card-deck 布局展示大量卡片时，引入内置 Virtualize 虚拟滚动组件优化渲染速度，会触发组件无限重渲染循环；替换为普通 display:flex 弹性多列布局时也会复现相同问题。当前全量渲染卡片最高耗时达5秒，不强制要求使用Bootstrap card-deck 样式，需要可落地的性能优化方案。

复现代码 #

Razor 组件代码 #

<div class="cards-contanier">
    <div class="card-deck">
        <Virtualize Items="@collection">
            <div class="card">
                <img class="card-img-top" src="..." alt="Card image cap">
                <div class="card-body">
                    <h5 class="card-title">Card title : @context</h5>
                    <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                    <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                </div>
            </div>
        </Virtualize>
    </div>
</div>

样式代码 #

.cards-contanier {
  height: 50vh;
  border: solid black 1px;
  overflow-y: auto;
  overflow-x: hidden;
  scrollbar-color: red transparent;
}

Blazor 内置 Virtualize 组件的默认高度计算逻辑仅适配垂直流式（块级、单列）布局：当 Virtualize 的直接父级是 card-deck、flex 这类支持横向排列+自动换行的多列布局时，组件测量得到的元素占位高度，和实际渲染后的元素高度会持续出现偏差，就会反复触发追加渲染项、重新测量高度的逻辑，最终陷入无限重渲染循环。

以下方案均可以解决无限循环问题，同时保留虚拟滚动的性能优化效果：

• 方案1：固定单卡片高度 + CSS Grid 多列布局（实现成本最低、稳定性最高）
  移除原有 card-deck/flex 多列容器，让滚动容器直接作为 Virtualize 的父元素，通过CSS Grid实现多列卡片排列；同时给 Virtualize 显式传入 ItemSize 参数指定单个卡片的固定像素高度，跳过运行时自动高度测量逻辑，从根源避免布局干扰高度计算。
  改造后代码示例：

  <div class="cards-container">
      <!-- ItemSize值替换为项目中单卡片的实际像素高度 -->
      <Virtualize Items="@collection" ItemSize="320">
          <div class="card-item">
              <div class="card h-100">
                  <img class="card-img-top" src="..." alt="Card image cap">
                  <div class="card-body">
                      <h5 class="card-title">Card title : @context</h5>
                      <p class="card-text">This is a longer card with supporting text below as a natural lead-in to additional content. This content is a little bit longer.</p>
                      <p class="card-text"><small class="text-muted">Last updated 3 mins ago</small></p>
                  </div>
              </div>
          </div>
      </Virtualize>
  </div>
  

  对应样式代码：

  .cards-container {
    height: 50vh;
    border: solid black 1px;
    overflow-y: auto;
    overflow-x: hidden;
    scrollbar-color: red transparent;
    /* Grid实现自适应多列，替换原card-deck布局 */
    display: grid;
    grid-template-columns: repeat(auto-fill, minmax(280px, 1fr));
    gap: 1rem;
    padding: 1rem;
  }
  
  .card-item {
    /* 高度和Virtualize的ItemSize参数保持一致 */
    height: 320px;
  }
  

  注意：如果使用Blazor CSS隔离，需要给.cards-container样式前添加::deep深度选择器，确保样式能应用到Virtualize渲染的内部元素。

• 方案2：行级虚拟滚动（适配卡片高度不固定的场景）
  如果卡片内容长度不固定、无法设置统一高度，可以将原始数据按每行展示的卡片数量做分组，把每一行作为虚拟滚动的单个渲染项，行内部用flex布局排列多列卡片。此时Virtualize测量的是整行的总高度，不会被行内的横向flex布局干扰，不需要固定高度也能正常运行。
  实现要点：

  1. 数据加载完成后，按每行要展示的卡片数（比如3个/行）把原集合拆分为分组集合，类型为IEnumerable<List<T>>
  2. Virtualize绑定分组后的集合，每个渲染项输出一个100%宽度的块级容器作为行，行内用flex排列组内的多个卡片
  3. 无需设置ItemSize参数，组件会自动测量每行的实际高度完成虚拟滚动计算

• 方案3：使用适配多列场景的第三方虚拟滚动组件
  如果业务场景需要更复杂的可变高度、响应式列数、动态加载等能力，可以直接选用已经适配多列布局场景的成熟虚拟滚动组件，无需自行处理高度计算冲突问题。

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