问题标签 [ui-virtualization]

我像这样使用 Virtualize 组件：

如何获取对当前<Row>组件的引用？

我需要对它们显式调用刷新。

我有这个基本的虚拟化列表，我使用 ItemsProvider 在其中加载项目：

当用户单击和项目时，它应该被展开。

如何在按需加载子项时使项目可扩展？

这不是微不足道的练习，也许有人已经这样做了。该组件可能应该跟踪展开的项目，以便计算在用户滚动时应该提供哪些项目。

如何访问索引？

我有一个带有行虚拟化的自定义数据网格。

当我通过拖动滚动条向下滚动时，滚动会中断，就像在呈现新的“页面”之前一样。

你有什么想法，为什么会发生这种情况？

演示（REPL）在这里：https ://blazorrepl.com/repl/mvkBuHuB22FVBxY258

我正在尝试实现我自己的 VirtualFlow，但我遇到了一些性能问题，我不明白瓶颈可能在哪里以及我可以做些什么来改进它。
这是一个带有两个列表的展示，一个带有简单的单元格，一个带有复选框，两者都有 100_000 个项目（抱歉 gif 质量）：

正如你所看到的，我在简单的单元格中滚动只有一个标签没有问题，但是带有复选框的列表在开始时可能会非常滞后。

为了达到这样的性能（否则会更糟）我记住了我的细胞工厂功能，以便所有细胞在需要时都准备好在内存中，我想知道是否还有其他东西可以让它更快/更顺畅。

我用来显示单元格的代码是：

我什至添加了这个小日志，最重的部分似乎是当我调用时getChildren().setAll(...)，单元格构建和布局几乎都是立即的

from哦，关于andto参数的另一个注释。当我滚动时，我获取滚动条的值并计算第一个和最后一个可见索引，如下所示：

编辑以回答一些问题：

为什么要实现我自己的 VirtualFlow？

最终目标是制作我自己的 ListView 实现，为此我还需要一个 VirtualFlow，而且我知道这是一项相当低级和艰巨的任务，但我认为这将是了解更多关于编程的好方法一般以及关于JavaFX

为什么要记忆？

通过将单元工厂结果缓存在内存中，它使后续滚动更快，因为节点已经构建，它们只需要布局，这相当容易。问题出在开始，因为由于某种原因，VirtualFlow 滞后于更复杂的单元，我不明白为什么因为流行的库 Flowless 也使用 memoization 并将节点缓存在内存中，但它从一开始就非常流畅. JavaFX 的 VirtualFlow（从 JFX16 修订）在没有记忆的情况下也非常高效，但理解起来要复杂得多

我对要构建的 UI 控件有以下要求。经过几天摆弄各种方法后，我决定打开这个问题，看看在 Android 中是否真的没有比自己编写一个非常高级的组件来处理所有这些行为更好的方法来实现这种行为。

要求

• 有一个给定的数据项列表，我需要将其排列在可滚动表面内的屏幕上。
• 表面的虚拟大小是预先知道的，并且可能在水平和垂直方向上都超过视口/屏幕。
• 每个数据项的实际大小和绝对位置都是预先知道的。
• 数据项有一个 z-index 来指示它们所在的“层”。
• 用户应该能够在此可用表面内滚动以浏览数据项。
• UI 元素（视图）应该被虚拟化：当数据项即将在屏幕上变得可见时，数据项的 UI 元素会动态创建，而当它们变得不可见时，UI 元素可能会再次被销毁。
• 每个数据项都可能基于数据创建特定的 UI 元素。
• 我需要能够使用平滑滚动方法以编程方式水平/垂直滚动。
• 可选：在某些时候，用户还应该能够在此区域内进行缩放，以使 UI 元素更大/更小。

尝试 1 我从一个ViewGroup包裹在一个ScrollView和中的自定义开始HorizontalScrollView。但是这种方法缺乏任何虚拟化方面。此外，嵌套多个 ScrollView 的需要使得处理状态容易出错。

尝试 2 然后我跌跌撞撞地RecyclerView尝试采用各种开源LayoutManagers，比如这个列表中的那些。但回收方法在RecyclerView很大程度上依赖于被重用的实际 UI 元素。视图被合并和重用，并且对于布局视图，通常已经创建并完全布局以确定排列。

尝试 3 我也尝试实现完全自定义LayoutManager，但由于回收性质不完全适合我的用例，很难满足 RecyclerView 做正确的事情。

这个的实际用例是： 我有一个音乐雕刻引擎其中输出是组成整个乐谱的一堆图像。所有的布局和渲染都在这个引擎中发生，独立于任何 UI 层。此外，音乐表可以对这些图像进行各种叠加，例如显示当前播放位置的光标或用户的自定义范围选择。所有这些元素都需要以性能最佳的方式显示在屏幕上。需要虚拟化来优化内存消耗，将所有图像完全保留在内存中非常昂贵，并且很容易达到 GB 的内存。为了解决这个问题，我将图像编码为 PNG，这会消耗一点 CPU，但可以保护内存。如它们所示，它们被再次解码以供显示。当PNG仍然“非常遥远”时，我什至想将它们保存到缓存目录

可比较的用例是：

• 一个地图应用程序，其中包含所有图像作为图块，还有其他覆盖，如路径或标记。用户可以滚动、缩放等，并根据每个元素的数据有效地适应 UI
• 您可以在大型虚拟表面上滚动并在其上放置物品的游戏。游戏状态是数据，而 UI 元素将是 ImageView 和其他要与之交互的 UI 元素。
• WebView 还具有由不同引擎布局的元素，可基于此布局进行滚动，并且每个元素在渲染时可能以特殊方式显示在 UI 上。

我需要一个 TreeListView，并在 TreeView 中添加了一个列。此外，应该应用 UI 虚拟化。

关联

因此，参考上面链接中的答案，我使用了应用 UI 虚拟化的 TreeListView。（您可以通过复制并粘贴答案的代码来创建示例。）但是，存在一个问题，即扩展按钮的布局会影响每行的所有列。

当然布局问题可以通过上面代码中第一个GridViewColumn的Template部分添加Expander Button来解决。但是，这样做会自动禁用 UI 虚拟化。（添加10000多个集合元素后，可以通过运行程序测试是否开启UI虚拟化。父节点双击展开子节点、滚动、窗口大小调整等）

如何在保持 UI 虚拟化的同时仅将 TreeListView 的 Expander 应用于第一列？UI 虚拟化似乎在各种情况下被自动禁用。

当项目在视口上接近/可见时，我只想category title + category products在虚拟化类别列表（ with IntersectionObserver）中获取项目数据（），这在页面加载速度/API请求调用方面是一件好事吗？