Компонент

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

Например, в приложении для обмена сообщениями компонент может быть пользовательской кнопкой с определенным дизайном и функциональностью, которая используется в различных частях приложения, например, для отправки сообщения или вложения файла.

Чтобы создать и использовать компонент в своем приложении, следуйте приведенным ниже инструкциям:

1. Выберите меню Page Selector в меню навигации. Если вы выбрали представления Stack Pages и Widget Tree, откройте меню Widget Tree.
2. Нажмите на значок Новый компонент. Откроется всплывающее окно, в котором вы можете найти готовые шаблоны.
3. Чтобы начать с нуля, нажмите + Создать пустой (в разделе Пустой компонент) или выберите один из имеющихся шаблонов.
4. Укажите имя компонента и нажмите Создать компонент.
5. Новый компонент будет виден на вкладке Компоненты. Выберите его, создайте или внесите изменения в соответствии с вашими требованиями. Щелкните на нем правой кнопкой мыши, чтобы дублировать, скопировать или удалить.
6. Вы можете добавить только что созданный компонент из дерева виджетов, UI Builder или плавающей палитры виджетов. На панели виджетов переключитесь на вкладку «Компоненты» и перетащите компонент в нужное место на странице.

Вы также можете сгенерировать компонент с помощью нашей функции «AI Gen Компонент». Просто опишите, что вам нужно, и мы сгенерируем компонент, который вы сможете предварительно просмотреть с помощью различных цветовых тем и соответствующего кода.

Примеры:

1. Создайте нижний лист для информации о фильме.
2. Создайте карточку для демонстрации информации о конкретной книге.
3. Создать выпадающее меню с тремя вариантами пользовательских настроек.
4. Построить нижний лист для информации о ресторане.
5. Создать карточку для отображения информации о профиле пользователя.
6. Создать навигационное меню с тремя кнопками для фитнес-приложения.

Видео:https://www.loom.com/share/de4755f7b984480eabd38eabe771849d?sid=5e86d0ed-bc99-47eb-b3d6-2707d190490a

Вы можете извлечь общие виджеты и создать компонент, который можно использовать многократно. Для этого просто щелкните правой кнопкой мыши на виджете и выберите Преобразовать в компонент.
Обратите внимание, что виджет на вашей странице теперь преобразован в компонент.

Вы можете передавать данные со страницы в ваш пользовательский компонент, выполнив следующие действия:

1. Определите параметр
2. Передать данные
3. Использовать параметр

1. Откройте ваш компонент. Если вы находитесь в дереве виджетов, выберите первый виджет (т.е. ComponentName).
2. С правой стороны найдите раздел Параметры компонента и нажмите кнопку +.
3. Нажмите на + Добавить параметр и введите имя параметра.
4. Установите соответствующий параметр Type; если этот параметр будет содержать список элементов, поставьте галочку List.
5. Нажмите кнопку Подтвердить.

Чтобы передать данные компоненту, выполните следующие действия:

1. Выберите пользовательский компонент на странице (где вы его добавили).
2. Перейдите на панель свойств; в разделе «Свойства компонента» отобразится имя параметра (определенного в компоненте; см. предыдущий шаг).
3. Введите значение параметра.

4. Если параметр имеет тип Действие, нажмите Открыть. Это откроет редактор потока действий в новом всплывающем окне, и здесь вы можете добавить любое действие, например действие Upload.

Доступ к значению параметра можно получить через меню Set from Variable > Component Parameters > [имя_параметра].

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

Иногда вам может понадобиться вызвать действия на странице из виджета внутри компонента. Например, загрузить изображение нажатием кнопки (внутри компонента) и отобразить загруженное изображение обратно в виджете на странице.

Вы можете сделать это, добавив действие Execute Callback. Подробные инструкции вы найдете на следующей странице.

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

Чтобы вызвать действия при загрузке компонента, выберите имя компонента (первый виджет в дереве виджетов) > перейдите на панель свойств > выберите Действия > Добавить любое действие (в разделе Инициализация).

Вот пример компонента кредитной карты, который выполняет вызов API для получения данных кредитной карты при загрузке компонента.

Компонент может иметь несколько виджетов внутри себя, и вы можете захотеть получить доступ к их состоянию за пределами компонента, т.е. страницы. Например, компонент с двумя TextFields (одно для имени пользователя, другое для пароля) может использоваться на странице входа в систему и на странице регистрации. Теперь на обеих страницах необходимо получить значение каждого TextField, как если бы они были добавлены на самой странице.

Вы можете получить доступ к состоянию виджетов компонента на вашей странице так же, как и к другим виджетам. Просто перейдите в меню Set Variable > Widget State > [имя_компонента] > [ваш_виджет].

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

1. Отслеживание изменений: Уникальный ключ» помогает приложению распознавать, какие задачи являются новыми, завершенными или удаленными, обеспечивая точность обновлений.
2. Эффективность: Благодаря уникальным идентификаторам приложение обновляет только те задачи, которые изменились, а не весь список, что повышает производительность.
3. Сохранение деталей: Когда вы изменяете задачу и отходите от нее, «уникальный ключ» обеспечивает запоминание изменений и их корректное отображение при возвращении.

Чем компонент отличается от создания шаблона и виджета темы?

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

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