RenderObject Tree: nó là gì, nguyên tắc kết xuất và vai trò trong Flutter

RenderObject Tree trong Flutter là gì?

RenderObject Tree là một cấu trúc phân cấp các đối tượng kết xuất đóng vai trò là biểu diễn thực tế của giao diện trong bộ nhớ. Mỗi RenderObject biết kích thước, vị trí trên màn hình và cách tự vẽ. Không giống widget, vốn nhẹ và có thể được tái tạo hàng trăm lần mỗi giây, RenderObject là một đối tượng nặng với quyền truy cập trực tiếp vào đường ống đồ họa.

Từ cấu hình đến kết xuất

Đường đi từ widget đến pixel trải qua ba giai đoạn: Widget Tree mô tả những gì sẽ hiển thị trên màn hình; Element Tree quản lý vòng đời; RenderObject Tree thực hiện công việc thực tế. Mỗi RenderObjectWidget (như Padding, Transform, CustomPaint) tạo một RenderObject được thêm vào cây kết xuất. RenderBox là loại RenderObject phổ biến nhất, được sử dụng trong 99% widget tiêu chuẩn.

Kiến trúc RenderObject

RenderObject là một lớp trừu tượng xác định giao diện cho layout và paint. Nó chứa tham chiếu đến RenderObject cha và các đối tượng con, cũng như các phương thức trừu tượng: performLayout, paint và hitTest. Mỗi RenderObject cụ thể triển khai các phương thức này theo hành vi của nó: RenderFlex phân phối không gian giữa các con, RenderImage hiển thị hình ảnh, RenderParagraph kết xuất văn bản.

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

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

Trong cấu trúc đơn giản này, RenderObject chứa các cờ _needsLayout và _needsPaint, đánh dấu đối tượng cần cập nhật. Khi Widget Tree thay đổi, Element Tree đánh dấu các RenderObject tương ứng là "bẩn" cho layout hoặc paint, và ở khung hình tiếp theo, Flutter chỉ thực hiện các thao tác cần thiết.

Hai giai đoạn của RenderObject: layout và paint

Mỗi RenderObject thực hiện hai giai đoạn chính: layout (xác định kích thước và vị trí) và paint (vẽ). Các giai đoạn này được thực hiện theo thứ tự nghiêm ngặt: đầu tiên layout cho toàn bộ cây, sau đó paint. Giai đoạn paint có thể được bỏ qua nếu layout không thay đổi, tiết kiệm tài nguyên GPU.

Giai đoạn layout: ràng buộc và kích thước

Trong quá trình layout, Flutter truyền ràng buộc (constraints) từ trên xuống dưới qua RenderObject Tree. Mỗi phần tử cha đặt chiều rộng và chiều cao tối thiểu và tối đa cho phần tử con. Phần tử con tính kích thước của nó trong các ràng buộc này và trả về cho phần tử cha. Quá trình này được gọi là "downward pass" (truyền ràng buộc xuống) và "upward pass" (truyền kích thước lên).

• BoxConstraints là loại ràng buộc phổ biến nhất: minWidth, maxWidth, minHeight, maxHeight.
• SliverConstraints được sử dụng trong ScrollView để ảo hóa: nó thêm thông tin cuộn vào các ràng buộc tiêu chuẩn.
• RenderSliverMultiBoxAdaptor quản lý layout của danh sách ảo hóa, chỉ tạo RenderObject cho các mục hiển thị.

Giai đoạn paint: hiển thị trên màn hình

Sau khi layout hoàn thành, Flutter thực hiện paint — vẽ từng RenderObject. Phần tử cha tạo PaintingContext, truyền nó cho các đối tượng con và chỉ định độ dịch chuyển (offset). Mỗi RenderObject tự vẽ trên Canvas bằng các nguyên thủy đồ họa: hình chữ nhật, hình tròn, văn bản, hình ảnh và phép biến đổi. Canvas tương tác trực tiếp với Skia hoặc Impeller.

Đánh dấu nút bẩn

Flutter sử dụng cơ chế nút "bẩn" để giảm thiểu công việc. Khi chỉ kích thước của một RenderObject thay đổi, Flutter không tính toán lại layout của toàn bộ cây — nó đánh dấu nút đã thay đổi và các tổ tiên có thể của nó cho đến RenderBox gần nhất với kích thước cố định. Tương tự, khi giao diện thay đổi, chỉ paint được đánh dấu mà không cần làm lại layout.

Các loại RenderObject trong Flutter

Flutter cung cấp một số loại RenderObject cho các tác vụ khác nhau: RenderBox cho các phần tử hình chữ nhật tiêu chuẩn, RenderSliver cho các vùng có thể cuộn và RenderObject tùy chỉnh cho kết xuất không tiêu chuẩn qua CustomPainter. Mỗi loại được tối ưu hóa cho vai trò của nó trong cây kết xuất.

RenderBox và các loại con

RenderBox là lớp cơ sở cho các phần tử giao diện hình chữ nhật. Các loại con của nó bao gồm: RenderPadding (thêm đệm), RenderTransform (áp dụng phép biến đổi), RenderFlex (triển khai Row và Column), RenderStack (xếp chồng phần tử), RenderImage (hiển thị hình ảnh), RenderParagraph (kết xuất văn bản). Mỗi loại con ghi đè performLayout và paint cho logic riêng của nó.

RenderSliver và ảo hóa

RenderSliver là một loại RenderObject để làm việc với các vùng có thể cuộn. Không giống RenderBox, Sliver sử dụng SliverConstraints, bao gồm thông tin về khung nhìn (viewport). RenderSliverList và RenderSliverGrid chỉ tạo RenderObject cho các mục trong vùng hiển thị, cho phép xử lý danh sách với hàng triệu mục.

RenderObject tùy chỉnh qua CustomPainter

Đối với đồ họa không tiêu chuẩn, hãy sử dụng CustomPaint và CustomPainter. CustomPaint tạo RenderCustomPaint, gọi các phương thức paint của CustomPainter. Điều này cho phép vẽ các hình dạng, biểu đồ và hoạt ảnh tùy ý với toàn quyền kiểm soát Canvas. Theo nhóm Flutter, CustomPainter hiệu quả hơn các widget tiêu chuẩn lồng nhau cho đồ họa vector phức tạp.

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;
}

Trong ví dụ này, CirclePainter vẽ một hình tròn trên Canvas. Phương thức shouldRepaint chỉ trả về true khi màu sắc thay đổi, ngăn chặn việc vẽ lại không cần thiết. CustomPainter nên nhẹ nhàng nhất có thể — thực hiện tất cả các tính toán nặng bên ngoài phương thức paint.

RenderObject Tree liên kết với Element Tree như thế nào

RenderObject Tree được tạo từ Element Tree thông qua cơ chế RenderObjectWidget. Mỗi RenderObjectWidget (Padding, Transform, CustomPaint) tạo một RenderObjectElement, đến lượt nó tạo và quản lý RenderObject tương ứng. Phần tử đóng vai trò trung gian: nó truyền cấu hình từ widget đến RenderObject và thông báo cho RenderObject về các thay đổi.

Tạo RenderObject từ một phần tử

Khi một RenderObjectElement được gắn kết, nó gọi phương thức createRenderObject trên widget của nó. Widget tạo một thể hiện RenderObject và trả về cho phần tử. Phần tử chèn RenderObject vào RenderObject Tree bằng cách gọi phương thức insertChildLayout trên RenderObject cha. Quá trình này chỉ xảy ra ở lần gắn kết đầu tiên — trong các lần cập nhật sau, phần tử chỉ cập nhật các tham số của RenderObject hiện có.

Đồng bộ qua updateRenderObject

Khi cấu hình của widget thay đổi (ví dụ, giá trị padding thay đổi), phần tử gọi phương thức updateRenderObject, truyền cấu hình mới cho RenderObject hiện có. RenderObject tự đánh dấu là "bẩn" cho layout hoặc paint, và ở khung hình tiếp theo, framework thực hiện các cập nhật cần thiết.

Xóa RenderObject

Khi một phần tử bị tháo gỡ, phương thức unmount được gọi, xóa RenderObject khỏi RenderObject Tree và giải phóng tài nguyên. RenderObject.remove được gọi để ngắt kết nối khỏi phần tử cha, sau đó đối tượng có thể được thu gom rác. Flutter đảm bảo không có RenderObject nào bị treo trong cây mà không có phần tử tương ứng.

RepaintBoundary và cô lập kết xuất

RepaintBoundary là một widget tạo một lớp riêng để kết xuất nội dung của nó. Khi nội dung bên trong RepaintBoundary thay đổi, chỉ lớp đó được vẽ lại, trong khi phần còn lại của màn hình không thay đổi. RepaintBoundary đặc biệt hữu ích cho hoạt ảnh, trình phát video, biểu đồ tương tác và các phần tử khác thường xuyên cập nhật.

RepaintBoundary hoạt động như thế nào

Cốt lõi của RepaintBoundary là RenderRepaintBoundary — một RenderObject đặc biệt tạo một PictureLayer riêng. Ở lần kết xuất đầu tiên, RenderRepaintBoundary ghi lại các lệnh đồ họa trong lớp này. Ở các lần cập nhật sau, nếu chỉ nội dung bên trong RepaintBoundary thay đổi, Flutter chỉ vẽ lại lớp này thay vì toàn bộ màn hình. Các lớp khác không thay đổi và được tái sử dụng.

Khi nào sử dụng RepaintBoundary

Không phải widget nào cũng cần RepaintBoundary. Sử dụng nó khi một phần giao diện cập nhật ở tần suất cao (60 FPS trở lên) trong khi phần còn lại của màn hình tĩnh. Các ví dụ điển hình: một chỉ báo tải có hoạt ảnh, trình phát video, Canvas trò chơi, CustomPainter với các lần vẽ lại thường xuyên. Đối với văn bản tĩnh hoặc nút, RepaintBoundary là thừa thãi và chỉ làm tăng mức tiêu thụ bộ nhớ.

Tối ưu hóa RenderObject Tree cho hiệu suất

Hiệu suất của RenderObject Tree phụ thuộc vào số lượng nút, độ sâu của cây và tần suất vẽ lại. Flutter DevTools (tab "Rendering") cho phép phân tích RenderObject Tree theo thời gian thực: số lần vẽ lại, thời gian layout và paint, số lượng lớp và kích thước của chúng. Phân tích thường xuyên giúp xác định các nút thắt cổ chai.

Tránh overdraw quá mức

Overdraw là tình trạng một pixel được vẽ nhiều lần trong mỗi khung hình. Ví dụ, khi một widget bán trong suốt chồng lên một widget khác, GPU vẽ cả hai lớp. Sử dụng cờ opaque (Container với color thay vì decoration) cho các phần tử không trong suốt để Flutter bỏ qua các lớp không nhìn thấy. Theo nhóm Flutter, giảm overdraw có thể cắt giảm thời gian paint tới 30%.

Giảm thiểu số lượng lớp

Mỗi RepaintBoundary và một số widget (Opacity, ClipRRect, Transform) tạo một lớp riêng (PictureLayer). Quá nhiều lớp làm tăng thời gian tổng hợp. Sử dụng phân nhóm: thay vì nhiều widget Opacity trên các phần tử riêng lẻ, hãy áp dụng một Opacity duy nhất trên container. Thay vì ClipRRect trên mỗi phần tử, hãy sử dụng ClipRRect trên container chung.

Sử dụng hàm tạo const

Khi một widget được khai báo là const, Flutter biết rằng cấu hình của nó sẽ không thay đổi và có thể tái sử dụng RenderObject tương ứng mà không cần tạo lại. Hàm tạo const giảm tải cho bộ thu gom rác và tăng tốc khung hình đầu tiên. Sử dụng const cho các widget có tham số cố định: biểu tượng, tiêu đề, phần tử trang trí.

const Text("Tiêu đề", style: TextStyle(fontSize: 24));
const Icon(Icons.home, color: Colors.blue);
const SizedBox.shrink();