Element Tree: Was es ist, Zusammenhang mit RenderObject und Funktionsweise

Was ist Element Tree in Flutter?

Element Tree ist eine Zwischenhierarchie in Flutter, die auf Basis des Widget Tree erstellt wird und die Einfügung von Widgets in die Anwendung verwaltet. Jede Elementinstanz entspricht einem Widget im Baum und speichert eine Referenz darauf. Der Hauptunterschied zwischen einem Element und einem Widget besteht darin, dass das Element seine Position im Baum zwischen Neubauten beibehält, während das Widget bei jedem build-Aufruf neu erstellt werden kann.

Warum Element Tree benötigt wird

Ohne Element Tree könnte Flutter die Benutzeroberfläche nicht effizient aktualisieren. Wenn jeder Neubau den RenderObject Tree neu erstellen würde, wäre die Leistung inakzeptabel niedrig. Element Tree fungiert als Stabilisator: Er behält Referenzen auf RenderObject und State zwischen Updates bei und ermöglicht es Flutter, nur minimale Änderungen am Render-Baum vorzunehmen.

Arten von Elementen

Flutter verwendet drei Haupttypen von Elementen: StatelessElement für StatelessWidget, StatefulElement für StatefulWidget und LeafRenderObjectElement, SingleChildRenderObjectElement, MultiChildRenderObjectElement für RenderObjectWidget. Jeder Typ ist auf seine Widget-Klasse spezialisiert und bestimmt, wie das Element mit RenderObject interagiert.

Beziehung zwischen Widget, Element und RenderObject in der Drei-Schichten-Architektur

Die Drei-Schichten-Architektur von Flutter besteht aus Widget Tree (Konfiguration), Element Tree (Verwaltung) und RenderObject Tree (Rendering). Element Tree ist das verbindende Glied: Er liest die Konfiguration aus dem Widget und übergibt Befehle an RenderObject. Ohne Element Tree könnte das Framework die deklarative Beschreibung nicht effizient mit dem tatsächlichen Rendering synchronisieren.

Wie das Element Widget und RenderObject verbindet

Wenn ein Element in den Baum eingefügt wird, überprüft es den Widget-Typ. Wenn das Widget ein RenderObjectWidget ist, erstellt das Element das entsprechende RenderObject und fügt es in den RenderObject Tree ein. Wenn das Widget ein LeafRenderObjectWidget ist, erstellt das Element ein Blatt-RenderObject. Für StatelessWidget und StatefulWidget verwaltet das Element lediglich die Einfügung von Kind-Elementen.

abstract class Element {
  Widget widget;
  Element? parent;
  List<Element>? children;

  void mount(Element? parent, dynamic newSlot);
  void update(Widget newWidget);
  void unmount();
}

Dieser vereinfachte Code zeigt die grundlegende Struktur von Element. Jedes Element speichert eine Referenz auf das aktuelle Widget, das übergeordnete Element und die Kind-Elemente. Die Methoden mount, update und unmount verwalten den Lebenszyklus des Elements und seines zugehörigen RenderObject.

Lebenszyklus eines Elements: von der Erstellung bis zur Entfernung

Jedes Element in Flutter durchläuft eine Abfolge von Lebenszyklusphasen: Erstellung, Montage, Aktualisierung und Demontage. Das Verständnis dieser Phasen ist für das Debuggen unerwarteten Verhaltens notwendig, insbesondere bei der Arbeit mit Animationen, asynchronen Operationen und Zustandsverwaltung.

Phase 1: Erstellung des Elements

Ein Element wird durch Aufruf der createElement-Methode des Widgets erstellt. Für StatelessWidget wird ein StatelessElement erstellt; für StatefulWidget wird ein StatefulElement erstellt (das auch ein State-Objekt erstellt). Für RenderObjectWidget wird das entsprechende RenderObjectElement erstellt. Die Elementerstellung erfolgt, wenn das Widget zum ersten Mal im Widget Tree erscheint.

Phase 2: Montage (mount)

Während der Montage wird das Element zum Element Tree hinzugefügt und erhält ein übergeordnetes Element. Für RenderObjectElement erstellt die Montage auch ein RenderObject und fügt es in den RenderObject Tree ein. Wenn das Widget ein StatefulWidget ist, wird in dieser Phase die initState-Methode des State-Objekts aufgerufen.

Phase 3: Aktualisierung (update)

Wenn das Widget mit einer neuen Konfiguration neu aufgebaut wird, erhält das Element das neue Widget über die update-Methode. Das Element vergleicht den Typ des alten und neuen Widgets: Stimmen die Typen überein, aktualisiert das Element seine Konfiguration; wenn nicht, wird das Element demontiert und ein neues erstellt. Dies wird als „Widget-Wechsel" bezeichnet und ist die Ursache für Zustandsverlust beim Typwechsel.

Phase 4: Demontage (unmount)

Wenn ein Widget aus dem Widget Tree entfernt wird, wird die unmount-Methode des Elements aufgerufen. Das Element wird aus dem Element Tree entfernt, das RenderObject wird aus dem RenderObject Tree entfernt, und für StatefulWidget wird die dispose-Methode des State-Objekts aufgerufen. Nach der Demontage kann das Element wiederverwendet werden, wenn das Widget erneut an derselben Position erscheint.

Die Rolle von Schlüsseln im Element Tree

Schlüssel (Key) sind ein Elementidentifikationsmechanismus, der es Flutter ermöglicht, Widgets aus dem alten und neuen Widget Tree nicht nach Position, sondern nach einer eindeutigen Kennung abzugleichen. Schlüssel sind bei der Arbeit mit dynamischen Listen, in denen sich die Reihenfolge der Elemente ändern kann, von entscheidender Bedeutung: Hinzufügen, Entfernen oder Neuanordnen von Elementen.

Wie Schlüssel den Element Tree beeinflussen

Ohne Schlüssel gleicht Flutter Elemente nach ihrer Position im Baum ab: Das Element an Position 0 des alten Baums wird durch das Widget an Position 0 des neuen Baums ersetzt. Wenn sich die Reihenfolge geändert hat, werden Elemente durcheinandergebracht und der Zustand kann verloren gehen oder an falsche Daten gebunden werden. Ein Schlüssel zwingt Flutter, ein Element nach Kennung statt nach Position zu suchen.

ValueKey, ObjectKey und UniqueKey

ValueKey verwendet einen einfachen Wert (Zeichenkette, Zahl) zur Identifizierung eines Elements. ObjectKey verwendet eine Objektreferenz — geeignet, wenn das Element keine stabile Zeichenkettenkennung hat. UniqueKey generiert bei jeder Erstellung eine eindeutige Kennung — wird verwendet, wenn jede Widget-Instanz eindeutig sein muss.

Column(
  children: items.map((item) => TodoItem(
    key: ValueKey(item.id),
    title: item.title,
    isDone: item.isDone,
  )).toList(),
)

In diesem Beispiel stellt ValueKey mit item.id sicher, dass jeder TodoItem seinen Zustand (z. B. Fokus des Eingabefelds) behält, wenn sich die Reihenfolge der Elemente in der Liste ändert. Ohne Schlüssel würde das Element an der ersten Position den Zustand des vorherigen Elements an derselben Position erhalten.

Wie Element Tree den Zustand verwaltet

Zustand (State) wird in Flutter nicht in Widgets, sondern in Elementen gespeichert. Wenn ein StatefulWidget neu aufgebaut wird und eine neue Widget-Instanz erstellt, behält das entsprechende StatefulElement eine Referenz auf das alte State-Objekt. Das neue Widget wird mit dem vorhandenen State verknüpft, sodass Daten zwischen Neubauten erhalten bleiben.

Warum der Zustand bei Neubau nicht verloren geht

Beim Neubau eines Widgets erstellt Flutter eine neue Instanz von StatefulWidget, aber das entsprechende StatefulElement bleibt im Element Tree. Das Element ruft die update-Methode auf State auf und übergibt das neue Widget. Somit bleiben das State-Objekt und seine Daten erhalten. Ein Zustandsverlust tritt nur auf, wenn sich der Widget-Typ ändert, der Schlüssel ändert oder das Element aus dem Baum entfernt wird.

InheritedWidget und Element Tree

InheritedElement ist ein spezielles Element, das es Kind-Elementen ermöglicht, Daten von einem übergeordneten InheritedWidget ohne explizite Übergabe über Konstruktoren zu empfangen. Wenn sich InheritedWidget ändert, benachrichtigt InheritedElement alle abhängigen Elemente, die neu aufgebaut werden. Dieser Mechanismus liegt Theme, MediaQuery und Provider zugrunde.

• Abhängigkeit — ein Element registriert sich als abhängig von InheritedElement beim Aufruf von dependOnInheritedWidgetOfExactType.
• Benachrichtigung — wenn sich InheritedWidget ändert, markiert das Framework alle abhängigen Elemente als neubaubedürftig.
• Neubau — abhängige Elemente werden im nächsten Frame neu aufgebaut und aktualisieren die UI entsprechend den neuen Daten.

Auswirkung von Element Tree auf die Leistung

Element Tree verbraucht Speicher und beeinflusst die Geschwindigkeit des ersten Renderings. Jedes Element belegt eine bestimmte Menge Speicher: eine Referenz auf das Widget, eine Referenz auf das übergeordnete Element, eine Liste von Kind-Elementen, einen Slot und zusätzliche Felder für RenderObjectElement. Die Optimierung des Element Tree verkürzt die Startzeit und reduziert den Speicherverbrauch.

Wiederverwendung von Elementen

Flutter versucht, Elemente beim Neubau wiederzuverwenden. Wenn das Widget in der neuen Konfiguration denselben Typ und Schlüssel hat, wird das Element nicht neu erstellt — es wird aktualisiert. Dies ist deutlich schneller als die Erstellung eines neuen Elements mit anschließender Montage. Wenn sich jedoch der Typ oder der Schlüssel ändert, wird das alte Element demontiert und ein neues von Grund auf erstellt.

RepaintBoundary und Element Tree

RepaintBoundary erstellt einen separaten RenderRepaintBoundary im RenderObject Tree, der einen Teil des Baums isoliert. Auf der Ebene des Element Tree erstellt RepaintBoundary kein spezielles Element — es verwendet SingleChildRenderObjectElement. Der Unterschied zeigt sich auf der RenderObject-Ebene: Wenn sich der Inhalt von RepaintBoundary ändert, wird nur der isolierte Bereich neu gezeichnet.

Wie die Tabelle zeigt, reduziert RepaintBoundary die Neuzeichnungszeit erheblich, indem es den sich ändernden Bereich isoliert. Auf der Ebene des Element Tree ist keine zusätzliche Konfiguration erforderlich — einfach das veränderliche Widget in RepaintBoundary einwickeln.