Виджеты и Элементы интерфейса

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

В FlutterFlow виджет — это элемент пользовательского интерфейса, который помогает вам создать макет вашей страницы. Почти все, что вы видите на странице, является виджетом. Вы создаете пользовательский интерфейс, комбинируя виджеты в отношениях «родитель-ребенок».

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

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

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

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

В процессе создания страницы вы можете часто переключаться между представлениями Pages и Widget Tree. Для улучшения вашего рабочего процесса мы предоставляем возможность объединить оба вида вместе, избавляя вас от необходимости переключать вкладки. Это объединенное представление позволяет одновременно видеть страницы и дерево виджетов, что облегчает навигацию и редактирование.

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

Типы виджетов, которые вы можете добавить на свою страницу.

1. Стандартный виджет
2. Виджет компонента
3. Виджет шаблона
4. Виджет темы

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

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

1. Из дерева виджетов
2. Из конструктора пользовательского интерфейса
3. Из плавающей палитры виджетов

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

Чтобы добавить виджет из дерева виджетов:

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

Чтобы добавить виджеты из конструктора пользовательского интерфейса:

1. Выберите UI Builder в меню навигации (в левой части экрана).
2. Найдите или выберите виджет из списка, а затем перетащите его в подходящее место в области холста.

Чтобы добавить виджеты из палитры плавающих виджетов:

1. Откройте плавающий виджет на холсте.
2. Найдите или выберите виджет из списка, а затем перетащите его в подходящее место в области холста.

Когда вы добавляете виджеты, им автоматически присваиваются имена по умолчанию в зависимости от типа виджета. Например, виджету Text присваивается имя «Text», виджету TextField — «TextField» и так далее.

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

Чтобы переименовать виджет:

1. Выберите виджет в дереве виджетов или в области холста.
2. Перейдите к панели свойств в правой части экрана.
3. Найдите существующее имя виджета и нажмите на значок редактирования ().
4. Введите новое имя и нажмите на значок готово ().

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

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

Чтобы переместить виджет в дереве виджетов, выберите его, перетащите вверх или вниз и переместите в нужное место.

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

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

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

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

Документируя виджет, вы можете помочь будущим пользователям вспомнить, почему он был добавлен, и узнать о нем больше. Это поможет вам с уверенностью вносить любые изменения и, в конечном счете, приведет к уменьшению количества ошибок.

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

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

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

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

Кроме того, чтобы добавить семантическую метку для каждого виджета в приложении, имеющего действие, можно включить опцию Добавить предупреждение для семантических виджетов. Таким образом, вы получите предупреждение, если у какого-либо виджета есть действие, но семантическая метка еще не добавлена. Совет: Вы можете щелкнуть на элементе предупреждения, чтобы перейти непосредственно к этому виджету.

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

В этом разделе вы узнаете, как копировать-вставить, дублировать, обернуть, заменить виджеты и т.д.

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

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

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

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

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

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

1. Выберите виджет в дереве виджетов или в области холста.
2. Щелкните правой кнопкой мыши и выберите опцию Обернуть виджет. Откроется всплывающее окно.
3. Выберите виджет, под который необходимо обернуть текущий виджет.

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

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

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

1. Выберите виджет в дереве виджетов или в области холста.
2. Щелкните правой кнопкой мыши и выберите опцию Replace Widget (Заменить виджет). Откроется всплывающее окно.
3. Выберите виджет, который необходимо заменить.

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

Например, заменить карточку элемента, обернутую в виджет Контейнер, на реальный виджет Карточка.

Чтобы удалить виджет, выберите его в дереве виджетов или в области холста, щелкните правой кнопкой мыши и выберите опцию Удалить виджет.

Видео:https://www.loom.com/share/cd2bac491d3f4b28a043ce507a23389d?sid=d02b3dc7-0c14-43f2-9d9c-00c7aac4a580

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

Для создания единообразных визуальных элементов можно также скопировать стиль виджета. Для этого выберите виджет > щелкните правой кнопкой мыши > выберите Копировать стиль виджета. Теперь выберите виджет, к которому необходимо применить скопированный стиль > щелкните правой кнопкой мыши > выберите Вставить стиль виджета.

С помощью этой опции можно скопировать фрагмент кода выбранного виджета и опробовать его в локальной IDE или любом другом онлайн-редакторе кода.

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

1. Выберите виджет в дереве виджетов или в области холста.
2. Щелкните правой кнопкой мыши и выберите опцию Копировать код виджета.
3. Откройте IDE или онлайн-редактор и вставьте код в нужное место.

Видео:https://www.loom.com/share/da632c76a554423ea98ac8d42f539ca7?sid=d436bdeb-2123-4fc1-8e39-db2b931a0121

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

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

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

1. Выберите виджет в дереве виджетов или в области холста.
2. Щелкните правой кнопкой мыши и выберите опцию Преобразовать в компонент. Откроется всплывающее окно.
3. Введите имя компонента и нажмите кнопку Создать компонент.
4. Чтобы увидеть созданный компонент, выберите в навигационном меню Конструктор Ваш компонент появится в разделе Пользовательские компоненты.

Видео:https://www.loom.com/share/d30c6e86ba1345c49e44a32549aa47ea?sid=1d8f21a9-8770-449b-923d-9ff0c3945070

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

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

1. Выберите виджет в дереве виджетов или в области холста.
2. Щелкните правой кнопкой мыши и выберите опцию Сохранить как шаблон. Откроется всплывающее окно.
3. Введите имя шаблона и нажмите на кнопку Сохранить шаблон.
4. Чтобы увидеть только что созданный шаблон, выберите в навигационном меню UI Builder и перейдите на вкладку Шаблоны. Ваш шаблон появится в разделе Мои шаблоны.

Видео:https://www.loom.com/share/56e5c9503dee4036be156928e6f7926b?sid=f0e1a7d2-f9b6-4abf-adeb-f218ca91c411

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

1. Выберите виджет в дереве виджетов или в области холста.
2. Щелкните правой кнопкой мыши и выберите опцию Сохранить как виджет стиля темы. Откроется всплывающее окно.
3. Введите название виджета темы и нажмите кнопку Создать стиль.
4. Чтобы увидеть созданный виджет темы, перейдите в раздел Настройки темы > Виджеты темы.

Видео:https://www.loom.com/share/c693489b0d0b4596adf229a451342739?sid=195e3ba4-b3ff-4afe-a142-0eb5704de619