Widget Tree: ce este, structură și rol în arborele de widgeturi

Ce este Widget Tree în Flutter?

Widget Tree „este o descriere declarativă a interfeței de utilizator în Flutter, construită sub forma unui arbore de widgeturi imbricate. Fiecare widget definește o parte a UI: configurația sa, parametrii de afișare și comportamentul la interacțiune. Dezvoltatorul descrie cum ar trebui să arate interfața în starea curentă a aplicației, iar Flutter se ocupă de transformarea acestei descrieri în pixeli pe ecran.

Abordarea declarativă Flutter

Spre deosebire de framework-urile imperative, unde dezvoltatorul manipulează direct elementele interfeței, Flutter folosește o abordare declarativă. La schimbarea stării aplicației, se creează un nou Widget Tree, iar framework-ul calculează diferența dintre arborele vechi și cel nou. Acest lucru minimizează numărul de operații de desenare și face codul mai previzibil.

class MyApp extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    return MaterialApp(
      home: Scaffold(
        appBar: AppBar(title: Text("Widget Tree")),
        body: Center(
          child: Column(
            children: [
              Text("Salut, Flutter"),
              ElevatedButton(
                onPressed: () {},
                child: Text("Apasă-mă"),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

În acest exemplu, Widget Tree este format din MaterialApp, Scaffold, AppBar, Center, Column, Text și ElevatedButton. Fiecare dintre aceste widgeturi este un nod al arborelui. Când starea aplicației se schimbă, Flutter reapelează metoda build și compară rezultatul cu arborele anterior.

Structura Widget Tree: widgeturi rădăcină și copil

Widget Tree începe cu widgetul rădăcină, care este transmis metodei runApp. Widgetul rădăcină este de obicei MaterialApp, CupertinoApp sau WidgetsApp „ stabilește setările globale ale aplicației. De la rădăcină, arborele se ramifică în widgeturi copil, fiecare putând conține proprii descendenți.

Widgeturi cu un singur copil și cu mai mulți copii

Widgeturile în Flutter se împart în single-child (primesc un singur copil prin parametrul child) și multi-child (primesc o listă de copii prin children). Exemple single-child: Center, Padding, SizedBox, Container. Multi-child: Column, Row, Stack, ListView, GridView. Această diferență influențează structura Widget Tree: widgeturile multi-child creează arbori mai largi, iar single-child „ mai adânci.

Rolul BuildContext în arbore

BuildContext „este locația widgetului în Widget Tree. Fiecare widget are propriul BuildContext, care este transmis metodei build și folosit pentru accesarea widgeturilor părinte, temei, MediaQuery și a altor InheritedWidget. BuildContext este puntea dintre widget și elementul său din Element Tree.

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    final theme = Theme.of(context);
    final mediaQuery = MediaQuery.of(context);
    return Container(
      color: theme.colorScheme.primary,
      child: Text(
        "Lățimea ecranului: ${mediaQuery.size.width}"
      ),
    );
  }
}

În acest exemplu, BuildContext este folosit pentru a obține tema și dimensiunile ecranului. Flutter urcă în Widget Tree până la cel mai apropiat Theme și MediaQuery, care sunt InheritedWidget. Aceasta demonstrează cum contextul leagă widgetul de poziția sa în ierarhie.

Cum construiește Flutter Widget Tree la pornire?

La pornirea aplicației Flutter, este apelată funcția runApp, care primește widgetul rădăcină și începe construirea Widget Tree. Procesul include trei etape: crearea configurației widgeturilor, formarea Element Tree și construirea RenderObject Tree pentru desenarea efectivă.

Etapa 1: Crearea widgetului rădăcină

Funcția runApp creează elementul rădăcină prin WidgetsFlutterBinding, care leagă framework-ul de motorul grafic. Widgetul rădăcină este plasat în arbore, iar Flutter apelează metoda build pentru a-l umple cu widgeturi copil. Fiecare apel build generează un subgraf nou al Widget Tree.

Etapa 2: Layout-ul inițial

După construirea Widget Tree, Flutter execută layout-ul inițial „ calcularea dimensiunilor și pozițiilor tuturor widgeturilor. Acest proces începe de la rădăcină și se extinde în jos pe arbore. Fiecare widget primește constrângeri de la părinte și returnează dimensiunea calculată. Dacă dimensiunile nu se potrivesc, Flutter generează o eroare de layout.

Etapa 3: Desenarea pe ecran

După finalizarea layout-ului, Flutter trece la desenarea fiecărui widget. RenderObject transformă descrierea interfeței în comenzi grafice executate de GPU prin Skia sau Impeller. Întregul proces „ de la Widget Tree la pixeli „ se repetă la fiecare actualizare a stării cu o frecvență de până la 120 de cadre pe secundă.

StatelessWidget și StatefulWidget în ierarhia arborelui

StatelessWidget „este un widget care nu are o stare internă modificabilă. Aspectul său este complet determinat de parametrii de intrare transmisi prin constructor. Dacă parametrii nu s-au schimbat, StatelessWidget nu este reconstruit. Acest lucru îl face ușor din punct de vedere al performanței.

Când să folosim StatelessWidget

Folosiți StatelessWidget pentru elemente statice ale interfeței: pictograme, etichete text, separatoare decorative și butoane simple fără logică internă. Conform documentației Flutter, aproximativ 70% dintre widgeturile dintr-o aplicație tipică pot fi StatelessWidget, ceea ce reduce încărcarea colectorului de gunoi și accelerează rebuild-ul.

StatefulWidget și gestionarea stării

StatefulWidget creează un obiect State care este păstrat între reconstruirile widgetului. Când starea se schimbă (prin apelul setState), Flutter marchează widgetul ca „murdar” și la următorul cadru îl reconstruiește. StatefulWidget permite implementarea elementelor interactive: câmpuri de intrare, animații, temporizatoare și liste dinamice.

class CounterWidget extends StatefulWidget {
  @override
  State<CounterWidget> createState() => _CounterWidgetState();
}

class _CounterWidgetState extends State<CounterWidget> {
  int _count = 0;

  @override
  Widget build(BuildContext context) {
    return Column(
      children: [
        Text("Numărare: $_count"),
        ElevatedButton(
          onPressed: () {
            setState(() => _count++);
          },
          child: Text("Incrementează"),
        ),
      ],
    );
  }
}

În acest exemplu, StatefulWidget folosește setState pentru a modifica contorul. Când starea este actualizată, Flutter reconstruiește doar partea modificată a Widget Tree „ widgetul CounterWidget și descendenții săi. Widgeturile părinte nu sunt reconstruite, ceea ce reprezintă un avantaj cheie al modelului declarativ Flutter.

Cum este legat Widget Tree de Element Tree

Widget Tree este stratul de configurare, iar Element Tree este veriga intermediară dintre widgeturi și desenarea efectivă. Fiecare widget din Widget Tree creează un element în Element Tree, care stochează o referință către widget și gestionează ciclul de viață. Această arhitectură permite Flutter să proceseze eficient schimbările.

Crearea elementului dintr-un widget

Când Flutter întâlnește un widget pentru prima dată, apelează metoda createElement, care creează elementul corespunzător. Pentru StatelessWidget se creează un StatelessElement, pentru StatefulWidget „ un StatefulElement care creează și obiectul State. Elementul este păstrat între ciclurile de rebuild, chiar dacă widgetul este recreat.

Mecanismul Keys în Element Tree

Key „este un identificator care ajută Flutter să potrivească widgeturile din Widget Tree vechi și nou. Dacă un widget are Key, Flutter îl folosește pentru a găsi elementul corespunzător, nu poziția în arbore. Cheile sunt necesare la lucrul cu liste dinamice, unde ordinea elementelor se poate schimba.

ListView(
  children: items.map((item) => ListItem(
    key: ValueKey(item.id),
    data: item,
  )).toList(),
)

Fără Key, Flutter potrivește elementele după poziție, ceea ce poate duce la păstrarea incorectă a stării la schimbarea ordinii. ValueKey cu un identificator unic garantează că fiecare element își păstrează starea indiferent de poziția în listă.

Influența Widget Tree asupra performanței

Structura Widget Tree influențează direct performanța aplicației Flutter. Arborii adânci cu un număr mare de widgeturi imbricate necesită mai mult timp pentru faza de layout și cresc consumul de memorie. Flutter DevTools oferă instrumente pentru analiza Widget Tree și identificarea blocajelor.

Imbricarea excesivă

Fiecare nivel de imbricare adaugă calcule suplimentare la layout și paint. În locul imbricării adânci în lanț, folosiți structuri mai plate. De exemplu, Row cu Expanded poate înlocui mai multe Container-uri imbricate cu Align. Conform datelor Flutter Team, optimizarea arborelui poate reduce timpul de layout cu până la 40%.

• Layout „fiecare părinte transmite constrângeri widgeturilor copil și primește dimensiunile înapoi, ceea ce la imbricare adâncă creează un lanț de calcule.
• Paint „fiecare widget poate crea un strat separat pentru desenare, iar imbricarea excesivă crește numărul de straturi.
• Memory „fiecare element din Element Tree ocupă memorie, iar widgeturile suplimentare cresc consumul de resurse.

Instrumente pentru analiza Widget Tree

Flutter DevTools oferă widgetul „Widget Inspector”, care arată Widget Tree curent în timp real. Dezvoltatorul poate selecta orice widget pe ecran și vedea locul său în arbore, parametrii și constrângerile de layout. Acest lucru ajută la identificarea imbricării neașteptate, a rebuild-urilor inutile și a problemelor de dimensiuni.

RepaintBoundary pentru optimizare

RepaintBoundary „este un widget care izolează o parte a Widget Tree pentru desenare independentă. Dacă conținutul RepaintBoundary se schimbă, se redesenează doar zona sa, nu întregul ecran. Folosiți RepaintBoundary pentru animații, liste și alte elemente actualizate frecvent.

RepaintBoundary(
  child: CustomPaint(
    painter: MyPainter(),
    child: SizedBox(
      width: 200,
      height: 200,
    ),
  ),
)

În acest exemplu, RepaintBoundary izolează CustomPaint într-o zonă separată de desenare. La actualizarea animației în interiorul acestei zone, doar widgetul CustomPaint este redesenat, restul ecranului rămânând neschimbat. Acest lucru este util în special în interfețe complexe cu multiple elemente animate.