Дочерний виджет
Child Widget оставляет в компоненте место, которое каждый раз заполняется по-своему. Вместо десятка похожих компонентов вы делаете один: структура фиксированная, а один участок — свободный.
- Позиция этого участка внутри компонента задана раз и навсегда.
- В него помещается любой виджет: текст, кнопка, изображение, кастомный виджет, другой компонент.
- У каждого вхождения компонента содержимое может быть своим.
- Общая структура компонента при этом не меняется.
- Карточки дашборда с разным наполнением: график, число, список.
- Строки настроек с разными элементами управления: переключатель, выпадающий список, кнопка.
- Экраны-заглушки с разными действиями.
- Карточки онбординга и описания возможностей.
Как использовать
Разберём на примере строки настроек, в которой должен появляться разный элемент управления.
- Добавьте компоненту новый параметр с понятным именем — например,
childWidget. - Задайте ему тип Child Widget.
- В вёрстке компонента поставьте заглушку Child Widget там, где должно появляться переменное содержимое.
- Перейдите к вхождению компонента, найдите область Child Widget и положите в неё нужный виджет.
Child Widget или Widget Builder
Оба способа подставляют свою вёрстку внутрь компонента, но рассчитаны на разные ситуации.
Child Widget — виджет перетаскивается прямо во вхождение компонента, без подготовки со стороны автора компонента. Всё делается визуально, у каждого вхождения содержимое своё. Подходит для быстрой и свободной настройки.
Widget Builder — параметр, который заранее описывает автор компонента: вёрстка передаётся внутрь как значение, почти как аргумент функции. Строже и предсказуемее; выбирают его там, где компонентов много и они живут по правилам дизайн-системы.
Рекомендации
- Ставьте Child Widget в предсказуемое место: завершающая часть строки, блок содержимого, зона действий. Не втискивайте его между элементами, от взаимного расположения которых зависит вся раскладка.
- Пусть у участка будет ясная роль — «зона действия», «зона содержимого», а не «сюда можно что угодно».
- Не заводите в одном компоненте много таких заглушек: разобраться в нём станет сложнее, чем собрать заново.
- Проверьте компонент с разным содержимым — маленьким, большим, интерактивным, — чтобы вёрстка нигде не поехала.
Ограничения
- Позиция Child Widget внутри компонента фиксирована: для отдельного вхождения её не сдвинуть.
- Структура вставляемого никак не ограничена, поэтому разнородные виджеты в разных вхождениях легко приводят к разнобою.
- Для однотипных повторяющихся раскладок вроде списков товаров и сеток это не лучший выбор: там содержимое диктуют данные.
- Виджет добавляется вручную в каждое вхождение, и на больших системных макетах это становится рутиной.