Performance 如何在其他小部件中包含条子的地方创建performant Flatter条子列表?

Performance 如何在其他小部件中包含条子的地方创建performant Flatter条子列表?,performance,flutter,flutter-layout,Performance,Flutter,Flutter Layout,我想做一个如下的布局,每个列表中有几百个项目(红色区域)。请注意,红色区域不应自行滚动-整个页面应滚动,但仅呈现当前可见列表中的项目: 在外部(白色区域),我尝试使用列、ListView或CustomScrollView垂直堆叠内部容器 将包覆面提取:true和NeverScrollablePhysics设置为红色列表视图时,布局工作。当然,这会导致它们立即渲染每个项目,因此在红色列表变长时会导致性能问题 我需要黄色容器/材质的原因是,它们也可以是拖曳目标,因此整个黄色区域(以及红色区域)都是

我想做一个如下的布局,每个列表中有几百个项目(红色区域)。请注意,红色区域不应自行滚动-整个页面应滚动,但仅呈现当前可见列表中的项目:

在外部(白色区域),我尝试使用列、ListView或CustomScrollView垂直堆叠内部容器

包覆面提取:true
NeverScrollablePhysics
设置为红色列表视图时,布局工作。当然,这会导致它们立即渲染每个项目,因此在红色列表变长时会导致性能问题

我需要黄色容器/材质的原因是,它们也可以是拖曳目标,因此整个黄色区域(以及红色区域)都是拖曳目标

我现在的问题是: 如何使用带有SliverList或ListView.builder的CustomScrollView实现此布局,以仅呈现可见但仍有黄色容器包装列表的列表项(以便能够具有所需的DragTarget行为)

我还考虑过创建一个大的CustomScrollView并将各个部分分割开来,例如,创建一个小部件的长列表,这些小部件是CustomScrollView中SliverList的一部分,如下所示:

  • 黄色容器1顶部填充物
  • 第一个红色框中的第一个列表项
  • 第一个红色框中的第二个列表项
  • 黄色容器1底部填充物
  • 黄色容器2顶部衬垫
  • 第二个红色框中的第一个列表项
  • 第二个红色框中的第二个列表项
  • 第二个红色框中的第三个列表项
  • 黄色容器2底部填充物
从理论上讲,这会以某种方式起作用,也会使事情比简单地嵌套小部件复杂得多。 但在这种情况下,我找不到任何方法来“围绕”黄色框制作DragTarget

我也很高兴有任何其他的想法,如何解决在其他小部件中以一种性能良好的方式嵌套多个长列表的问题