Tremulação sob o capô

Ferramenta

Descreve a configuração para um [elemento].

Widgets são a hierarquia de classe central na estrutura Flutter. Um widget é uma descrição imutável de parte de uma interface do usuário. Os widgets podem ser inflados em elementos, que gerenciam a árvore de renderização subjacente.

• widget - uma descrição imutável de uma parte da interface do usuário;
• o widget está associado a uma visão avançada chamada elemento;
• um elemento controla alguma entidade da árvore de renderização.

Os próprios widgets não têm estado mutável (todos os seus campos devem ser finais).
Se você deseja associar um estado mutável a um widget, considere usar um [StatefulWidget], que cria um objeto [State] (via [StatefulWidget.createState]) sempre que for inflado em um elemento e incorporado à árvore.

Um determinado widget pode ser incluído na árvore zero ou mais vezes. Em particular, um determinado widget pode ser colocado na árvore várias vezes. Cada vez que um widget é colocado na árvore, ele é inflado em um [Elemento], o que significa que um widget que é incorporado à árvore várias vezes será inflado várias vezes.

• widget - a classe central da hierarquia;
• widget é alguma configuração;
• widget - uma descrição imutável de uma parte da interface do usuário;
• o widget está associado a um elemento que controla a renderização de alguma maneira;
• o estado alterado do widget pode ser descrito por alguma entidade, mas não está conectado ao widget, mas ao elemento que representa esse widget.

Elemento

Uma instanciação de um [Widget] em um local específico na árvore.

Os widgets descrevem como configurar uma subárvore, mas o mesmo widget pode ser usado para configurar várias subárvores simultaneamente, porque os widgets são imutáveis. Um [Elemento] representa o uso de um widget para configurar um local específico na árvore. Com o tempo, o widget associado a um determinado elemento pode mudar, por exemplo, se o widget pai for reconstruído e criar um novo widget para esse local.

• Widget.createElement , .
• mount . .
• .
• , (, ), . runtimeType key, . , , .
• , , , , ( deactivate).
• , . , , (unmount), .
• Quando você inclui novamente elementos na árvore, por exemplo, se o elemento ou seus ancestrais tiverem uma chave global, ele será removido da lista de elementos inativos, o método de ativação será chamado e o objeto renderizado associado a esse elemento será incorporado novamente na árvore de renderização. Isso significa que o item deve aparecer na tela novamente.

Renderderbject

Imagem do mundo da vibração

• , .
• , .
• , — , .

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

Conclusão

Recursos