كيف تتحول شجرة الرسوم إلى شجرة طبقات (Layer Tree) وكيف يتم إرسالها إلى الـ Rasterizer؟

الإجابة المختصرة

تقوم الـ RenderObjects بتسجيل أوامر الرسم في طبقات هندسية (ContainerLayer, PictureLayer)، ثم يقوم الـ SceneBuilder بدمجها في Scene موحد يُرسل عبر RenderView إلى خيط الـ Rasterizer لمعالجته على الـ GPU.

الشرح

لا يتم رسم الـ RenderObjects مباشرة على الشاشة، بل تودع مخرجاتها في شجرة طبقات (Layer Tree). تحتوي هذه الشجرة على PictureLayers التي تسجل أوامر الرسم كـ Display List، وطبقات ContainerLayer للقص (ClipLayer) والتعتيم (OpacityLayer) والتحويل الهندسي (TransformLayer). في نهاية مرحلة الرسم، تستدعي RenderView دالة compositeFrame() التي تستخدم SceneBuilder لتجميع هذه الطبقات في كائن Scene واحد. يُسلّم هذا المشهد لمحرك الرسم في خيط الـ Rasterizer حيث يقوم الـ GPU بتلوين البيكسلات وعرضها على الشاشة.

مثال بالكود

import 'dart:ui' as ui;
import 'package:flutter/rendering.dart';

// What RenderView does after paint (simplified): flatten the layer tree into a Scene
ui.Scene buildScene(ContainerLayer rootLayer) {
  final builder = ui.SceneBuilder();
  rootLayer.addToScene(builder);   // PictureLayer, OpacityLayer, TransformLayer… append themselves
  return builder.build();          // the engine then hands the Scene to the rasterizer
}

// RepaintBoundary gives a subtree its own layer, so it can be repainted/cached independently
class Cached extends StatelessWidget {
  const Cached({super.key, required this.child});
  final Widget child;

  @override
  Widget build(BuildContext context) => RepaintBoundary(child: child);
}

أخطاء شائعة

• الخلط بين خيط واجهة المستخدم (UI Thread) الذي ينفذ كود Dart وينشئ الـ Layer Tree، وخيط التصيير (Raster Thread) الذي يوجه الأوامر للـ GPU.

أسئلة متابعة

• لماذا طورت Google محرك الرسم الجديد Impeller كبديل لـ Skia في Flutter وما هي مشكلة الـ Shader Compilation Jank؟

المصادر

• Flutter architectural overview - The engine