algorithm - UI 虚拟化实现细节。如何实现？

Question

我知道有几个框架实现了 UI 虚拟化，例如 C# WPF、Qt QML 和 Aurelia JS。

我了解虚拟化的工作原理以及滚动期间项目如何回收的基本概念。

鉴于我很难理解:

• 视口(viewport)如何知道需要绘制哪个项目(给定偏移量)？
• 如果项目可以有不同的高度，视口(viewport)如何计算它的实际尺寸？

真正的问题是滚动期间绘制的项目的可变高度(或宽度)。事实上，如果绘制控件的高度是固定的，那么一切都很简单:

• 内容大小为 numItems*itemHeight(或 numItems * itemWidth)
• 在 View 中绘制的第一个项目由 ViewPortOffset/ItemHeight 计算。例如，如果视口(viewport)的大小为 100x100，当前偏移量为 200，itemHeight 为 10，则第一个要绘制的项目为项目 20。

是否有任何类型的资源或博客可用于学习如何使用可变高度/宽度解决此问题

Answer 1

在我的Sciter Engine我有一个具有可变高度的虚拟可滚动项目列表的示例:

有或没有动态(动画)滚动支持。

实现非常简单，查看 {sciter-sdk}/samples/ideas/virtual-list/vertical.htm 演示和 tapev.tis implementation .

它使用滑动但固定的 DOM 元素缓冲区 - 在任何给定的时刻，只有 const BUFFER_SIZE = 20; 的元素被加载到 View 中。因此它可用于滚动无限长度的记录集。

它工作得很好，但有一个明显的限制——没有滚动条。准确地说:没有反射(reflect)项目/内容维度的滚动条，因为整个记录集在呈现时不可用。但是你可以有近似于那个的滚动条 - 例如滚动条 slider 大小反射(reflect)了看到的项目数及其位置 - View 中第一个项目的索引。