Виджет ToggleIcon используется для того, чтобы пользователь мог переключаться между двумя значками, которые представляют два разных состояния. Его можно использовать для включения или отключения функций или настроек, например, включения или выключения музыки, изменения темы приложения или кнопки «Мне нравится».
Добавление виджета ToggleIcon
Давайте посмотрим, как добавить виджет ToggleIcon, создав пример, который управляет темной/светлой темой. Вот как это выглядит:
Вот как это делается:
- Сначала добавьте сам виджет ToggleIcon из Base Elements.
- Теперь вы должны привязать ToggleIcon к переменной, которая поддерживает состояние темы. Скорее всего, это будет переменная из App State или вашего бэкенда. Как только вы привяжете переменную, ToggleIcon будет отображать иконку на основе текущего значения и обновлять новое значение (противоположное текущему) непосредственно в переменной. Для этого перейдите на панель свойств > Toggle Value > нажмите значок настроек > выберите Source переменной.
- Вы можете настроить значок включения и значок выключения, используя инструкции здесь.
- Чтобы посмотреть, как это выглядит в разных состояниях, переключите Display Value (в UI Builder).
Запуск действия при переключении
Вы также можете запускать действие каждый раз, когда нажимается значок переключения. Это очень полезно, если вы хотите сделать что-то вроде сортировки или фильтрации списка или изменения темы приложения.
Давайте расширим наш предыдущий пример и добавим некоторые действия, которые действительно изменяют тему приложения при нажатии на ToggleIcon. Вот как это выглядит:
Для этого:
- Выберите ToggleIcon > перейдите на панель свойств > выберите Actions > и нажмите + Add Action.
- Вы заметите, что Тип действия (он же обратный вызов) уже установлен на On Toggle. Это означает, что действия, добавленные сюда, будут вызываться каждый раз, когда нажимается иконка ToggleIcon.
- Теперь вы можете добавить сюда любое действие. Для этого примера добавим условное действие, которое проверяет переменную состояния приложения (это та же переменная, которая используется в ToggleIcon), и добавим действия для установки темной и светлой темы.
Настройка
Вы можете настроить внешний вид и поведение этого виджета с помощью различных свойств, доступных на панели свойств.
Показать/скрыть виджет
Узнайте, как показать или скрыть любой виджет с помощью свойства «Условная видимость».
Отзывчивая видимость
Узнайте, как добавить отзывчивую видимость к любому виджету.
Добавить отступы и выравнивание
Узнайте, как добавить подложку и выравнивание к любому виджету.
Подключение к переменной Firestore
Возможно, вы используете Firstore для хранения данных вашего приложения в модели коллекция-документ. Давайте посмотрим, как вы можете использовать ToggleIcon для пометки любой картинки как любимой внутри документа Firestore.
Сначала создайте коллекцию, сделайте запрос к коллекции, а затем привяжите поле, в котором хранится статус избранного.
