Widget Tree: mi ez, szerkezete és szerepe a widgetfában

Mi az a Widget Tree a Flutterben?

Widget Tree „a felhasználói felület deklaratív leírása a Flutterben, amely beágyazott widgetek fájaként épül fel. Minden widget meghatározza a UI egy részét: annak konfigurációját, megjelenítési paramétereit és viselkedését interakció során. A fejlesztő leírja, hogyan kell kinéznie a felületnek az alkalmazás aktuális állapotában, és a Flutter felelős a leírás képpontokká alakításáért a képernyőn.

A Flutter deklaratív megközelítése

Az imperatív keretrendszerekkel ellentétben, ahol a fejlesztő közvetlenül manipulálja a felület elemeit, a Flutter deklaratív megközelítést használ. Az alkalmazás állapotának megváltozásakor egy új Widget Tree jön létre, és a keretrendszer kiszámítja a különbséget a régi és az új fa között. Ez minimalizálja a rajzolási műveletek számát és kiszámíthatóbbá teszi a kódot.

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("Helló, Flutter"),
              ElevatedButton(
                onPressed: () {},
                child: Text("Nyomj meg"),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Ebben a példában a Widget Tree a MaterialApp, Scaffold, AppBar, Center, Column, Text és ElevatedButton elemekből áll. Minden egyes ilyen widget a fa egy csomópontja. Amikor az alkalmazás állapota megváltozik, a Flutter újra meghívja a build metódust, és összehasonlítja az eredményt az előző fával.

A Widget Tree szerkezete: gyökér- és gyermek widgetek

Widget Tree a gyökér widgettel kezdődik, amely a runApp metódusnak kerül átadásra. A gyökér widget általában MaterialApp, CupertinoApp vagy WidgetsApp „ beállítja az alkalmazás globális beállításait. A gyökértől a fa gyermek widgetekre ágazik, amelyek mindegyike tartalmazhat saját leszármazottakat.

Egy- és többgyermekes widgetek

A Flutter widgetek single-child (egy gyermeket fogadnak a child paraméteren keresztül) és multi-child (gyermekek listáját fogadják a children paraméteren keresztül) kategóriákra oszthatók. Single-child példák: Center, Padding, SizedBox, Container. Multi-child: Column, Row, Stack, ListView, GridView. Ez a különbség befolyásolja a Widget Tree szerkezetét: a multi-child widgetek szélesebb, a single-child widgetek mélyebb fákat hoznak létre.

A BuildContext szerepe a fában

BuildContext „a widget helye a Widget Tree-ben. Minden widgetnek saját BuildContext-je van, amely a build metódusnak kerül átadásra, és a szülő widgetek, téma, MediaQuery és más InheritedWidget elérésére szolgál. A BuildContext híd a widget és az Element Tree-ben lévő eleme között.

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(
        "Képernyő szélessége: ${mediaQuery.size.width}"
      ),
    );
  }
}

Ebben a példában a BuildContext a téma és a képernyő méreteinek lekérésére szolgál. A Flutter felfelé halad a Widget Tree-ben a legközelebbi Theme és MediaQuery elemekhez, amelyek InheritedWidget-ek. Ez mutatja, hogy a kontextus hogyan kapcsolja össze a widgetet a hierarchiában elfoglalt helyével.

Hogyan építi fel a Flutter a Widget Tree-t induláskor?

Egy Flutter alkalmazás indításakor a runApp függvény kerül meghívásra, amely fogadja a gyökér widgetet és megkezdi a Widget Tree felépítését. A folyamat három szakaszból áll: a widget konfiguráció létrehozása, az Element Tree kialakítása és a RenderObject Tree felépítése a tényleges rajzoláshoz.

1. szakasz: A gyökér widget létrehozása

A runApp függvény a WidgetsFlutterBinding segítségével hozza létre a gyökér elemet, amely összeköti a keretrendszert a grafikus motorral. A gyökér widget elhelyezésre kerül a fában, és a Flutter meghívja a build metódust a gyermek widgetekkel való feltöltéshez. Minden build hívás létrehozza a Widget Tree egy új algráfját.

2. szakasz: Kezdeti layout

A Widget Tree felépítése után a Flutter végrehajtja a kezdeti layout-ot „ az összes widget méreteinek és pozícióinak kiszámítását. Ez a folyamat a gyökértől indul és lefelé terjed a fában. Minden widget megszorításokat kap a szülőtől, és visszaadja a kiszámított méretet. Ha a méretek nem egyeznek, a Flutter layout hibát generál.

3. szakasz: Rajzolás a képernyőre

A layout befejezése után a Flutter megkezdi az egyes widgetek rajzolását. A RenderObject a felület leírását grafikus parancsokká alakítja, amelyeket a GPU hajt végre a Skia vagy Impeller segítségével. A teljes folyamat „ a Widget Tree-től a képpontokig „ minden állapotfrissítéskor megismétlődik, akár 120 képkocka/másodperc frekvenciával.

StatelessWidget és StatefulWidget a fa hierarchiájában

StatelessWidget „egy olyan widget, amelynek nincs belső változtatható állapota. Megjelenését teljes mértékben a konstruktoron keresztül átadott bemeneti paraméterek határozzák meg. Ha a paraméterek nem változtak, a StatelessWidget nem épül újra. Ez teljesítmény szempontjából könnyűvé teszi.

Mikor használjunk StatelessWidget-et

Használja a StatelessWidget-et a felület statikus elemeihez: ikonok, szöveges címkék, dekoratív elválasztók és egyszerű gombok belső logika nélkül. A Flutter dokumentáció szerint egy tipikus alkalmazás widgetjeinek körülbelül 70%-a lehet StatelessWidget, ami csökkenti a szemétgyűjtő terhelését és felgyorsítja a rebuild-et.

StatefulWidget és állapotkezelés

StatefulWidget létrehoz egy State objektumot, amely megmarad a widget újraépítései között. Amikor az állapot megváltozik (setState hívással), a Flutter “piszkosnak” jelöli a widgetet, és a következő képkockánál újraépíti. A StatefulWidget lehetővé teszi interaktív elemek megvalósítását: beviteli mezők, animációk, időzítők és dinamikus listák.

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("Számláló: $_count"),
        ElevatedButton(
          onPressed: () {
            setState(() => _count++);
          },
          child: Text("Növelés"),
        ),
      ],
    );
  }
}

Ebben a példában a StatefulWidget a setState segítségével változtatja meg a számlálót. Amikor az állapot frissül, a Flutter csak a Widget Tree megváltozott részét építi újra „ a CounterWidget widgetet és leszármazottait. A szülő widgetek nem épülnek újra, ami a Flutter deklaratív modelljének egyik kulcsfontosságú előnye.

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

Widget Tree a konfigurációs réteg, az Element Tree pedig a köztes láncszem a widgetek és a tényleges rajzolás között. A Widget Tree minden widgetje létrehoz egy elemet az Element Tree-ben, amely tárolja a widgetre mutató hivatkozást és kezeli az életciklust. Ez az architektúra lehetővé teszi a Flutter számára a változások hatékony feldolgozását.

Elem létrehozása widgetből

Amikor a Flutter először találkozik egy widgettel, meghívja a createElement metódust, amely létrehozza a megfelelő elemet. StatelessWidget esetén StatelessElement, StatefulWidget esetén StatefulElement jön létre, amely a State objektumot is létrehozza. Az elem megmarad a rebuild ciklusok között, még akkor is, ha a widget újra létrejön.

A Keys mechanizmus az Element Tree-ben

Key „egy azonosító, amely segít a Flutter-nek a régi és új Widget Tree widgetjeinek összepárosításában. Ha egy widget rendelkezik Key-val, a Flutter azt használja a megfelelő elem megtalálásához, nem pedig a fa pozícióját. A kulcsok szükségesek a dinamikus listákkal való munkához, ahol az elemek sorrendje változhat.

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

Key nélkül a Flutter pozíció alapján párosítja az elemeket, ami a sorrend megváltozásakor az állapot helytelen megőrzéséhez vezethet. A ValueKey egyedi azonosítóval garantálja, hogy minden elem megtartsa állapotát, függetlenül a listában elfoglalt pozíciójától.

A Widget Tree hatása a teljesítményre

A Widget Tree szerkezete közvetlenül befolyásolja a Flutter alkalmazás teljesítményét. A mély fák sok beágyazott widgettel több időt igényelnek a layout fázisban és növelik a memóriahasználatot. A Flutter DevTools eszközöket biztosít a Widget Tree elemzéséhez és a szűk keresztmetszetek azonosításához.

Túlzott beágyazás

Minden beágyazási szint további számításokat ad a layout-hoz és a paint-hez. A mély láncolt beágyazás helyett használjon laposabb struktúrákat. Például az Expanded-del ellátott Row helyettesíthet több beágyazott Container-t Align-nel. A Flutter Team adatai szerint a fa optimalizálása akár 40%-kal is csökkentheti a layout idejét.

• Layout „minden szülő megszorításokat ad át a gyermek widgeteknek és visszakapja a méreteket, ami mély beágyazásnál számítási láncot hoz létre.
• Paint „minden widget létrehozhat egy külön réteget a rajzoláshoz, és a túlzott beágyazás növeli a rétegek számát.
• Memory „minden elem az Element Tree-ben memóriát foglal, és a többlet widgetek növelik az erőforrás-felhasználást.

Widget Tree elemző eszközök

Flutter DevTools biztosítja a “Widget Inspector” widgetet, amely valós időben mutatja az aktuális Widget Tree-t. A fejlesztő kiválaszthat bármely widgetet a képernyőn, és láthatja annak helyét a fában, paramétereit és layout megszorításait. Ez segít azonosítani a váratlan beágyazást, a szükségtelen rebuild-eket és a méretbeli problémákat.

RepaintBoundary az optimalizáláshoz

RepaintBoundary „egy widget, amely elkülöníti a Widget Tree egy részét az önálló rajzoláshoz. Ha a RepaintBoundary tartalma megváltozik, csak a területe rajzolódik újra, nem a teljes képernyő. Használja a RepaintBoundary-t animációkhoz, listákhoz és más gyakran frissülő elemekhez.

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

Ebben a példában a RepaintBoundary elkülöníti a CustomPaint-et egy külön rajzolási területre. Az animáció frissítésekor ezen a területen belül csak a CustomPaint widget rajzolódik újra, a képernyő többi része változatlan marad. Ez különösen hasznos összetett felületeken, több animált elemmel.