Aleteo bajo el capó

Widget

Describe la configuración para un [Elemento].

Los widgets son la jerarquía de clase central en el marco de Flutter. Un widget es una descripción inmutable de parte de una interfaz de usuario. Los widgets se pueden inflar en elementos, que administran el árbol de renderizado subyacente.

• widget: una descripción inmutable de una parte de la interfaz de usuario;
• el widget está asociado con alguna vista avanzada llamada elemento;
• un elemento controla alguna entidad del árbol de renderizado.

Los widgets no tienen un estado mutable (todos sus campos deben ser finales).
Si desea asociar el estado mutable con un widget, considere usar un [StatefulWidget], que crea un objeto [State] (a través de [StatefulWidget.createState]) cada vez que se infla en un elemento y se incorpora al árbol.

Un widget determinado se puede incluir en el árbol cero o más veces. En particular, un widget determinado se puede colocar en el árbol varias veces. Cada vez que se coloca un widget en el árbol, se infla en un [Elemento], lo que significa que un widget que se incorpora al árbol varias veces se inflará varias veces.

• widget: la clase central de la jerarquía;
• widget es alguna configuración;
• widget: una descripción inmutable de una parte de la interfaz de usuario;
• el widget está asociado con un elemento que controla la representación de alguna manera;
• alguna entidad puede describir el estado cambiante del widget, pero no está conectado con el widget, sino con el elemento que representa este widget.

Elemento

Una instanciación de un [Widget] en una ubicación particular del árbol.

Los widgets describen cómo configurar un subárbol, pero el mismo widget se puede usar para configurar múltiples subárboles simultáneamente porque los widgets son inmutables. Un [Elemento] representa el uso de un widget para configurar una ubicación específica en el árbol. Con el tiempo, el widget asociado con un elemento dado puede cambiar, por ejemplo, si el widget padre se reconstruye y crea un nuevo widget para esta ubicación.

• Widget.createElement , .
• mount . .
• .
• , (, ), . runtimeType key, . , , .
• , , , , ( deactivate).
• , . , , (unmount), .
• Cuando vuelva a incluir elementos en el árbol, por ejemplo, si el elemento o sus antepasados ​​tienen una clave global, se eliminará de la lista de elementos inactivos, se llamará al método de activación y el objeto renderizado asociado con este elemento volverá a incrustarse en el árbol de representación. Esto significa que el elemento debería aparecer nuevamente en la pantalla.

Objeto de renderizado

Flutter World Picture

• , .
• , .
• , — , .

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,
    …
);

Conclusión

Recursos