Перейти к основному содержимому

Параметры конструктора виджетов

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

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

Например, рассмотрим пользовательский компонент выпадающего списка. Хотя общая структура списка остаётся неизменной, стиль или содержимое элементов списка может варьироваться в зависимости от сценария использования. Передавая виджет элемента списка в качестве параметра, можно применять внешний вид и поведение списка, не создавая новые компоненты для каждой вариации.

возможные сценарии использования
  • Пользовательские карточки: Представьте, что в приложении для электронной коммерции нужно отображать карточки товаров. Можно создать переиспользуемый компонент карточки с параметрами для изображения, заголовка, содержимого и кнопки призыва к действию. Эта карточка может использоваться на нескольких страницах, но с разным содержимым.
  • Динамические формы: Создайте компонент формы, в который в качестве параметров передаются различные поля (TextFields, Dropdowns или Checkboxes). Это позволяет повторно использовать одну и ту же структуру формы, адаптируя её под разные поля ввода.
  • Модульные макеты: Создайте единый макет с неизменными областями, такими как заголовки и нижние колонтитулы, передавая в качестве параметров различное содержимое основного блока для адаптации под разные страницы.

Рассмотрим пример из приложения для электронной коммерции. На странице адреса доставки может потребоваться сохранить единый дизайн для различных полей ввода (где пользователь указывает имя, email и т. д.). Однако для разных полей может понадобиться некоторая настройка — например, использовать TextField для ввода имени и DropDown для выбора страны.

widget-builder-as-parameter-example.avif

Создание конструкторов виджетов в качестве параметров​

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

Создание параметра типа Widget Builder​

Создайте новый компонент и добавьте базовые виджеты, которые не будут изменяться. Затем определите параметр и установите его тип как Widget Builder. Чтобы передать данные из текущего компонента в конструктор виджетов, можно указать параметр для конструктора виджетов.

Добавление конструктора виджетов в дерево виджетов​

Добавьте заполнитель конструктора виджетов в нужное место дерева виджетов компонента, где должен появиться динамический элемент. Конструкторы виджетов отображаются в разделе Components палитры Widget Palette при добавлении виджета в дерево виджетов.

Передача параметров в конструктор виджетов​

Иногда требуется передать данные из компонента в конструктор виджетов. Например, на странице адреса доставки подсказка в поле ввода может изменяться в зависимости от конфигурации. В этом случае подсказку можно передать в конструктор виджетов в качестве параметра. Вот как это сделать:

Просмотр конструктора виджетов с использованием разных компонентов​

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

Чтобы выбрать компонент для предварительного просмотра, выделите конструктор виджетов, затем перейдите в раздел Widget Builder UI Properties панели Property Panel.

preview-component.png

Использование компонентов с конструкторами виджетов в качестве параметров​

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

В этом примере мы создаём два дополнительных компонента для TextField и Dropdown — и передаём их в качестве конструкторов виджетов.