Flattern unter der Haube

Widget

Beschreibt die Konfiguration für ein [Element].

Widgets sind die zentrale Klassenhierarchie im Flutter-Framework. Ein Widget ist eine unveränderliche Beschreibung eines Teils einer Benutzeroberfläche. Widgets können in Elemente aufgeblasen werden, die den zugrunde liegenden Renderbaum verwalten.

• Widget - eine unveränderliche Beschreibung eines Teils der Benutzeroberfläche;
• Das Widget ist einer erweiterten Ansicht zugeordnet, die als Element bezeichnet wird.
• Ein Element steuert eine Entität des Renderbaums.

Widgets selbst haben keinen veränderlichen Status (alle Felder müssen endgültig sein).
Wenn Sie einem Widget einen veränderlichen Status zuordnen möchten, sollten Sie ein [StatefulWidget] verwenden, das ein [State] -Objekt (über [StatefulWidget.createState]) erstellt, wenn es in ein Element aufgeblasen und in den Baum integriert wird.

Ein bestimmtes Widget kann null oder mehrmals in den Baum aufgenommen werden. Insbesondere kann ein bestimmtes Widget mehrmals in den Baum eingefügt werden. Jedes Mal, wenn ein Widget in den Baum eingefügt wird, wird es in ein [Element] aufgeblasen. Dies bedeutet, dass ein Widget, das mehrmals in den Baum integriert wird, mehrmals aufgeblasen wird.

• Widget - die zentrale Klasse der Hierarchie;
• Widget ist eine Konfiguration;
• Widget - eine unveränderliche Beschreibung eines Teils der Benutzeroberfläche;
• Das Widget ist einem Element zugeordnet, das das Rendern auf irgendeine Weise steuert.
• Der sich ändernde Status des Widgets kann von einer Entität beschrieben werden, ist jedoch nicht mit dem Widget verbunden, sondern mit dem Element, das dieses Widget darstellt.

Element

Eine Instanziierung eines [Widgets] an einer bestimmten Stelle im Baum.

Widgets beschreiben, wie ein Teilbaum konfiguriert wird. Mit demselben Widget können jedoch mehrere Teilbäume gleichzeitig konfiguriert werden, da Widgets unveränderlich sind. Ein [Element] repräsentiert die Verwendung eines Widgets zum Konfigurieren eines bestimmten Speicherorts in der Baumstruktur. Im Laufe der Zeit kann sich das einem bestimmten Element zugeordnete Widget ändern, wenn das übergeordnete Widget beispielsweise neu erstellt und ein neues Widget für diesen Speicherort erstellt.

• Widget.createElement , .
• mount . .
• .
• , (, ), . runtimeType key, . , , .
• , , , , ( deactivate).
• , . , , (unmount), .
• Wenn Sie Elemente erneut in den Baum aufnehmen, z. B. wenn das Element oder seine Vorfahren einen globalen Schlüssel haben, wird dieser aus der Liste der inaktiven Elemente entfernt, die Aktivierungsmethode wird aufgerufen und das diesem Element zugeordnete gerenderte Objekt wird erneut in den Renderbaum eingebettet. Dies bedeutet, dass das Element erneut auf dem Bildschirm angezeigt werden soll.

Renderderbject

Flattern Weltbild

• , .
• , .
• , — , .

void mount(Element parent, dynamic newSlot) {
    assert(_debugLifecycleState == _ElementLifecycle.initial);
    assert(widget != null);
    assert(_parent == null);
    assert(parent == null || parent._debugLifecycleState == _ElementLifecycle.active);
    assert(slot == null);
    assert(depth == null);
    assert(!_active);
    _parent = parent;
    _slot = newSlot;
    _depth = _parent != null ? _parent.depth + 1 : 1;
    _active = true;
    if (parent != null)
        _owner = parent.owner;
    if (widget.key is GlobalKey) {
        final GlobalKey key = widget.key;
        key._register(this);
    }
    _updateInheritance();
    assert(() {
        _debugLifecycleState = _ElementLifecycle.active;
        return true;
    }());
}

RenderObject get renderObject {
    RenderObject result;
    void visit(Element element) {
        assert(result == null); 
        if (element is RenderObjectElement)
            result = element.renderObject;
        else
            element.visitChildren(visit);
    }
    visit(this);
    return result;
}

body: Center(
    child: Text(“Hello world!”)
),

static bool canUpdate(Widget oldWidget, Widget newWidget) {
    return oldWidget.runtimeType == newWidget.runtimeType && oldWidget.key == newWidget.key;
}

@override
Widget build(BuildContext context) {
    return Scaffold(
        body: Center(
            child: _isFirst ? first() : second(),
        ),
        floatingActionButton: FloatingActionButton(
            child: Text("Switch"),
            onPressed: () {
                setState(() {
                    _isFirst = !_isFirst;
                });
            },
        ),
    );
}

Widget first() => Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
        Text(
            "test",
            style: TextStyle(fontSize: 25),
        ),
        SizedBox(
            width: 5,
        ),
        Icon(
            Icons.error,
        ),
    ],
);

Widget second() => Row(
    mainAxisAlignment: MainAxisAlignment.center,
    children: <Widget>[
        Text(
            "one more test",
            style: TextStyle(fontSize: 25),
        ),
        Padding(
            padding: EdgeInsets.only(left: 5),
        ),
        Icon(
            Icons.error,
        ),
    ],
);

Widget second() => Container(child: first(),);

var _key = GlobalKey(debugLabel: "testLabel");

Widget first() => Row(
    key: _key,
    …
);

Fazit

Ressourcen