引擎盖下飘动

小部件

描述[元素]的配置。

小部件是Flutter框架中的中心类层次结构。小部件是用户界面一部分的不变描述。可以将小部件放大为元素，以管理基础渲染树。

• 小部件-用户界面一部分的不变描述；
• 小部件与称为元素的某些高级视图相关联；
• 元素控制渲染树的某些实体。

窗口小部件本身没有可变状态（它们的所有字段都必须为final）。
如果希望将可变状态与窗口小部件相关联，请考虑使用[StatefulWidget]，该状态会在膨胀为一个元素并合并到树中时创建一个[State]对象（通过[StatefulWidget.createState]）。

给定的小部件可以零次或多次包含在树中。特别地，给定的小部件可以多次放置在树中。每次将小部件放置在树中时，它都会膨胀为[Element]，这意味着多次合并到树中的小部件将被多次膨胀。

• 小部件-层次结构的中心类；
• 小部件是一些配置；
• 小部件-用户界面一部分的不变描述；
• 小部件与以某种方式控制渲染的元素相关联；
• 小部件的更改状态可以由某些实体描述，但它与小部件无关，但与代表此小部件的元素有关。

元件

树中特定位置的[Widget]的实例化。

窗口小部件描述了如何配置子树，但是由于窗口小部件是不可变的，因此可以使用同一窗口小部件同时配置多个子树。[Element]表示使用小部件来配置树中的特定位置。随着时间的流逝，与给定元素关联的窗口小部件可以更改，例如，如果父窗口小部件为该位置重建并创建了一个新窗口小部件。

• Widget.createElement , .
• mount . .
• .
• , (, ), . runtimeType key, . , , .
• , , , , ( deactivate).
• , . , , (unmount), .
• 例如，当您在树中重新包含元素时，如果该元素或其祖先具有全局键，则将从非活动元素列表中将其删除，将调用activate方法，并且与此元素关联的渲染对象将再次嵌入渲染树中。这意味着该项目应再次出现在屏幕上。

渲染对象

颤抖的世界图片

• , .
• , .
• , — , .

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

结论

资源资源