Что такое дерево элементов?

Что такое дерево элементов в Flutter

Дерево элементов (Element Tree) — это внутренняя иерархическая структура, которая отображает структуру пользовательского интерфейса приложения. Это промежуточный слой между виджетами (Widget Tree) и рендеруемыми объектами (Render Tree).

Архитектура три слоя

Flutter использует трёхслойную архитектуру для отрисовки UI:

Widget Tree (неизменяемые объекты)
        ↓
Element Tree (состояние и логика)
        ↓
Render Tree (отрисовка и геометрия)

Роль дерева элементов

Widget Tree содержит виджеты — это конфигурационные объекты, которые описывают, как должен выглядеть UI. Виджеты неизменяемы (immutable).

Element Tree — это реальная структура, которая управляет состоянием. Каждый виджет связан с элементом. Элементы содержат:

• Ссылку на виджет
• Состояние (для StatefulWidget)
• Ссылки на дочерние элементы
• Ссылку на родительский элемент

Render Tree содержит объекты RenderObject, которые выполняют фактическую отрисовку и макет.

Как это работает

class MyApp extends StatefulWidget {
  @override
  State<MyApp> createState() => _MyAppState();
}

class _MyAppState extends State<MyApp> {
  int counter = 0;

  @override
  Widget build(BuildContext context) {
    return Scaffold(
      body: Center(
        child: Column(
          children: [
            Text('Counter: $counter'),
            ElevatedButton(
              onPressed: () => setState(() => counter++),
              child: Text('Increment'),
            ),
          ],
        ),
      ),
    );
  }
}

В этом примере:

1. Widget Tree — это описание: Scaffold → Center → Column → [Text, ElevatedButton]
2. Element Tree — это структура, которая отслеживает состояние counter и создана во время сборки
3. Render Tree — это объекты, которые занимаются расчётом размеров и отрисовкой пикселей

Жизненный цикл элемента

// 1. Создание (mounting)
// Элемент создаётся, когда виджет впервые добавляется в дерево

// 2. Обновление (updating)
// Когда виджет пересоздаётся, элемент обновляется
if (widget != newWidget) {
  element.update(newWidget);
}

// 3. Удаление (unmounting)
// Когда виджет удаляется из дерева, элемент удаляется
element.unmount();

BuildContext

BuildContext — это объект, который представляет позицию элемента в дереве элементов. Через него вы можете получить доступ к:

class MyWidget extends StatelessWidget {
  @override
  Widget build(BuildContext context) {
    // context это ссылка на Element этого виджета
    final theme = Theme.of(context);
    final size = MediaQuery.of(context).size;
    Navigator.of(context).push(...);
    ScaffoldMessenger.of(context).showSnackBar(...);
  }
}

Эффективность: переиспользование элементов

Flutter умно переиспользует элементы при перестройке. Если виджет того же типа находится в той же позиции, элемент переиспользуется:

// Хорошо: один тип, разные свойства
Widget build(BuildContext context) {
  return list.map((item) => Container(
    color: isSelected(item) ? Colors.blue : Colors.transparent,
    child: Text(item),
  )).toList();
}

Отладка дерева элементов

// Вывести дерево виджетов в консоль
debugDumpApp();

// Вывести дерево элементов
debugDumpRenderTree();

Ключи (Keys) для управления элементами

list.map((item) => Container(
  key: ValueKey(item.id),
  child: Text(item.name),
)).toList();

Вывод: Дерево элементов — это сердце механизма отрисовки Flutter. Оно управляет состоянием, эффективно обновляет UI и позволяет разработчикам работать с UI через BuildContext.