我可以将 Virtualize 组件用于每行多个项目吗?

Can I use the Virtualize component with multiple items per row?

我尝试 <Virtualize> 一个包含一千个项目的列表,每行显示多个项目,display: inline-block。 Blazor 中的结果有点奏效,但似乎总是在最后一行留下相同数量的项目,无论总列表中有多少。我意识到这是有道理的,因为 Virtualize 对将项目分解成块一无所知;它可以在任何项目开始渲染。因此,当我查看列表的底部并动态地将一个项目添加到列表中时,列表会重新呈现,重新排列显示的所有项目,删除前一个开始项目并再次将最后一个项目(新项目)放在一行中的底部,该行中的项目数与之前相同。我希望它能够在最后一个项目之后添加它,而无需重排它之前的所有项目。

Demo: Scroll all the way to the bottom, wait for images to load, and click Add. Sometimes it initially adds it properly without reflowing all previous items, but if you keep adding, soon enough it will reflow all items unnecessarily and leave you with a final row with a unchanging number of items in it. Here is the code, focusing on ProductGrid.razor.

有什么想法可以让 Virtualize 组件允许每行有多个项目,并且随着事情的变化保持一致的布局?也许我们需要让它知道“块大小”,尽管它会根据不同的 screens/styles?

而有所不同

使用 @key 帮助渲染引擎了解哪些元素已更新/删除/添加。如果渲染引擎无法识别,它将重绘整个屏幕。 @key 将 html 元素链接到提供的密钥以协助该过程。当您提供 class 实例时,它会比较引用。

Docs