Render tree
- Flutter kursu
- Uzman seviye
- Ders 3/39
- 4 dk
RenderObject ağacının layout ve paint yaptığını öğrenirsin.
Render tree
RenderObject ağacı, layout ve paint işlemlerini yapan ağaçtır. Her Element, ilgili RenderObject'i oluşturur; bu nesne ekran konumunu, boyutunu ve çizimini hesaplar. layout ölçer, paint çizer.
class MyRenderBox extends RenderBox {
@override
void performLayout() {
size = constraints.biggest;
}
@override
void paint(PaintingContext context, Offset offset) {
// çizim
}
}performLayout ve paint
RenderBox'ta performLayout size'ı belirler, paint çizimi yapar. constraints ebeveynden gelen boyut sınırlarıdır. Layout, üstten alta constraints akışı; paint ise alttan üste çizer.
Uygulama RenderBox tanımla
MyRenderBox adında bir RenderBox tanımla. performLayout metodunda size = constraints.biggest ata. paint metodunda context.canvas ile bir daire çiz: merkez offset + Offset(50, 50), yarıçap 20, Paint()..color = Colors.red. main'de MyRenderBox örneği al ve runtimeType yazdır.
Başlangıç kodu
import 'package:flutter/material.dart';
// MyRenderBox sınıfını RenderBox olarak tanımla
// performLayout size'ı constraints biggest ata
// paint metodu canvas ile daire çiz (merkez offset, 20 yarıçap, kırmızı)
// main'de MyRenderBox örneği al ve runtimeType yazdır
void main() {
// MyRenderBox örneği al ve runtimeType yazdır
}Örnek çözüm
import 'package:flutter/material.dart';
class MyRenderBox extends RenderBox {
@override
void performLayout() {
size = constraints.biggest;
}
@override
void paint(PaintingContext context, Offset offset) {
final canvas = context.canvas;
canvas.drawCircle(
offset + const Offset(50, 50),
20,
Paint()..color = Colors.red,
);
}
}
void main() {
final renderBox = MyRenderBox();
print(renderBox.runtimeType);
}Beklenen çıktı
MyRenderBox
Soru ve cevaplar
Dersin sorularını cevaplarıyla birlikte inceleyebilirsin. Kendini denemek istersen dersi interaktif olarak çöz.
1 RenderObject ağacı hangi iki işlemi yapar?
- State ve setState
- Event ve callback
- Layout ve paint Doğru cevap
- HTTP ve JSON
Açıklama: RenderObject ağacı layout ile boyut hesaplar, paint ile ekrana çizer; state veya HTTP ile ilgilenmez.
2 size'ı ata
size = constraints.____;size = constraints.biggest;Açıklama: constraints.biggest, ebeveynden gelen izin verilen en büyük boyutu döner; smallest en küçüğü verir, width ve height ise double değerlerdir.
3 Render tree eşleşmeleri
| Kavram | Anlamı |
|---|---|
RenderObject |
Layout ve paint yapar |
layout |
Boyut hesaplar |
paint |
Çizim yapar |
constraints |
Ebeveynden sınırlar |