VirtualListView
Variable Höhen mit einem stabilen sichtbaren Fenster.
Virtualisierung
Viele Zeilen sollten sich weiterhin leichtgewichtig anfühlen
Nur der sichtbare Bereich wird gemountet, während gemessene Zeilenhöhen die gesamte Scrollfläche präzise halten.
1.000
Datensätze in der lokalen Showcase
44–120 px
gemessene variable Zeilenhöhen
Header
benutzerdefinierter Inhalt im selben Scrollfluss
Mitscrollender Header mit einer langen Liste
Kurze, mittlere und hohe Zeilen aktualisieren das Präfixhöhenmodell, sobald sie in den Viewport gelangen.
1.000 Datensätze mit einem mitscrollenden Listen-Header
Gemessene Höhen ersetzen ihre Schätzwerte, ohne die vollständige Liste zu mounten.
20 — Record #21
21 — Record #22
22 — Record #23
23 — Record #24
24 — Record #25
25 — Record #26
26 — Record #27
27 — Record #28
28 — Record #29
29 — Record #30
Bereich
Nur sichtbare Kindelemente zählen
Foreach verwaltet stabile Einfügepunkte für den aktuellen Viewport und das Overscan-Fenster.
Höhen
Messung korrigiert Schätzung
Eine Präfixsumme ordnet Scroll-Offsets auch dann Indizes zu, wenn jede Zeile eine andere Höhe hat.
Lebenszyklus
Observer verschwinden mit ihren Zellen
Resize-, Scroll- und Remote-Listener werden von ihren besitzenden Komponenten entsorgt.
VirtualList-DSL
Der Zeilen-Renderer und der optionale Header bleiben innerhalb des kontextbezogenen Komponentenbaums.
scala
virtualList[ShowcaseItem](showcaseItems) {
estimateHeightPx = 64
overscanPx = 240
crawlable = true
crawlId = "showcase-records"
cellRenderer = (item: ShowcaseItem | Null, index: Int) =>
div { text(item.title) {} }
header {
div { text("Scrolling list header") {} }
}
}
Crawl-Zustand
VirtualListView verwendet denselben komponentenlokalen Cookie-Vertrag wie TableView und DataGrid.
text
crawlable = true
crawlId = "showcase-records"
Cookie: ui-crawl-showcase-records
State: offset, limit and optional remote sorting
URL: remains unchanged