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

Иконки

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

icon.png

Типы виджетов иконок​

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

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

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

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

Основные свойства иконок​

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

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

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

Свойства иконки-кнопки​

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

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

Свойства переключения иконки​

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

toggle.png

При Включении [Действие]​

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