Widget Tree: bu nədir, strukturu və vidjet ağacındakı rolu

Flutter-da Widget Tree nədir?

Widget Tree — Flutter-da istifadəçi interfeysinin deklarativ təsviri, yuvalanmış vidjetlər ağacı şəklində qurulmuşdur. Hər bir vidjet UI-nin bir hissəsini təyin edir: onun konfiqurasiyası, göstərmə parametrləri və qarşılıqlı təsir zamanı davranışı. Tərtibatçı interfeysin tətbiqin cari vəziyyətində necə görünməli olduğunu təsvir edir, Flutter isə bu təsviri ekranda piksellərə çevirməyə cavabdehdir.

Flutter-in deklarativ yanaşması

Tərtibatçının birbaşa interfeys elementlərini idarə etdiyi imperativ freymvorklardan fərqli olaraq, Flutter deklarativ yanaşma istifadə edir. Tətbiqin vəziyyəti dəyişdikdə yeni Widget Tree yaradılır və freymvork köhnə ilə yeni ağac arasındakı fərqi hesablayır. Bu, çəkmə əməliyyatlarının sayını minimuma endirməyə imkan verir və kodu daha proqnozlaşdırıla bilən edir.

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("Salam, Flutter"),
              ElevatedButton(
                onPressed: () {},
                child: Text("Mənə bas"),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Bu nümunədə Widget Tree MaterialApp, Scaffold, AppBar, Center, Column, Text və ElevatedButton-dan ibarətdir. Bu vidjetlərin hər biri ağacın düyünüdür. Tətbiqin vəziyyəti dəyişdikdə, Flutter build metodunu yenidən çağırır və nəticəni əvvəlki ağacla müqayisə edir.

Widget Tree strukturu: kök və uşaq vidjetlər

Widget Tree runApp metoduna ötürülən kök vidjetlə başlayır. Kök vidjet adətən MaterialApp, CupertinoApp və ya WidgetsApp olur — tətbiqin qlobal parametrlərini təyin edir. Kökdən ağac uşaq vidjetlərə budaqlanır, hər biri öz növbəsində öz alt vidjetlərini ehtiva edə bilər.

Tək və çoxuşaqlı vidjetlər

Flutter-də vidjetlər single-child (child parametri ilə bir uşaq qəbul edən) və multi-child (children vasitəsilə uşaq siyahısı qəbul edən) bölünür. Single-child nümunələri: Center, Padding, SizedBox, Container. Multi-child: Column, Row, Stack, ListView, GridView. Bu fərq Widget Tree strukturuna təsir edir: multi-child vidjetlər daha geniş, single-child isə daha dərin ağaclar yaradır.

Ağacda BuildContext-in rolu

BuildContext — vidjetin Widget Tree-dəki yeridir. Hər bir vidjetin öz BuildContext-i var, o build metoduna ötürülür və ana vidjetlərə, temaya, MediaQuery və digər InheritedWidget-lərə giriş üçün istifadə olunur. BuildContext vidjetlə Element Tree-dəki elementi arasında körpüdür.

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(
        "Ekran eni: ${mediaQuery.size.width}"
      ),
    );
  }
}

Bu nümunədə BuildContext tema və ekran ölçülərini əldə etmək üçün istifadə olunur. Flutter Widget Tree-də yuxarı qalxaraq ən yaxın Theme və MediaQuery-ə çatır, onlar InheritedWidget-dir. Bu, kontekstin vidjeti iyerarxiyada yerləşməsi ilə necə əlaqələndirdiyini göstərir.

Flutter Widget Tree-ni işə saldıqda necə qurur?

Flutter tətbiqi işə salındıqda runApp funksiyası çağırılır, o kök vidjeti qəbul edir və Widget Tree-nin qurulmasına başlayır. Proses üç mərhələdən ibarətdir: vidjet konfiqurasiyasının yaradılması, Element Tree-nin formalaşdırılması və faktiki çəkmə üçün RenderObject Tree-nin qurulması.

Mərhələ 1: Kök vidjetin yaradılması

runApp funksiyası WidgetsFlutterBinding vasitəsilə kök elementi yaradır ki, bu da freymvorku qrafik mühərriki ilə əlaqələndirir. Kök vidjet ağaca yerləşdirilir və Flutter uşaq vidjetlərlə doldurmaq üçün build metodunu çağırır. Hər build çağırışı Widget Tree-nin yeni altqrafını yaradır.

Mərhələ 2: İlkin layout

Widget Tree qurulduqdan sonra Flutter ilkin layout yerinə yetirir — bütün vidjetlərin ölçü və mövqelərinin hesablanması. Bu proses kökdən başlayır və ağac boyunca aşağı yayılır. Hər vidjet valideyndən məhdudiyyətlər alır və hesablanmış ölçünü qaytarır. Ölçülər uyğun gəlməzsə, Flutter layout xətası yaradır.

Mərhələ 3: Ekranda çəkmə

Layout tamamlandıqdan sonra Flutter hər vidjetin çəkilməsinə başlayır. RenderObject interfeys təsvirini Skia və ya Impeller vasitəsilə GPU tərəfindən yerinə yetirilən qrafik əmrlərinə çevirir. Bütün proses — Widget Tree-dən piksellərə qədər — hər vəziyyət yenilənməsində saniyədə 120 kadra qədər tezliklə təkrarlanır.

StatelessWidget və StatefulWidget ağac iyerarxiyasında

StatelessWidget — daxili dəyişən vəziyyəti olmayan vidjetdir. Onun görünüşü tamamilə konstruktor vasitəsilə ötürülən giriş parametrləri ilə müəyyən edilir. Parametrlər dəyişməyibsə, StatelessWidget yenidən qurulmur. Bu onu performans baxımından yüngül edir.

StatelessWidget nə vaxt istifadə edilməlidir

StatelessWidget-dən statik elementlər üçün istifadə edin: ikonlar, mətn etiketləri, dekorativ ayırıcılar və daxili məntiqsiz sadə düymələr. Flutter sənədlərinə görə, tipik tətbiqdə vidjetlərin təxminən 70%-i StatelessWidget ola bilər ki, bu da zibil toplayıcının yükünü azaldır və rebuild-i sürətləndirir.

StatefulWidget və vəziyyətin idarə edilməsi

StatefulWidget vidjetin yenidən qurulmaları arasında saxlanılan State obyekti yaradır. Vəziyyət dəyişdikdə (setState çağırışı ilə), Flutter vidjeti “kirli” olaraq qeyd edir və növbəti kadrda onu yenidən qurur. StatefulWidget interaktiv elementləri tətbiq etməyə imkan verir: daxiletmə sahələri, animasiyalar, taymerlər və dinamik siyahılar.

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("Say: $_count"),
        ElevatedButton(
          onPressed: () {
            setState(() => _count++);
          },
          child: Text("Artır"),
        ),
      ],
    );
  }
}

Bu nümunədə StatefulWidget sayğacı dəyişdirmək üçün setState istifadə edir. Vəziyyət yeniləndikdə, Flutter Widget Tree-nin yalnız dəyişmiş hissəsini — CounterWidget vidjetini və onun alt vidjetlərini yenidən qurur. Ana vidjetlər yenidən qurulmur, bu Flutter-in deklarativ modelinin əsas üstünlüyüdür.

Widget Tree Element Tree ilə necə əlaqəlidir

Widget Tree konfiqurasiya qatıdır, Element Tree isə vidjetlərlə faktiki çəkmə arasında ara halqadır. Widget Tree-dəki hər vidjet Element Tree-də vidjetə istinad saxlayan və həyat dövrünü idarə edən bir element yaradır. Bu arxitektura Flutter-ə dəyişiklikləri effektiv şəkildə emal etməyə imkan verir.

Vidjetdən elementin yaradılması

Flutter vidjetlə ilk dəfə qarşılaşdıqda, müvafiq elementi yaradan createElement metodunu çağırır. StatelessWidget üçün StatelessElement, StatefulWidget üçün isə State obyekti də yaradan StatefulElement yaradılır. Element vidjet yenidən yaradılsa belə, rebuild dövrləri arasında saxlanılır.

Element Tree-də Keys mexanizmi

Key — Flutter-ə köhnə və yeni Widget Tree-dən vidjetləri uyğunlaşdırmağa kömək edən identifikatordur. Vidjetin Key-i varsa, Flutter onu ağacdakı mövqe yerinə müvafiq elementi tapmaq üçün istifadə edir. Açarlar elementlərin sırasının dəyişə biləcəyi dinamik siyahılarla işləyərkən zəruridir.

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

Key olmadan Flutter elementləri mövqeyə görə uyğunlaşdırır ki, bu da sıra dəyişdikdə vəziyyətin düzgün saxlanmamasına səbəb ola bilər. Unikal identifikatorlu ValueKey, hər bir elementin siyahıdakı mövqeyindən asılı olmayaraq öz vəziyyətini saxlamasını təmin edir.

Widget Tree-nin performansa təsiri

Widget Tree strukturu Flutter tətbiqinin performansına birbaşa təsir edir. Çox sayda yuvalanmış vidjetli dərin ağaclar layout mərhələsi üçün daha çox vaxt tələb edir və yaddaş istehlakını artırır. Flutter DevTools Widget Tree-ni təhlil etmək və darboğazları müəyyən etmək üçün alətlər təqdim edir.

Həddindən artıq yuvalama

Hər yuvalama səviyyəsi layout və paint üçün əlavə hesablamalar əlavə edir. Zəncirvari dərin yuvalama yerinə daha düz strukturlardan istifadə edin. Məsələn, Expanded ilə Row bir neçə yuvalanmış Container-i Align ilə əvəz edə bilər. Flutter Team məlumatlarına görə, ağacın optimallaşdırılması layout vaxtını 40% azalda bilər.

• Layout — hər valideyn məhdudiyyətləri uşaq vidjetlərə ötürür və ölçüləri geri alır, dərin yuvalamada hesablamalar zənciri yaradır.
• Paint — hər vidjet çəkmə üçün ayrıca təbəqə yarada bilər və həddindən artıq yuvalama təbəqələrin sayını artırır.
• Memory — Element Tree-dəki hər element yaddaş tutur və artıq vidjetlər resurs istehlakını artırır.

Widget Tree təhlili üçün alətlər

Flutter DevTools real vaxtda cari Widget Tree-ni göstərən “Widget Inspector” vidjetini təqdim edir. Tərtibatçı ekranda istənilən vidjeti seçə və onun ağacdakı yerini, parametrlərini və layout məhdudiyyətlərini görə bilər. Bu, gözlənilməz yuvalama, artıq rebuild və ölçü problemlərini müəyyən etməyə kömək edir.

Optimallaşdırma üçün RepaintBoundary

RepaintBoundary — Widget Tree-nin bir hissəsini müstəqil çəkmə üçün təcrid edən vidjetdir. RepaintBoundary-nin məzmunu dəyişərsə, yalnız onun sahəsi yenidən çəkilir, bütün ekran deyil. RepaintBoundary-dən animasiyalar, siyahılar və digər tez-tez yenilənən elementlər üçün istifadə edin.

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

Bu nümunədə RepaintBoundary CustomPaint-i ayrıca çəkmə sahəsinə təcrid edir. Bu sahənin daxilində animasiya yeniləndikdə yalnız CustomPaint vidjeti yenidən çəkilir, qalan ekran dəyişməz qalır. Bu, çoxsaylı animasiya edilmiş elementləri olan mürəkkəb interfeyslərdə xüsusilə faydalıdır.