Какие деревья используются в архитектуре рендеринга Flutter?

«Какие деревья используются в архитектуре рендеринга Flutter?» — вопрос из категории Рендеринг и производительность, который задают на 59% собеседований Flutter Разработчик. Ниже — развёрнутый ответ с разбором ключевых моментов.

Ответ

Архитектура рендеринга Flutter построена на четырёх взаимосвязанных деревьях, каждое из которых выполняет свою роль:

  1. Widget Tree — иерархия неизменяемых (immutable) виджетов, описывающая структуру UI. Перестраивается при каждом вызове build().

    // Пример виджет-дерева
    Scaffold(
      appBar: AppBar(title: Text('Пример')),
      body: Center(
        child: Column(
          children: [
            Text('Привет, мир!'),
            ElevatedButton(onPressed: () {}, child: Text('Кнопка')),
          ],
        ),
      ),
    )
  2. Element Tree — "живая" инстанция виджетов, которая связывает виджеты с рендер-объектами. Элементы управляют жизненным циклом и точечно обновляются при изменениях в виджет-дереве, сохраняя состояние.

  3. Render Tree (RenderObject Tree) — дерево объектов, отвечающих за компоновку (layout) и отрисовку (painting). RenderObject вычисляет размеры, позиции и непосредственно рисует пиксели на экране. Это самая "тяжёлая" часть, которая обновляется только при реальной необходимости.

  4. Layer Tree — оптимизированное представление для движка рендеринга (Impeller/Skia). Группирует визуальные элементы в слои для минимизации перерисовок (например, отдельный слой для анимаций или Opacity).

Ключевой принцип: Flutter эффективно обновляет UI за счёт разделения ответственности. Виджет-дерево (декларативное описание) часто перестраивается, но это дёшево. Элемент-дерево определяет, какие части рендер-дерева нужно обновить, что позволяет избежать полной перекомпоновки и перерисовки.