写代码不需要知道底层
而面试需要底层所有原理
都是一样写出能用的代码
也就是远来的和尚会念经啊
一、不会创建 RenderObjectElement(ComponentWidget)
这些 Widget 只负责组合、状态管理或逻辑控制,会创建 StatelessElement 或 StatefulElement。
| Widget | Element |
|---|---|
| StatelessWidget | StatelessElement |
| StatefulWidget | StatefulElement |
| MaterialApp | StatelessElement |
| Scaffold | StatefulElement |
| Builder | StatelessElement |
| FutureBuilder | StatefulElement |
| StreamBuilder | StatefulElement |
| AnimatedBuilder | StatefulElement |
| GestureDetector | StatefulElement |
| Navigator | StatefulElement |
也就是它们不会在RenderObject树上。
二、会创建 RenderObjectElement(RenderObjectWidget)
| Widget | Element | RenderObject |
|---|---|---|
| Text | LeafRenderObjectElement | RenderParagraph |
| RichText | LeafRenderObjectElement | RenderParagraph |
| Image | LeafRenderObjectElement | RenderImage |
| EditableText | LeafRenderObjectElement | RenderEditable |
| Container | SingleChildRenderObjectElement | RenderDecoratedBox(有装饰时) |
| Padding | SingleChildRenderObjectElement | RenderPadding |
| Center | SingleChildRenderObjectElement | RenderPositionedBox |
| Align | SingleChildRenderObjectElement | RenderPositionedBox |
| SizedBox | SingleChildRenderObjectElement | RenderConstrainedBox |
| DecoratedBox | SingleChildRenderObjectElement | RenderDecoratedBox |
| ConstrainedBox | SingleChildRenderObjectElement | RenderConstrainedBox |
| Opacity | SingleChildRenderObjectElement | RenderOpacity |
| Transform | SingleChildRenderObjectElement | RenderTransform |
| ClipRRect | SingleChildRenderObjectElement | RenderClipRRect |
| Row | MultiChildRenderObjectElement | RenderFlex |
| Column | MultiChildRenderObjectElement | RenderFlex |
| Flex | MultiChildRenderObjectElement | RenderFlex |
| Stack | MultiChildRenderObjectElement | RenderStack |
| Wrap | MultiChildRenderObjectElement | RenderWrap |
| ListBody | MultiChildRenderObjectElement | RenderListBody |
它们会在RenderObject树上
嘚不嘚
Widget即配置,并不会对应着一模一样的RenderObject。 少了很多绘制,也是优化了绘制,提高性能。在写Widget的时候,能少用会生成RenderObjectElement的widget,也就是优化代码了。性能提升一点是一点。
DONE