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.
280 — Record #281
281 — Record #282
282 — Record #283
283 — Record #284
284 — Record #285
285 — Record #286
286 — Record #287
287 — Record #288
288 — Record #289
289 — Record #290
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