๐ณ Widget, Element & Render Trees
Flutter quแบฃn lรฝ UI thรดng qua ba loแบกi tree hoแบกt ฤแปng song song. Hiแปu rรต chรบng giรบp bแบกn viแบฟt code hiแปu quแบฃ vร debug dแป dร ng hฦกn.
1. Tแปng quan ba Trees
Phแบงn tiรชu ฤแป โ1. Tแปng quan ba Treesโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ Flutter's Three Trees โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโคโ โโ WIDGET TREE ELEMENT TREE RENDER TREE โโ (Configuration) (Lifecycle) (Layout & Paint) โโ โโ โโโโโโโโโโโ โโโโโโโโโโโ โโโโโโโโโโโ โโ โ Widget โ creates โ Element โ creates โ Render โ โโ โ A โ โโโโโโโโถ โ A โ โโโโโโโโถ โ Object โ โโ โโโโโโฌโโโโโ โโโโโโฌโโโโโ โโโโโโฌโโโโโ โโ โ โ โ โโ โโโโโโดโโโโโ โโโโโโดโโโโโ โโโโโโดโโโโโ โโ โ Widget โ โ Element โ โ Render โ โโ โ B โ โ B โ โ Object โ โโ โโโโโโโโโโโ โโโโโโโโโโโ โโโโโโโโโโโ โโ โโ Immutable Mutable Handles โโ Lightweight Long-lived Painting โโ Cheap to create Expensive Layout โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ2. Widget Tree - Bแบฃn thiแบฟt kแบฟ
Phแบงn tiรชu ฤแป โ2. Widget Tree - Bแบฃn thiแบฟt kแบฟโWidget lร immutable configuration - mรด tแบฃ UI trรดng nhฦฐ thแบฟ nร o.
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ Widget Tree โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโคโ โโ MaterialApp โโ โ โโ Scaffold โโ โ โโ โโโโโโโโโโโโผโโโโโโโโโโโ โโ โ โ โ โโ AppBar Body FAB โโ โ โ โโ Text Column โโ โ โโ โโโโโโโโดโโโโโโโ โโ โ โ โโ Text Container โโ โ โโ Text โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโคโ ฤแบทc ฤiแปm: โโ โข Immutable (bแบฅt biแบฟn) โโ โข Lightweight (nhแบน) โโ โข ฤฦฐแปฃc tแบกo mแปi mแปi khi rebuild โโ โข Mรด tแบฃ "WHAT" khรดng phแบฃi "HOW" โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโWidget chแป lร configuration
Phแบงn tiรชu ฤแป โWidget chแป lร configurationโ// Widget KHรNG phแบฃi UI thแบญt// Widget chแป lร "cรดng thแปฉc" ฤแป tแบกo UIContainer( width: 100, // Chแป lร config height: 100, // Chแป lร config color: Colors.red // Chแป lร config)3. Element Tree - Ngฦฐแปi quแบฃn lรฝ
Phแบงn tiรชu ฤแป โ3. Element Tree - Ngฦฐแปi quแบฃn lรฝโElement lร cแบงu nแปi giแปฏa Widget vร RenderObject. Element:
- Giแปฏ vแป trรญ trong tree
- Quแบฃn lรฝ lifecycle
- Quyแบฟt ฤแปnh rebuild hay reuse
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ Element Tree โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโคโ โโ Widget (new) Element (persistent) โโ โ โ โโ โผ โผ โโ โโโโโโโโโโโ โโโโโโโโโโโ โโ โContainerโโโcreatesโโโถโ Element โ โโ โ w=100 โ โ(giแปฏ ref โ โโ โโโโโโโโโโโ โto Widgetโ โโ โ โ& Render)โ โโ โ โโโโโโโโโโโ โโ โ rebuild โ โโ โผ โผ โโ โโโโโโโโโโโ โโโโโโโโโโโ โโ โContainerโโโupdatesโโโถโ Element โ (REUSED!) โโ โ w=200 โ โ(cแบญp nhแบญtโ โโ โโโโโโโโโโโ โ config) โ โโ โโโโโโโโโโโ โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโคโ ฤแบทc ฤiแปm: โโ โข Mutable (cรณ thแป thay ฤแปi) โโ โข Long-lived (tแปn tแบกi lรขu) โโ โข Giแปฏ reference ฤแบฟn Widget vร RenderObject โโ โข Quyแบฟt ฤแปnh update hay recreate RenderObject โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโElement Types
Phแบงn tiรชu ฤแป โElement Typesโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ Element Types โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโคโ โโ ComponentElement โโ โโโ Cho StatelessWidget, StatefulWidget โโ โโโ Khรดng cรณ RenderObject riรชng โโ โโโ แปฆy quyแปn cho children โโ โโ RenderObjectElement โโ โโโ Cho RenderObjectWidget โโ โโโ Cรณ RenderObject riรชng โโ โโโ Container, Row, Column, etc. โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ4. Render Tree - Ngฦฐแปi vแบฝ
Phแบงn tiรชu ฤแป โ4. Render Tree - Ngฦฐแปi vแบฝโRenderObject thแปฑc hiแปn layout vร painting thแปฑc sแปฑ.
โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ Render Tree โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโคโ โโ RenderView (root) โโ โ โโ RenderPositionedBox โโ โ โโ RenderDecoratedBox โโ โ โโ RenderPadding โโ โ โโ RenderFlex (Column) โโ โ โโ โโโโโโโโโโโดโโโโโโโโโโ โโ โ โ โโ RenderParagraph RenderConstrainedBox โโ (Text widget) (Container) โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโคโ ฤแบทc ฤiแปm: โโ โข Thแปฑc hiแปn LAYOUT (tรญnh toรกn size, position) โโ โข Thแปฑc hiแปn PAINT (vแบฝ pixels lรชn canvas) โโ โข Expensive (tแปn tร i nguyรชn) โโ โข ฤฦฐแปฃc reuse cร ng nhiแปu cร ng tแปt โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโLayout Protocol: Constraints & Sizes
Phแบงn tiรชu ฤแป โLayout Protocol: Constraints & Sizesโ CONSTRAINTS GO DOWN โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ Parent: "Con cรณ thแป rแปng 0-300, cao 0-โ" โโ โ โโ โผ โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โโ โ Child โ โโ โ "OK, tรดi sแบฝ rแปng 200, cao 100" โ โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โโ โ โโ โผ โโ Parent nhแบญn size vร ฤแบทt position โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โ SIZES GO UP5. Luแปng hoแบกt ฤแปng khi Rebuild
Phแบงn tiรชu ฤแป โ5. Luแปng hoแบกt ฤแปng khi Rebuildโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ Rebuild Process โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโคโ โโ 1. setState() called โโ โ โโ โผ โโ 2. Widget ฤฦฐแปฃc tแบกo MแปI (immutable) โโ โ โโ โผ โโ 3. Element so sรกnh old Widget vs new Widget โโ โ โโ โโโโโโดโโโโโ โโ โ โ โโ SAME DIFFERENT โโ TYPE? TYPE? โโ โ โ โโ โผ โผ โโ UPDATE CREATE โโ existing new Element โโ Element & RenderObject โโ โ โโ โผ โโ 4. RenderObject ฤฦฐแปฃc update (nแบฟu cแบงn) โโ โ โโ โผ โโ 5. Layout phase (nแบฟu constraints thay ฤแปi) โโ โ โโ โผ โโ 6. Paint phase (nแบฟu visual thay ฤแปi) โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ6. Tแบกi sao thiแบฟt kแบฟ nร y hiแปu quแบฃ?
Phแบงn tiรชu ฤแป โ6. Tแบกi sao thiแบฟt kแบฟ nร y hiแปu quแบฃ?โWidget nhแบน, tแบกo nhanh
Phแบงn tiรชu ฤแป โWidget nhแบน, tแบกo nhanhโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ Widget = Configuration โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโคโ โโ class Text { โโ final String data; // Nhแบน โโ final TextStyle? style; // Nhแบน โโ } โโ โโ โ Tแบกo hร ng ngร n widgets = OK โโ โ Tแบกo mแปi mแปi frame = OK โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโElement & RenderObject ฤฦฐแปฃc tรกi sแปญ dแปฅng
Phแบงn tiรชu ฤแป โElement & RenderObject ฤฦฐแปฃc tรกi sแปญ dแปฅngโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ Element = Persistent โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโคโ โโ Frame 1: Widget A(color: red) โโ โ โโ โผ โโ Element A โโโ RenderObject A โโ โโ Frame 2: Widget A(color: blue) โโ โ โโ โผ โโ Element A โโโ RenderObject A โโ (REUSED!) (UPDATED!) โโ โโ โ Khรดng cแบงn tแบกo lแบกi tแปซ ฤแบงu โโ โ Chแป update thuแปc tรญnh thay ฤแปi โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ7. ฤiแปu kiแปn ฤแป Element ฤฦฐแปฃc tรกi sแปญ dแปฅng
Phแบงn tiรชu ฤแป โ7. ฤiแปu kiแปn ฤแป Element ฤฦฐแปฃc tรกi sแปญ dแปฅngโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ Element Reuse Conditions โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโคโ โโ Element Cลจ cรณ thแป reuse NแบพU: โโ โโ 1. widget.runtimeType == old.runtimeType โโ โ Cรนng loแบกi widget โโ โโ 2. widget.key == old.key โโ โ Cรนng key (hoแบทc cแบฃ hai ฤแปu null) โโ โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โโ โ Container(color: red) โ Container(color: blue) โ โโ โ โ โโ โ Same type? โ โ โโ โ Same key? โ (both null) โ โโ โ Result: REUSE Element, UPDATE RenderObject โ โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โโ โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โโ โ Container(color: red) โ Text('Hello') โ โโ โ โ โโ โ Same type? โ โ โโ โ Result: CREATE new Element & RenderObject โ โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ8. Debug vแปi Flutter DevTools
Phแบงn tiรชu ฤแป โ8. Debug vแปi Flutter DevToolsโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ Flutter DevTools โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโคโ โโ Widget Inspector: โโ โโโ Xem Widget Tree โโ โโโ Highlight repaints โโ โโโ Show guidelines โโ โโ Performance View: โโ โโโ Frame timing โโ โโโ Build/Layout/Paint phases โโ โโโ Identify expensive rebuilds โโ โโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโโ๐ Tรณm tแบฏt
Phแบงn tiรชu ฤแป โ๐ Tรณm tแบฏtโ| Tree | Vai trรฒ | ฤแบทc ฤiแปm |
|---|---|---|
| Widget | Configuration | Immutable, lightweight, cheap |
| Element | Lifecycle manager | Mutable, persistent, bridges WโR |
| Render | Layout & Paint | Expensive, reused aggressively |
Quy tแบฏc vร ng:
Widget ฤฦฐแปฃc tแบกo mแปi liรชn tแปฅc โ Element quyแบฟt ฤแปnh cรณ reuse RenderObject hay khรดng โ RenderObject thแปฑc hiแปn cรดng viแปc nแบทng.
Hแป quแบฃ cho developer:
- ฤแปซng sแปฃ tแบกo nhiแปu widgets - chรบng rแบฅt nhแบน
- Dรนng
constwidgets khi cรณ thแป - Hiแปu khi nร o cแบงn Key ฤแป Element matching ฤรบng