Flotter sous le capot

Widget

Décrit la configuration d'un [élément].

Les widgets sont la hiérarchie centrale des classes dans le framework Flutter. Un widget est une description immuable d'une partie d'une interface utilisateur. Les widgets peuvent être gonflés en éléments, qui gèrent l'arborescence de rendu sous-jacente.

• widget - une description immuable d'une partie de l'interface utilisateur;
• le widget est associé à une vue avancée appelée élément;
• un élément contrôle une entité de l'arbre de rendu.

Les widgets eux-mêmes n'ont pas d'état mutable (tous leurs champs doivent être définitifs).
Si vous souhaitez associer un état mutable à un widget, envisagez d'utiliser un [StatefulWidget], qui crée un objet [State] (via [StatefulWidget.createState]) chaque fois qu'il est gonflé dans un élément et incorporé dans l'arborescence.

Un widget donné peut être inclus dans l'arbre zéro ou plusieurs fois. En particulier, un widget donné peut être placé plusieurs fois dans l'arborescence. Chaque fois qu'un widget est placé dans l'arbre, il est gonflé dans un [Element], ce qui signifie qu'un widget qui est incorporé plusieurs fois dans l'arbre sera gonflé plusieurs fois.

• widget - la classe centrale de la hiérarchie;
• widget est une configuration;
• widget - une description immuable d'une partie de l'interface utilisateur;
• le widget est associé à un élément qui contrôle le rendu d'une manière ou d'une autre;
• l'état changeant du widget peut être décrit par une entité, mais il n'est pas connecté au widget, mais à l'élément qui représente ce widget.

Élément

Une instanciation d'un [Widget] à un emplacement particulier dans l'arborescence.

Les widgets décrivent comment configurer un sous-arbre, mais le même widget peut être utilisé pour configurer plusieurs sous-arbres simultanément car les widgets sont immuables. Un [Element] représente l'utilisation d'un widget pour configurer un emplacement spécifique dans l'arborescence. Au fil du temps, le widget associé à un élément donné peut changer, par exemple, si le widget parent se reconstruit et crée un nouveau widget pour cet emplacement.

• Widget.createElement , .
• mount . .
• .
• , (, ), . runtimeType key, . , , .
• , , , , ( deactivate).
• , . , , (unmount), .
• Lorsque vous ré-incluez des éléments dans l'arborescence, par exemple, si l'élément ou ses ancêtres ont une clé globale, elle sera supprimée de la liste des éléments inactifs, la méthode activate sera appelée et l'objet rendu associé à cet élément sera à nouveau incorporé dans l'arborescence de rendu. Cela signifie que l'élément devrait réapparaître à l'écran.

Renderderbject

Image du monde Flutter

• , .
• , .
• , — , .

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

Conclusion

Ressources