Özet - Özel render

RenderBox, performLayout ve paint'i birleştirerek özel widget yaparsın.

Özet - Özel render

Bir özel render widget yapmak için üç parça birleşir: RenderBox'ı extend et, performLayout ile boyut hesapla, paint ile çiz. Bu üçü birlikte Flutter'ın render sistemine özel bir nesne kazandırır.

class ColorBox extends RenderBox {
  @override
  void performLayout() {
    size = constraints.biggest;
  }

  @override
  void paint(PaintingContext context, Offset offset) {
    context.canvas.drawRect(
      offset & size,
      Paint()..color = Colors.green,
    );
  }
}

Uygulama ColorBox tanımla

ColorBox adında bir RenderBox tanımla. performLayout'ta size = constraints.biggest ata. paint'te context.canvas.drawRect(offset & size, Paint()..color = Colors.green) çağır. main'de ColorBox örneği al, runtimeType yazdır.

Örnek çözümü göster

import 'package:flutter/rendering.dart';
import 'package:flutter/material.dart';

class ColorBox extends RenderBox {
  @override
  void performLayout() {
    size = constraints.biggest;
  }

  @override
  void paint(PaintingContext context, Offset offset) {
    context.canvas.drawRect(
      offset & size,
      Paint()..color = Colors.green,
    );
  }
}

void main() {
  final box = ColorBox();
  print(box.runtimeType);
}

Kendini test et

Özel render nesnesi yazmak için hangi üç bileşen birleşir?
- State + setState + build
- Navigator + Route + MaterialPageRoute
- RenderBox + performLayout + paint
- Widget + Element + BuildContext
Cevabı göster

RenderBox + performLayout + paint — Özel render nesnesi RenderBox'ı extend edip performLayout ile boyut hesaplayıp paint ile çizerek yapılır; Widget/Element/BuildContext ağaç kavramlarıdır.

drawRect çağrısı

context.canvas.____(offset & size, paint);

Cevabı göster

context.canvas.drawRect(offset & size, paint);

Özel render özet eşleşmeleri

RenderBox

Özel render nesnesi
performLayout

Layout adımı
paint

Çizim adımı
Canvas

Çizim aracı

Sıradaki ders: Plugin yapısı

Deneyiminizi Geliştiriyoruz

Çerez Tercihleri

Kesinlikle Gerekli Çerezler

Analitik Çerezler