Blazor Virtualize组件无内容显示问题（.NET 8预览版）

你的代码中foreach能正常显示内容，但Virtualize组件空白，核心问题是Virtualize的默认项高度计算与实际内容不匹配，加上当前列表项太少、刚好填满容器高度，导致虚拟化逻辑未触发渲染。以下是几种可行的修复方案：

1. 指定ItemSize属性 #

Virtualize默认假设每个项高度为50px，而你的文本项实际高度远小于这个值，导致组件误判无需渲染。手动设置与实际项高度匹配的ItemSize：

<div style="height:100px;overflow-y:scroll">
    <Virtualize Items="@stringList" ItemSize="20">
        <div>@context</div>
    </Virtualize>
</div>

2. 给列表项设置固定高度 #

为每个列表项添加固定高度，让Virtualize能准确计算布局空间：

<div style="height:100px;overflow-y:scroll">
    <Virtualize Items="@stringList">
        <div style="height:20px">@context</div>
    </Virtualize>
</div>

3. 增加列表项数量 #

当列表项数量足够多、超出容器的100px高度时，Virtualize会自动渲染可见区域的内容。你可以扩充测试数据：

protected override void OnInitialized() => stringList ??= new() 
{ 
    "Here's a string!", 
    "Here's another string!",
    "测试文本3",
    "测试文本4",
    "测试文本5",
    "测试文本6",
    "测试文本7"
};

额外需要确认的点 #

• 确保项目的_Imports.razor中已添加@using Microsoft.AspNetCore.Components.Web.Virtualization，否则Virtualize组件无法被正确识别
• 父容器的height和overflow-y:scroll必须设置正确，这是Virtualize生效的基础条件

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