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

Значки

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

icon.png

Типы виджетов значков

FlutterFlow предоставляет множество виджетов и компонентов:

  • Виджет Icon: Виджет Icon в FlutterFlow используется для отображения символов из различных доступных наборов значков, таких как Material Icons. Он прост в использовании, позволяя быстро интегрировать визуальные символы в ваше приложение.

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

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

Общие свойства значков

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

Пользовательские значки

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

Свойства IconButton

Панель свойств для вашего IconButton позволяет изменять свойства значка, стилизацию кнопки, свойства отключенного состояния и свойства наведения. Она также позволяет определить, нужно ли отображать индикатор загрузки при клике на кнопку значка.

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

Свойства ToggleIcon

ToggleIcon — это специальный компонент, созданный для вас, который позволяет добавить значок с переключением вкл/выкл и определить переменную состояния, определяющую состояние значка Toggle. Свойства просты и включают следующее:

toggle.png

Действие при переключении [Action]

По умолчанию FlutterFlow обрабатывает переключение переменной состояния с true на false и наоборот при клике на кнопку. Однако вы также можете добавить другое действие под триггером действия On Toggle для выполнения дополнительных задач.