RenderObject Tree: mi ez, a megjelenítés elve és szerepe a Flutterben

Mi az a RenderObject Tree a Flutterben?

RenderObject Tree — a megjelenítési objektumok hierarchikus struktúrája, amely a felület tényleges memóriabeli reprezentációja. Minden RenderObject ismeri a méreteit, a képernyőn elfoglalt helyzetét és képes megrajzolni önmagát. Ellentétben a widgetekkel, amelyek könnyűek és másodpercenként több százszor újjáteremthetők, a RenderObject — egy nehéz objektum közvetlen hozzáféréssel a grafikus csővezetékhez.

A konfigurációtól a megjelenítésig

A widgettől a pixelig vezető út három szakaszon megy keresztül: A Widget Tree leírja, minek kell a képernyőn lennie; Az Element Tree kezeli az életciklust; RenderObject Tree végzi a tényleges munkát. Minden RenderObjectWidget (pl. Padding, Transform, CustomPaint) létrehoz egy RenderObject-ot, amely hozzáadódik a megjelenítési fához. RenderBox — a leggyakoribb RenderObject típus, a szabványos widgetek 99%-ánál használatos.

A RenderObject architektúrája

RenderObject — egy absztrakt osztály, amely meghatározza a layout és paint interfészét. Tartalmaz hivatkozásokat a szülő RenderObject-ra és a gyermek objektumokra, valamint absztrakt metódusokat: performLayout, paint és hitTest. Minden konkrét RenderObject ezeket a metódusokat a saját viselkedése szerint implementálja: a RenderFlex elosztja a teret a gyermek elemek között, a RenderImage megjeleníti a képet, a RenderParagraph megjeleníti a szöveget.

abstract class RenderObject {
  RenderObject? parent;
  Constraints constraints;
  ParentData? parentData;
  bool _needsLayout = true;
  bool _needsPaint = true;

  void performLayout();
  void paint(PaintingContext context, Offset offset);
}

Ebben az egyszerűsített struktúrában a RenderObject _needsLayout és _needsPaint jelzőket tartalmaz, amelyek frissítésre szorulóként jelölik meg az objektumot. Amikor a Widget Tree megváltozik, az Element Tree a megfelelő RenderObject-okat „piszkosként„ jelöli meg layout vagy paint számára, és a következő képkockánál a Flutter csak a szükséges műveleteket hajtja végre.

A RenderObject két fázisa: layout és paint

Minden RenderObject két kulcsfontosságú fázist hajt végre: layout (méretek és pozíciók meghatározása) és paint (rajzolás). Ezek a fázisok szigorú sorrendben hajtódnak végre: először layout a teljes fára, majd paint. A paint fázis kihagyható, ha a layout nem változott, ami GPU-erőforrásokat takarít meg.

Layout fázis: korlátok és méretek

A layout során a Flutter korlátokat (constraints) továbbít felülről lefelé a RenderObject Tree-n keresztül. Minden szülő beállítja a gyermek objektum számára a minimális és maximális szélességet és magasságot. A gyermek objektum kiszámítja a méretét e korlátokon belül, és visszaadja a szülőnek. Ezt a folyamatot „downward pass„-nak (korlátok lefelé továbbítása) és „upward pass„-nak (méretek felfelé továbbítása) nevezik.

• BoxConstraints — a leggyakoribb korláttípus: minWidth, maxWidth, minHeight, maxHeight.
• SliverConstraints — a ScrollView-ban használatos virtualizációhoz: a szabványos korlátokhoz görgetési információ kerül.
• RenderSliverMultiBoxAdaptor — a virtualizált listák layout-ját kezeli, csak a látható elemekhez hoz létre RenderObject-ot.

Paint fázis: megjelenítés a képernyőn

A layout befejezése után a Flutter végrehajtja a paint-et — az egyes RenderObject-ok rajzolását. A szülő létrehoz egy PaintingContext-et, átadja a gyermek objektumoknak és megadja az eltolást (offset). Minden RenderObject megrajzolja magát a Canvas-on grafikus primitívek segítségével: téglalapok, körök, szöveg, képek és transzformációk. A Canvas közvetlenül kommunikál a Skia-val vagy az Impellerrel.

Piszkos csomópontok jelölése

A Flutter a „piszkos„ csomópontok mechanizmusát használja a munka minimalizálására. Ha csak egy RenderObject mérete változik, a Flutter nem számolja újra a teljes fa layout-ját — megjelöli a megváltozott csomópontot és annak lehetséges őseit a legközelebbi rögzített méretű RenderBox-ig. Hasonlóképpen, a megjelenés változásakor csak a paint kerül megjelölésre a layout megismétlése nélkül.

RenderObject típusok a Flutterben

A Flutter kínál több RenderObject kategóriát különböző feladatokhoz: RenderBox a szabványos téglalap alakú elemekhez, RenderSliver a görgethető területekhez és egyéni RenderObject a nem szabványos megjelenítéshez CustomPainter segítségével. Minden típus a saját szerepére van optimalizálva a megjelenítési fában.

RenderBox és altípusai

RenderBox — a téglalap alakú felületelemek alaposztálya. Altípusai: RenderPadding (távolságot ad hozzá), RenderTransform (transzformációkat alkalmaz), RenderFlex (megvalósítja a Row-t és Column-t), RenderStack (elemek egymásra helyezése), RenderImage (képek megjelenítése), RenderParagraph (szöveg megjelenítése). Minden altípus felülírja a performLayout-ot és paint-et a saját logikája szerint.

RenderSliver és virtualizáció

RenderSliver — egy RenderObject típus a görgethető területekkel való munkához. A RenderBox-tól eltérően a Sliver SliverConstraints-t használ, amely a látható területről (viewport) tartalmaz információkat. A RenderSliverList és RenderSliverGrid csak a látható területbe eső elemekhez hoz létre RenderObject-ot, lehetővé téve a millió rekordot tartalmazó listák feldolgozását.

Egyéni RenderObject CustomPainter segítségével

Nem szabványos grafikához használja a CustomPaint-et és CustomPainter-t. A CustomPaint létrehoz egy RenderCustomPaint objektumot, amely meghívja a paint metódusokat a CustomPainter-ben. Ez lehetővé teszi tetszőleges alakzatok, grafikonok és animációk rajzolását teljes Canvas feletti kontrollal. A Flutter Team szerint a CustomPainter hatékonyabb, mint az egymásba ágyazott szabványos widgetek összetett vektorgrafikák esetén.

class CirclePainter extends CustomPainter {
  final Color color;

  CirclePainter({required this.color});

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()..color = color;
    canvas.drawCircle(
      Offset(size.width / 2, size.height / 2),
      size.width / 3,
      paint,
    );
  }

  @override
  bool shouldRepaint(CirclePainter oldDelegate) =>
    oldDelegate.color != color;
}

Ebben a példában a CirclePainter egy kört rajzol a Canvas-ra. A shouldRepaint metódus csak színváltozáskor ad vissza true-t, megakadályozva a szükségtelen újrarajzolást. A CustomPainter-nek a lehető legkönnyebbnek kell lennie — minden nehéz számítást a paint metódusokon kívül végezzen.

Hogyan kapcsolódik a RenderObject Tree az Element Tree-hez

RenderObject Tree az Element Tree-ből jön létre a RenderObjectWidget mechanizmusán keresztül. Minden RenderObjectWidget (Padding, Transform, CustomPaint) létrehoz egy RenderObjectElement-et, amely létrehozza és kezeli a megfelelő RenderObject-ot. Az elem közvetítőként működik: továbbítja a konfigurációt a widgettől a RenderObject-nak és értesíti a RenderObject-ot a változásokról.

RenderObject létrehozása elemből

Amikor a RenderObjectElement csatlakoztatásra kerül, meghívja a widget createRenderObject metódusát. A widget létrehoz egy RenderObject példányt és visszaadja az elemnek. Az elem beágyazza a RenderObject-ot a RenderObject Tree-be a szülő RenderObject insertChildLayout metódusának meghívásával. Ez a folyamat csak az első csatlakoztatáskor történik — a későbbi frissítéseknél az elem egyszerűen frissíti a meglévő RenderObject paramétereit.

Szinkronizálás az updateRenderObject segítségével

Amikor a widget konfigurációja megváltozik (pl. a padding értéke változik), az elem meghívja az updateRenderObject metódust, amely továbbítja az új konfigurációt a meglévő RenderObject-nak. A RenderObject „piszkosként„ jelöli meg magát layout vagy paint számára, és a következő képkockánál a keretrendszer elvégzi a szükséges frissítéseket.

RenderObject eltávolítása

Az elem eltávolításakor az unmount metódus hívódik meg, amely eltávolítja a RenderObject-ot a RenderObject Tree-ből és felszabadítja az erőforrásokat. A RenderObject.remove meghívásra kerül a szülőtől való leválasztáshoz, ezután az objektumot a szemétgyűjtő begyűjtheti. A Flutter garantálja, hogy a RenderObject nem lóg a fában a megfelelő elem nélkül.

RepaintBoundary és a megjelenítés elkülönítése

RepaintBoundary — egy widget, amely külön réteget hoz létre a tartalmának megjelenítéséhez. Amikor a RepaintBoundary tartalma megváltozik, csak ez a réteg rajzolódik újra, a képernyő többi része változatlan marad. A RepaintBoundary különösen hasznos animációkhoz, videólejátszókhoz, interaktív grafikonokhoz és más gyakran frissülő elemekhez.

Hogyan működik a RepaintBoundary

A RepaintBoundary alapjául a RenderRepaintBoundary — egy speciális RenderObject szolgál, amely külön PictureLayer-t hoz létre. Az első megjelenítéskor a RenderRepaintBoundary grafikus parancsokat rögzít ebbe a rétegbe. A későbbi frissítéseknél, ha csak a RepaintBoundary-n belüli tartalom változott, a Flutter csak ezt a réteget rajzolja újra, nem a teljes képernyőt. A többi réteg változatlan marad és újra felhasználásra kerül.

Mikor használjuk a RepaintBoundary-t

Nem minden widgetnek van szüksége RepaintBoundary-ra. Használja, amikor a felület egy része magas frekvenciával (60 FPS és felette) frissül, míg a képernyő többi része statikus. Tipikus példák: animált töltésjelző, videólejátszó, játék Canvas, gyakran újrarajzoló CustomPainter. Statikus szöveghez vagy gombokhoz a RepaintBoundary felesleges és csak növeli a memóriafogyasztást.

A RenderObject Tree optimalizálása a teljesítményért

Teljesítmény a RenderObject Tree csomópontjainak számától, a fa mélységétől és az újrarajzolások gyakoriságától függ. A Flutter DevTools eszközei („Rendering„ fül) lehetővé teszik a RenderObject Tree valós idejű elemzését: repaint-ek száma, layout és paint ideje, rétegek száma és méreteik. A rendszeres elemzés segít a szűk keresztmetszetek azonosításában.

Kerülje a túlzott overdraw-ot

Overdraw — az a helyzet, amikor egy pixelt többször rajzolnak meg képkockánként. Például, amikor egy félig átlátszó widget egy másikra kerül, a GPU mindkét réteget megrajzolja. Használjon opaque jelzőket (Container color-rel decoration helyett) az átlátszatlan elemekhez, hogy a Flutter kihagyja a láthatatlan rétegeket. A Flutter Team szerint az overdraw csökkentése akár 30%-kal is rövidítheti a paint idejét.

Minimalizálja a rétegek számát

Minden RepaintBoundary és néhány widget (Opacity, ClipRRect, Transform) külön réteget (PictureLayer) hoz létre. Túl sok réteg növeli a kompozíciós időt. Használjon csoportosítást: több különálló widgeten lévő Opacity helyett alkalmazzon egy Opacity-t egy konténeren. Ahelyett, hogy minden elemen ClipRRect-et használna, alkalmazzon ClipRRect-et egy közös konténeren.

Használjon const-konstruktorokat

Amikor egy widget const-ként van deklarálva, a Flutter tudja, hogy a konfigurációja nem változik, és újrafelhasználhatja a megfelelő RenderObject-ot újbóli létrehozás nélkül. A const-konstruktorok csökkentik a szemétgyűjtő terhelését és felgyorsítják az első képkockát. Használja a const-ot rögzített paraméterű widgetekhez: ikonok, címsorok, dekoratív elemek.

const Text("Cím", style: TextStyle(fontSize: 24));
const Icon(Icons.home, color: Colors.blue);
const SizedBox.shrink();