Использование компонентов

Компонент добавляется в дерево виджетов страницы или другого компонента. Он принимает параметры, поэтому одно и то же вхождение легко подстроить под конкретное место. Через колбэки родитель передаёт компоненту действия, а через конструкторы виджетов — целые куски вёрстки.

Как собрать свой компонент, описано в разделе Создание компонента.

Добавление в дерево виджетов

Выберите родителя, внутри которого должен появиться компонент, и найдите его в палитре виджетов, в разделе Components.

Значения параметров

Каждое вхождение компонента получает от родителя свои значения. Выделите вхождение на холсте и задайте параметры в панели свойств.

Уникальный ключ

Компоненту в динамическом списке стоит задать уникальный ключ. Представьте список задач, где записи постоянно добавляются и вычёркиваются: ключ — это как раз тот идентификатор, по которому приложение отличает одну задачу от другой.

  • Отслеживание изменений. Приложение понимает, какая запись появилась, какая выполнена, а какая исчезла, — и обновляет список корректно.

  • Производительность. Перерисовывается не весь список, а только изменившиеся элементы.

  • Сохранение состояния. Внесённые в элемент изменения не теряются, когда вы возвращаетесь к нему.

совет

Если список строится из документов, уникальным ключом обычно берут идентификатор документа.

component-unique-id.avif

Рекурсивные компоненты

Компонент может содержать сам себя — это и есть рекурсия. Приём выручает там, где данные вложены друг в друга на неизвестную глубину.

Классический пример — комментарии в соцсети или на форуме: у комментария есть ответы, у ответов — свои ответы. Рекурсивный компонент разворачивает такую структуру целиком.

recursive-comp.png

перевод официальной документации FlutterFlow

обновлено

ESC