Widget Tree: bu nima, tuzilishi va vidjetlar daraxtidagi roli

Flutter-da Widget Tree nima?

Widget Tree — Flutter-da foydalanuvchi interfeysining deklarativ tavsifi, joylashtirilgan vidjetlar daraxti shaklida qurilgan. Har bir vidjet UI ning bir qismini belgilaydi: uning konfiguratsiyasi, ko'rsatish parametrlari va o'zaro ta'sir paytidagi xatti-harakati. Dasturchi interfeysning dasturning joriy holatida qanday ko'rinishi kerakligini tavsiflaydi, Flutter esa bu tavsifni ekranda piksellarga aylantirish uchun javobgardir.

Flutter-ning deklarativ yondashuvi

Dasturchi interfeys elementlarini bevosita boshqaradigan imperativ freymvorklardan farqli o'laroq, Flutter deklarativ yondashuvdan foydalanadi. Dastur holati o'zgarganda yangi Widget Tree yaratiladi va freymvork eski va yangi daraxt o'rtasidagi farqni hisoblaydi. Bu chizish operatsiyalari sonini minimallashtiradi va kodni oldindan bashorat qilish mumkin bo'ladi.

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("Salom, Flutter"),
              ElevatedButton(
                onPressed: () {},
                child: Text("Meni bos"),
              ),
            ],
          ),
        ),
      ),
    );
  }
}

Ushbu misolda Widget Tree MaterialApp, Scaffold, AppBar, Center, Column, Text va ElevatedButton dan iborat. Bu vidjetlarning har biri daraxtning tugunidir. Dastur holati o'zgarganda, Flutter build metodini qayta chaqiradi va natijani oldingi daraxt bilan solishtiradi.

Widget Tree tuzilishi: ildiz va bola vidjetlar

Widget Tree runApp metodiga uzatiladigan ildiz vidjet bilan boshlanadi. Ildiz vidjet odatda MaterialApp, CupertinoApp yoki WidgetsApp bo'ladi — dasturning global sozlamalarini belgilaydi. Ildizdan daraxt bola vidjetlarga tarmoqlanadi, ularning har biri o'z navbatida o'z avlodlarini o'z ichiga olishi mumkin.

Yagona va ko'p bolali vidjetlar

Flutter-dagi vidjetlar single-child (child parametri orqali bitta bolani qabul qiladi) va multi-child (children orqali bolalar ro'yxatini qabul qiladi) ga bo'linadi. Single-child misollari: Center, Padding, SizedBox, Container. Multi-child: Column, Row, Stack, ListView, GridView. Bu farq Widget Tree tuzilishiga ta'sir qiladi: multi-child vidjetlar kengroq, single-child esa chuqurroq daraxtlar yaratadi.

Daraxtda BuildContext roli

BuildContext — vidjetning Widget Tree-dagi joylashuvi. Har bir vidjet o'z BuildContext-iga ega, u build metodiga uzatiladi va ota vidjetlarga, temaga, MediaQuery va boshqa InheritedWidget-larga kirish uchun ishlatiladi. BuildContext vidjet bilan uning Element Tree-dagi elementi o'rtasidagi ko'prikdir.

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

Ushbu misolda BuildContext tema va ekran o'lchamlarini olish uchun ishlatiladi. Flutter Widget Tree bo'ylab yuqoriga eng yaqin Theme va MediaQuery-ga ko'tariladi, ular InheritedWidget hisoblanadi. Bu kontekst vidjetni ierarxiyadagi joylashuvi bilan qanday bog'lashini ko'rsatadi.

Flutter ishga tushganda Widget Tree-ni qanday quradi?

Flutter dasturi ishga tushirilganda runApp funktsiyasi chaqiriladi, u ildiz vidjetni qabul qiladi va Widget Tree qurishni boshlaydi. Jarayon uch bosqichni o'z ichiga oladi: vidjet konfiguratsiyasini yaratish, Element Tree-ni shakllantirish va haqiqiy chizish uchun RenderObject Tree-ni qurish.

1-bosqich: Ildiz vidjetni yaratish

runApp funktsiyasi WidgetsFlutterBinding orqali ildiz elementni yaratadi, bu freymvorkni grafik dvigatel bilan bog'laydi. Ildiz vidjet daraxtga joylashtiriladi va Flutter bola vidjetlar bilan to'ldirish uchun build metodini chaqiradi. Har bir build chaqiruvi Widget Tree-ning yangi subgrafigini yaratadi.

2-bosqich: Dastlabki layout

Widget Tree qurilgandan so'ng, Flutter dastlabki layout ni amalga oshiradi — barcha vidjetlarning o'lchamlari va pozitsiyalarini hisoblash. Bu jarayon ildizdan boshlanadi va daraxt bo'ylab pastga tarqaladi. Har bir vidjet otadan cheklovlarni oladi va hisoblangan o'lchamni qaytaradi. Agar o'lchamlar mos kelmasa, Flutter layout xatosini yaratadi.

3-bosqich: Ekranda chizish

Layout tugagandan so'ng, Flutter har bir vidjetni chizishga o'tadi. RenderObject interfeys tavsifini Skia yoki Impeller orqali GPU tomonidan bajariladigan grafik buyruqlariga aylantiradi. Butun jarayon — Widget Tree dan piksellargacha — har bir holat yangilanishida sekundiga 120 kadrgacha chastota bilan takrorlanadi.

StatelessWidget va StatefulWidget daraxt ierarxiyasida

StatelessWidget — ichki o'zgaruvchan holatga ega bo'lmagan vidjetdir. Uning ko'rinishi to'liq konstruktor orqali uzatilgan kirish parametrlari bilan belgilanadi. Agar parametrlar o'zgarmagan bo'lsa, StatelessWidget qayta qurilmaydi. Bu uni ishlash nuqtai nazaridan yengil qiladi.

StatelessWidget qachon ishlatiladi

StatelessWidget-dan interfeysning statik elementlari uchun foydalaning: piktogrammalar, matn belgilari, dekorativ ajratgichlar va ichki mantiqsiz oddiy tugmalar. Flutter hujjatlariga ko'ra, odatdagi dasturdagi vidjetlarning taxminan 70% StatelessWidget bo'lishi mumkin, bu axlat yig'uvchi yukini kamaytiradi va rebuild-ni tezlashtiradi.

StatefulWidget va holatni boshqarish

StatefulWidget vidjet qayta qurilishlari o'rtasida saqlanadigan State ob'ektini yaratadi. Holat o'zgarganda (setState chaqiruvi orqali), Flutter vidjetni “iflos” deb belgilaydi va keyingi kadrda uni qayta quradi. StatefulWidget interaktiv elementlarni amalga oshirishga imkon beradi: kiritish maydonlari, animatsiyalar, taymerlar va dinamik ro'yxatlar.

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

Ushbu misolda StatefulWidget hisoblagichni o'zgartirish uchun setState dan foydalanadi. Holat yangilanganda, Flutter Widget Tree-ning faqat o'zgargan qismini — CounterWidget vidjeti va uning avlodlarini qayta quradi. Ota vidjetlar qayta qurilmaydi, bu Flutter deklarativ modelining asosiy afzalligidir.

Widget Tree Element Tree bilan qanday bog'liq

Widget Tree konfiguratsiya qatlami, Element Tree esa vidjetlar va haqiqiy chizish o'rtasidagi oraliq bo'g'indir. Widget Tree-dagi har bir vidjet Element Tree-da vidjetga havolani saqlaydigan va hayot aylanishini boshqaradigan elementni yaratadi. Bu arxitektura Flutter-ga o'zgarishlarni samarali qayta ishlashga imkon beradi.

Vidjetdan element yaratish

Flutter vidjet bilan birinchi marta uchrashganda, tegishli elementni yaratadigan createElement metodini chaqiradi. StatelessWidget uchun StatelessElement, StatefulWidget uchun esa State ob'ektini ham yaratadigan StatefulElement yaratiladi. Element vidjet qayta yaratilgan bo'lsa ham, rebuild siklari o'rtasida saqlanadi.

Element Tree-da Keys mexanizmi

Key — Flutter-ga eski va yangi Widget Tree-dan vidjetlarni moslashtirishga yordam beradigan identifikator. Agar vidjet Key-ga ega bo'lsa, Flutter uni daraxtdagi o'rniga emas, balki tegishli elementni topish uchun ishlatadi. Kalitlar elementlarning tartibi o'zgarishi mumkin bo'lgan dinamik ro'yxatlar bilan ishlashda zarurdir.

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

Key bo'lmasa, Flutter elementlarni pozitsiya bo'yicha moslashtiradi, bu tartib o'zgarganda holatning noto'g'ri saqlanishiga olib kelishi mumkin. Noyob identifikatorli ValueKey har bir elementning ro'yxatdagi pozitsiyasidan qat'i nazar o'z holatini saqlab qolishini kafolatlaydi.

Widget Tree-ning ishlashga ta'siri

Widget Tree tuzilishi Flutter dasturining ishlashiga bevosita ta'sir qiladi. Ko'p sonli joylashtirilgan vidjetli chuqur daraxtlar layout bosqichi uchun ko'proq vaqt talab qiladi va xotira sarfini oshiradi. Flutter DevTools Widget Tree-ni tahlil qilish va tor joylarni aniqlash uchun vositalarni taqdim etadi.

Haddan tashqari joylashtirish

Har bir joylashtirish darajasi layout va paint uchun qo'shimcha hisoblashlarni qo'shadi. Zanjirsimon chuqur joylashtirish o'rniga tekisroq tuzilmalardan foydalaning. Masalan, Expanded bilan Row bir nechta joylashtirilgan Container-ni Align bilan almashtirishi mumkin. Flutter Team ma'lumotlariga ko'ra, daraxtni optimallashtirish layout vaqtini 40% gacha kamaytirishi mumkin.

• Layout — har bir ota bola vidjetlarga cheklovlarni uzatadi va o'lchamlarni qaytarib oladi, chuqur joylashtirishda hisoblash zanjirini yaratadi.
• Paint — har bir vidjet chizish uchun alohida qatlam yaratishi mumkin va haddan tashqari joylashtirish qatlamlar sonini oshiradi.
• Memory — Element Tree-dagi har bir element xotirani egallaydi va ortiqcha vidjetlar resurs sarfini oshiradi.

Widget Tree tahlili uchun vositalar

Flutter DevTools real vaqtda joriy Widget Tree-ni ko'rsatadigan “Widget Inspector” vidjetini taqdim etadi. Dasturchi ekranda istalgan vidjetni tanlashi va uning daraxtdagi o'rnini, parametrlari va layout cheklovlarini ko'rishi mumkin. Bu kutilmagan joylashtirish, ortiqcha rebuild va o'lcham muammolarini aniqlashga yordam beradi.

Optimallashtirish uchun RepaintBoundary

RepaintBoundary — Widget Tree-ning bir qismini mustaqil chizish uchun ajratadigan vidjet. RepaintBoundary tarkibi o'zgarsa, faqat uning maydoni qayta chiziladi, butun ekran emas. RepaintBoundary-dan animatsiyalar, ro'yxatlar va boshqa tez-tez yangilanadigan elementlar uchun foydalaning.

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

Ushbu misolda RepaintBoundary CustomPaint-ni alohida chizish maydoniga ajratadi. Bu maydon ichidagi animatsiya yangilanganda faqat CustomPaint vidjeti qayta chiziladi, qolgan ekran o'zgarishsiz qoladi. Bu ko'plab animatsion elementlarga ega murakkab interfeyslarda ayniqsa foydalidir.