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.
310 — Record #311
311 — Record #312
312 — Record #313
313 — Record #314
314 — Record #315
315 — Record #316
316 — Record #317
317 — Record #318
318 — Record #319
319 — Record #320
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