Widget Tree: co to jest, struktura i rola w drzewie widżetów

Co to jest Widget Tree we Flutter?

Widget Tree „ to deklaratywny opis interfejsu użytkownika we Flutter, zbudowany w postaci drzewa zagnieżdżonych widżetów. Każdy widżet określa część UI: jego konfigurację, parametry wyświetlania i zachowanie podczas interakcji. Deweloper opisuje, jak interfejs powinien wyglądać przy bieżącym stanie aplikacji, a Flutter odpowiada za przekształcenie tego opisu w piksele na ekranie.

Podejście deklaratywne Flutter

W przeciwieństwie do frameworków imperatywnych, gdzie deweloper bezpośrednio manipuluje elementami interfejsu, Flutter stosuje podejście deklaratywne. Przy zmianie stanu aplikacji tworzone jest nowe Widget Tree, a framework oblicza różnicę między starym a nowym drzewem. Pozwala to zminimalizować liczbę operacji rysowania i czyni kod bardziej przewidywalnym.

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("Witaj, Flutter"),
              ElevatedButton(
                onPressed: () {},
                child: Text("Naciśnij mnie"),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

W tym przykładzie Widget Tree składa się z MaterialApp, Scaffold, AppBar, Center, Column, Text i ElevatedButton. Każdy z tych widżetów jest węzłem drzewa. Gdy stan aplikacji się zmienia, Flutter ponownie wywołuje metodę build i porównuje wynik z poprzednim drzewem.

Struktura Widget Tree: widżety główne i podrzędne

Widget Tree zaczyna się od widżetu głównego, który jest przekazywany do metody runApp. Widżet główny to zazwyczaj MaterialApp, CupertinoApp lub WidgetsApp „ określa globalne ustawienia aplikacji. Od korzenia drzewo rozgałęzia się na widżety podrzędne, z których każdy może zawierać własnych potomków.

Widżety jedno- i wielodzietne

Widżety we Flutter dzielą się na single-child (przyjmują jednego potomka przez parametr child) i multi-child (przyjmują listę potomków przez children). Przykłady single-child: Center, Padding, SizedBox, Container. Multi-child: Column, Row, Stack, ListView, GridView. Ta różnica wpływa na strukturę Widget Tree: multi-child widżety tworzą szersze, a single-child „ głębsze drzewa.

Rola BuildContext w drzewie

BuildContext „ to lokalizacja widżetu w Widget Tree. Każdy widżet ma swój BuildContext, który jest przekazywany do metody build i używany do dostępu do widżetów nadrzędnych, motywu, MediaQuery i innych InheritedWidget. BuildContext jest mostem między widżetem a jego elementem w 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(
        "Szerokość ekranu: ${mediaQuery.size.width}"
      ),
    );
  }
}

W tym przykładzie BuildContext jest używany do pobrania motywu i rozmiarów ekranu. Flutter przechodzi w górę Widget Tree do najbliższego Theme i MediaQuery, które są InheritedWidget. To pokazuje, jak kontekst łączy widżet z jego położeniem w hierarchii.

Jak Flutter buduje Widget Tree przy uruchomieniu?

Przy uruchomieniu aplikacji Flutter wywoływana jest funkcja runApp, która przyjmuje widżet główny i rozpoczyna budowanie Widget Tree. Proces obejmuje trzy etapy: utworzenie konfiguracji widżetów, utworzenie Element Tree i zbudowanie RenderObject Tree do faktycznego rysowania.

Etap 1: Utworzenie widżetu głównego

Funkcja runApp tworzy element główny przez WidgetsFlutterBinding, który łączy framework z silnikiem graficznym. Widżet główny jest umieszczany w drzewie, a Flutter wywołuje metodę build w celu wypełnienia widżetami podrzędnymi. Każde wywołanie build generuje nowy podgraf Widget Tree.

Etap 2: Wstępny layout

Po zbudowaniu Widget Tree Flutter wykonuje wstępny layout „ obliczenie rozmiarów i pozycji wszystkich widżetów. Proces ten zaczyna się od korzenia i rozchodzi w dół drzewa. Każdy widżet otrzymuje ograniczenia od rodzica i zwraca obliczony rozmiar. Jeśli rozmiary się nie zgadzają, Flutter generuje błąd layoutu.

Etap 3: Rysowanie na ekranie

Po zakończeniu layoutu Flutter przystępuje do rysowania każdego widżetu. RenderObject przekształca opis interfejsu w polecenia graficzne, które są wykonywane przez GPU przez Skia lub Impeller. Cały proces „ od Widget Tree do pikseli „ powtarza się przy każdej aktualizacji stanu z częstotliwością do 120 klatek na sekundę.

StatelessWidget i StatefulWidget w hierarchii drzewa

StatelessWidget „ to widżet, który nie ma wewnętrznego zmiennego stanu. Jego wygląd jest w pełni określony przez parametry wejściowe przekazane przez konstruktor. Jeśli parametry się nie zmieniły, StatelessWidget nie jest przebudowywany. To czyni go lekkim pod względem wydajności.

Kiedy używać StatelessWidget

Używaj StatelessWidget do statycznych elementów interfejsu: ikon, etykiet tekstowych, dekoracyjnych separatorów i prostych przycisków bez wewnętrznej logiki. Według dokumentacji Flutter, około 70% widżetów w typowej aplikacji może być StatelessWidget, co zmniejsza obciążenie garbage collectora i przyspiesza rebuild.

StatefulWidget i zarządzanie stanem

StatefulWidget tworzy obiekt State, który jest zachowywany między przebudowami widżetu. Gdy stan się zmienia (przez wywołanie setState), Flutter oznacza widżet jako „brudny” i przy następnej klatce przebudowuje go. StatefulWidget umożliwia implementację interaktywnych elementów: pól wprowadzania, animacji, timerów i dynamicznych list.

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("Licznik: $_count"),
        ElevatedButton(
          onPressed: () {
            setState(() => _count++);
          },
          child: Text("Zwiększ"),
        ),
      ],
    );
  }
}

W tym przykładzie StatefulWidget używa setState do zmiany licznika. Gdy stan jest aktualizowany, Flutter przebudowuje tylko zmienioną część Widget Tree „ widżet CounterWidget i jego potomków. Widżety nadrzędne nie są przy tym przebudowywane, co jest kluczową zaletą deklaratywnego modelu Flutter.

Jak Widget Tree jest powiązany z Element Tree

Widget Tree jest warstwą konfiguracyjną, a Element Tree jest pośrednim ogniwem między widżetami a faktycznym rysowaniem. Każdy widżet w Widget Tree tworzy element w Element Tree, który przechowuje referencję do widżetu i zarządza cyklem życia. Ta architektura pozwala Flutter efektywnie przetwarzać zmiany.

Tworzenie elementu z widżetu

Gdy Flutter po raz pierwszy napotyka widżet, wywołuje metodę createElement, która tworzy odpowiedni element. Dla StatelessWidget tworzony jest StatelessElement, dla StatefulWidget „ StatefulElement, który również tworzy obiekt State. Element jest zachowywany między cyklami rebuild, nawet jeśli widżet jest odtwarzany.

Mechanizm Keys w Element Tree

Key „ to identyfikator, który pomaga Flutter dopasowywać widżety ze starego i nowego Widget Tree. Jeśli widżet ma Key, Flutter używa go do wyszukania odpowiedniego elementu, a nie pozycji w drzewie. Klucze są niezbędne przy pracy z dynamicznymi listami, gdzie kolejność elementów może się zmieniać.

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

Bez Key Flutter dopasowuje elementy według pozycji, co może prowadzić do nieprawidłowego zachowania stanu przy zmianie kolejności. ValueKey z unikalnym identyfikatorem gwarantuje, że każdy element zachowa swój stan niezależnie od pozycji na liście.

Wpływ Widget Tree na wydajność

Struktura Widget Tree bezpośrednio wpływa na wydajność aplikacji Flutter. Głębokie drzewa z dużą liczbą zagnieżdżonych widżetów wymagają więcej czasu na fazę layoutu i zwiększają zużycie pamięci. Flutter DevTools dostarcza narzędzi do analizy Widget Tree i identyfikacji wąskich gardeł.

Nadmierne zagnieżdżenie

Każdy poziom zagnieżdżenia dodaje dodatkowe obliczenia przy layout i paint. Zamiast głębokiego zagnieżdżenia w chain używaj bardziej płaskich struktur. Na przykład Row z Expanded może zastąpić kilka zagnieżdżonych Containers z Align. Według danych Flutter Team, optymalizacja drzewa może skrócić czas layoutu do 40%.

• Layout „ każdy rodzic przekazuje constraints widżetom podrzędnym i otrzymuje rozmiary z powrotem, co przy głębokim zagnieżdżeniu tworzy łańcuch obliczeń.
• Paint „ każdy widżet może tworzyć osobną warstwę do rysowania, a nadmierne zagnieżdżenie zwiększa liczbę warstw.
• Memory „ każdy element w Element Tree zajmuje pamięć, a nadmiarowe widżety zwiększają zużycie zasobów.

Narzędzia do analizy Widget Tree

Flutter DevTools dostarcza widżet „Widget Inspector”, który pokazuje bieżące Widget Tree w czasie rzeczywistym. Deweloper może wybrać dowolny widżet na ekranie i zobaczyć jego miejsce w drzewie, parametry i ograniczenia layoutu. Pomaga to zidentyfikować nieoczekiwane zagnieżdżenie, nadmiarowe rebuild i problemy z rozmiarami.

RepaintBoundary do optymalizacji

RepaintBoundary „ to widżet, który izoluje część Widget Tree do samodzielnego rysowania. Jeśli zawartość RepaintBoundary się zmienia, przerysowywany jest tylko jego obszar, a nie cały ekran. Używaj RepaintBoundary do animacji, list i innych często aktualizowanych elementów.

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

W tym przykładzie RepaintBoundary izoluje CustomPaint w osobny obszar rysowania. Przy aktualizacji animacji wewnątrz tego obszaru przerysowywany jest tylko widżet CustomPaint, a reszta ekranu pozostaje bez zmian. Jest to szczególnie przydatne w złożonych interfejsach z wieloma animowanymi elementami.