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

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

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

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

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

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

1. Стандартный виджет
2. Пользовательский виджет
3. Шаблонный виджет

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

Исходя из их ответственности и использования, они сортируются на пять следующих категорий:
Наиболее часто используемые элементы

1. Элементы макета
2. Элементы базы
3. Элементы страницы
4. Элементы формы

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

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

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

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

1. Из дерева виджетов
2. Из панели виджетов

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

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

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

Чтобы добавить виджеты с панели виджетов:

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

Когда вы добавляете виджеты, по умолчанию им присваивается имя виджета. Например, если вы добавите виджет Text, его имя будет Text. Для виджета TextField это будет TextField, и так далее. Если у вас несколько таких виджетов, это может привести к путанице при выборе нужного виджета, особенно при соединении их с данными. Поэтому всегда полезно переименовывать виджеты в легко узнаваемые имена.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Чтобы обернуть виджет:

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

Когда у вас есть список элементов в прокручиваемом представлении (например, Column, Row, ListView) и вы хотите заменить его другим прокручиваемым представлением, вы можете использовать опцию заменить виджет. Виджетами, которые можно заменить, являются Column, Row, Wrap, ListView, GridView и StaggeredView.

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

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

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

Чтобы скопировать код виджета:

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

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

Чтобы сохранить виджет как шаблон:

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

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

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

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