RenderObject Tree: bu nima, renderlash printsipi va Flutterdagi roli

Flutterda RenderObject Tree nima?

RenderObject Tree — interfeysning xotiradagi haqiqiy ko'rinishi bo'lgan renderlash obyektlarining iyerarxik tuzilmasidir. Har bir RenderObject o'z o'lchamlarini, ekrandagi joylashuvini biladi va o'zini chiza oladi. Sekundiga yuzlab marta qayta yaratilishi mumkin bo'lgan yengil vidjetlardan farqli o'laroq, RenderObject — grafik quvur liniyasiga to'g'ridan-to'g'ri kirish imkoniga ega og'ir obyektdir.

Konfiguratsiyadan renderlashgacha

Vidjetdan piksellargacha bo'lgan yo'l uch bosqichdan o'tadi: Widget Tree ekranda nima bo'lishi kerakligini tavsiflaydi; Element Tree hayotiy tsiklni boshqaradi; RenderObject Tree haqiqiy ishni bajaradi. Har bir RenderObjectWidget (masalan, Padding, Transform, CustomPaint) renderlash daraxtiga qo'shiladigan RenderObject yaratadi. RenderBox — standart vidjetlarning 99% uchun ishlatiladigan eng keng tarqalgan RenderObject turi.

RenderObject arxitekturasi

RenderObject — layout va paint uchun interfeysni belgilaydigan mavhum sinfdir. U ota RenderObject va bola obyektlariga havolalarni, shuningdek mavhum metodlarni o'z ichiga oladi: performLayout, paint va hitTest. Har bir aniq RenderObject bu metodlarni o'z xatti-harakatiga muvofiq amalga oshiradi: RenderFlex bolalar o'rtasida bo'sh joyni taqsimlaydi, RenderImage rasmni ko'rsatadi, RenderParagraph matnni ko'rsatadi.

abstract class RenderObject {
  RenderObject? parent;
  Constraints constraints;
  ParentData? parentData;
  bool _needsLayout = true;
  bool _needsPaint = true;

  void performLayout();
  void paint(PaintingContext context, Offset offset);
}

Ushbu soddalashtirilgan tuzilmada RenderObject _needsLayout va _needsPaint bayroqlarini o'z ichiga oladi, ular obyektni yangilanishni talab qiluvchi sifatida belgilaydi. Widget Tree o'zgarganda, Element Tree tegishli RenderObjectlarni layout yoki paint uchun "iflos" deb belgilaydi va keyingi kadrda Flutter faqat zarur operatsiyalarni bajaradi.

RenderObjectning ikki fazasi: layout va paint

Har bir RenderObject ikkita asosiy fazani bajaradi: layout (o'lcham va joylashuvlarni aniqlash) va paint (chizish). Bu fazalar qat'iy tartibda bajariladi: avval butun daraxt uchun layout, keyin paint. Agar layout o'zgarmagan bo'lsa, paint fazasi o'tkazib yuborilishi mumkin, bu GPU resurslarini tejaydi.

Layout fazasi: cheklovlar va o'lchamlar

Layout davomida Flutter RenderObject Tree bo'ylab yuqoridan pastga cheklovlarni (constraints) uzatadi. Har bir ota bola obyekt uchun minimal va maksimal kenglik va balandlikni belgilaydi. Bola obyekt ushbu cheklovlar doirasida o'z o'lchamini hisoblab, otaga qaytaradi. Bu jarayon "downward pass" (cheklovlarni pastga uzatish) va "upward pass" (o'lchamlarni yuqoriga uzatish) deb ataladi.

• BoxConstraints — eng keng tarqalgan cheklov turi: minWidth, maxWidth, minHeight, maxHeight.
• SliverConstraints — ScrollViewda virtualizatsiya uchun ishlatiladi: standart cheklovlarga aylantirish haqida ma'lumot qo'shiladi.
• RenderSliverMultiBoxAdaptor — faqat ko'rinadigan elementlar uchun RenderObject yaratib, virtualizatsiyalangan ro'yxatlarning layoutini boshqaradi.

Paint fazasi: ekranda ko'rsatish

Layout tugagandan so'ng, Flutter paint — har bir RenderObjectni chizishni bajaradi. Ota PaintingContext yaratadi, uni bola obyektlarga uzatadi va siljishni (offset) belgilaydi. Har bir RenderObject Canvasda grafik primitivlardan foydalanib o'zini chizadi: to'rtburchaklar, doiralar, matn, tasvirlar va transformatsiyalar. Canvas to'g'ridan-to'g'ri Skia yoki Impeller bilan aloqa qiladi.

Iflos tugunlarni belgilash

Flutter ishni minimallashtirish uchun "iflos" tugunlar mexanizmidan foydalanadi. Faqat bitta RenderObjectning o'lchami o'zgarganda, Flutter butun daraxtning layoutini qayta hisoblamaydi — o'zgargan tugunni va uning sobit o'lchamli eng yaqin RenderBoxgacha bo'lgan potentsial ajdodlarini belgilaydi. Xuddi shunday, tashqi ko'rinish o'zgarganda, layoutni takrorlamasdan faqat paint belgilanadi.

Flutterdagi RenderObject turlari

Flutter taqdim etadi turli vazifalar uchun bir nechta RenderObject kategoriyalari: standart to'rtburchak elementlar uchun RenderBox, aylantiriladigan maydonlar uchun RenderSliver va CustomPainter orqali nostandart renderlash uchun moslashtirilgan RenderObject. Har bir tur renderlash daraxtidagi o'z roli uchun optimallashtirilgan.

RenderBox va uning ostturlari

RenderBox — to'rtburchak interfeys elementlari uchun asosiy sinf. Uning ostturlari: RenderPadding (bo'shliqlar qo'shadi), RenderTransform (transformatsiyalarni qo'llaydi), RenderFlex (Row va Columnni amalga oshiradi), RenderStack (elementlarni ustma-ust qo'yish), RenderImage (tasvirlarni ko'rsatish), RenderParagraph (matnni ko'rsatish). Har bir osttur o'z mantig'i uchun performLayout va paintni bekor qiladi.

RenderSliver va virtualizatsiya

RenderSliver — aylantiriladigan maydonlar bilan ishlash uchun RenderObject turi. RenderBoxdan farqli o'laroq, Sliver ko'rinadigan maydon (viewport) haqida ma'lumotni o'z ichiga olgan SliverConstraintsdan foydalanadi. RenderSliverList va RenderSliverGrid faqat ko'rinadigan maydonga tushadigan elementlar uchun RenderObject yaratadi, bu millionlab yozuvlarga ega ro'yxatlarni qayta ishlashga imkon beradi.

CustomPainter orqali moslashtirilgan RenderObject

Nostandart grafika uchun CustomPaint va CustomPainterdan foydalaning. CustomPaint CustomPainterdagi paint metodlarini chaqiradigan RenderCustomPaint yaratadi. Bu Canvas ustidan to'liq nazorat bilan ixtiyoriy shakllar, grafiklar va animatsiyalarni chizishga imkon beradi. Flutter Team ma'lumotlariga ko'ra, CustomPainter murakkab vektor grafikasi uchun ichki joylashtirilgan standart vidjetlardan samaraliroq.

class CirclePainter extends CustomPainter {
  final Color color;

  CirclePainter({required this.color});

  @override
  void paint(Canvas canvas, Size size) {
    final paint = Paint()..color = color;
    canvas.drawCircle(
      Offset(size.width / 2, size.height / 2),
      size.width / 3,
      paint,
    );
  }

  @override
  bool shouldRepaint(CirclePainter oldDelegate) =>
    oldDelegate.color != color;
}

Ushbu misolda CirclePainter Canvasda doira chizadi. shouldRepaint metodi faqat rang o'zgarganda true qaytaradi, bu keraksiz qayta chizishni oldini oladi. CustomPainter imkon qadar yengil bo'lishi kerak — barcha og'ir hisoblashlarni paint metodlaridan tashqarida bajaring.

RenderObject Tree Element Tree bilan qanday bog'liq

RenderObject Tree Element Treedan RenderObjectWidget mexanizmi orqali yaratiladi. Har bir RenderObjectWidget (Padding, Transform, CustomPaint) tegishli RenderObjectni yaratadigan va boshqaradigan RenderObjectElement yaratadi. Element vositachi rolini o'ynaydi: konfiguratsiyani vidjetdan RenderObjectga uzatadi va RenderObjectni o'zgarishlar haqida xabardor qiladi.

Elementdan RenderObject yaratish

RenderObjectElement o'rnatilganda, u o'z vidjetining createRenderObject metodini chaqiradi. Vidjet RenderObject namunasini yaratadi va uni elementga qaytaradi. Element ota RenderObjectning insertChildLayout metodini chaqirib, RenderObjectni RenderObject Treega joylashtiradi. Bu jarayon faqat birinchi o'rnatishda sodir bo'ladi — keyingi yangilanishlarda element oddiygina mavjud RenderObjectning parametrlarini yangilaydi.

updateRenderObject orqali sinxronlash

Vidjet konfiguratsiyasi o'zgarganda (masalan, padding qiymati o'zgaradi), element updateRenderObject metodini chaqiradi, bu mavjud RenderObjectga yangi konfiguratsiyani uzatadi. RenderObject o'zini layout yoki paint uchun "iflos" deb belgilaydi va keyingi kadrda framework zarur yangilanishlarni amalga oshiradi.

RenderObjectni o'chirish

Element demontaj qilinganda, unmount metodi chaqiriladi, bu RenderObjectni RenderObject Treedan olib tashlaydi va resurslarni bo'shatadi. RenderObject.remove otadan ajratish uchun chaqiriladi, shundan so'ng obyekt axlat yig'uvchi tomonidan yig'ilishi mumkin. Flutter RenderObjectning tegishli elementsiz daraxtda qolmasligini kafolatlaydi.

RepaintBoundary va renderlashni ajratish

RepaintBoundary — o'z mazmunini renderlash uchun alohida qatlam yaratadigan vidjetdir. RepaintBoundary mazmuni o'zgarganda, faqat shu qatlam qayta chiziladi, ekranning qolgan qismlari esa o'zgarishsiz qoladi. RepaintBoundary ayniqsa animatsiyalar, video pleerlar, interaktiv grafiklar va boshqa tez-tez yangilanadigan elementlar uchun foydalidir.

RepaintBoundary qanday ishlaydi

RepaintBoundary asosida RenderRepaintBoundary — alohida PictureLayer yaratadigan maxsus RenderObject yotadi. Birinchi renderlashda RenderRepaintBoundary grafik buyruqlarni ushbu qatlamga yozib oladi. Keyingi yangilanishlarda, faqat RepaintBoundary ichidagi mazmun o'zgargan bo'lsa, Flutter butun ekranni emas, faqat shu qatlamni qayta chizadi. Qolgan qatlamlar o'zgarishsiz qoladi va qayta ishlatiladi.

RepaintBoundary qachon ishlatiladi

Har bir vidjet RepaintBoundaryga muhtoj emas. Interfeysning bir qismi yuqori chastota bilan (60 FPS va undan yuqori) yangilanganda, qolgan ekran esa statik bo'lganda foydalaning. Oddiy misollar: animatsiyalangan yuklash indikatori, video pleer, o'yin Canvas, tez-tez qayta chiziladigan CustomPainter. Statik matn yoki tugmalar uchun RepaintBoundary ortiqcha va faqat xotira sarfini oshiradi.

Unumdorlik uchun RenderObject Tree optimallashtirish

Unumdorlik RenderObject Tree tugunlari soni, daraxt chuqurligi va qayta chizish chastotasiga bog'liq. Flutter DevTools vositalari ("Rendering" yorlig'i) RenderObject Treeni real vaqtda tahlil qilish imkonini beradi: repaint soni, layout va paint vaqti, qatlamlar soni va ularning o'lchamlari. Muntazam tahlil tor joylarni aniqlashga yordam beradi.

Haddan tashqari overdrawdan saqlaning

Overdraw — bir piksel kadrda bir necha marta chiziladigan holatdir. Masalan, yarim shaffof vidjet boshqasining ustiga qo'yilganda, GPU ikkala qatlamni chizadi. Shaffof bo'lmagan elementlar uchun opaque bayroqlaridan (decoration o'rniga color bilan Container) foydalaning, shunda Flutter ko'rinmas qatlamlarni o'tkazib yuboradi. Flutter Team ma'lumotlariga ko'ra, overdrwni kamaytirish paint vaqtini 30% gacha qisqartirishi mumkin.

Qatlamlar sonini minimallashtiring

Har bir RepaintBoundary va ba'zi vidjetlar (Opacity, ClipRRect, Transform) alohida qatlam (PictureLayer) yaratadi. Juda ko'p qatlamlar kompozitsiya vaqtini oshiradi. Guruhlashtirishdan foydalaning: alohida vidjetlarda bir nechta Opacity o'rniga konteynerga bitta Opacityni qo'llang. Har bir elementda ClipRRect o'rniga umumiy konteynerda ClipRRect ishlating.

Const-konstruktorlardan foydalaning

Vidjet const sifatida e'lon qilinganda, Flutter uning konfiguratsiyasi o'zgarmasligini biladi va tegishli RenderObjectni qayta yaratmasdan qayta ishlatishi mumkin. Const-konstruktorlar axlat yig'uvchiga yukni kamaytiradi va birinchi kadrni tezlashtiradi. So bit parametrlarga ega vidjetlar uchun const ishlating: piktogrammalar, sarlavhalar, dekorativ elementlar.

const Text("Sarlavha", style: TextStyle(fontSize: 24));
const Icon(Icons.home, color: Colors.blue);
const SizedBox.shrink();