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

св 1

Добавление переключателя

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

св 2

Вот простой способ сделать это:

  • Сначала нажмите на + Add Widget, перетащите виджет Switch с вкладки Base Elements или добавьте его непосредственно из дерева виджетов.
  • Под переключателем добавьте виджет Text, перейдите на панель свойств, нажмите на Set from Variable и выберите Widget State > switchValue (т.е. имя вашего переключателя).
св 3

Установка начального значения

Вы можете захотеть показать переключатель с состоянием по умолчанию, т.е. ВКЛ или ВЫКЛ. Например, показать настройку службы определения местоположения с переключателем по умолчанию ВЫКЛ.

Чтобы установить начальное значение:

  • Выберите виджет Switch, перейдите на панель свойств и откройте свойство Switch Initial Value.
  • Используйте флажок, чтобы установить это значение вручную, или нажмите кнопку Установить из переменной, чтобы установить его на основе динамического значения. Если вы выбрали Set from Variable, убедитесь, что вы передаете булево значение из источника (например, ответ API, поле документа Firestore).
св 4

Сохранение значения переключателя

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

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

  1. On Toggled On: Действия, добавленные под ним, будут срабатывать всякий раз, когда переключатель включен.
  2. On Toggled Off: Действия, добавленные под этим действием, будут срабатывать всякий раз, когда переключатель выключен.

Вот как это делается:

  1. Выберите виджет Переключатель, выберите Действия на панели свойств (правое меню) и нажмите Открыть.
  2. Это откроет редактор потока действий в новом всплывающем окне.
  3. Выберите On Toggled On или On Toggled Off и добавьте действие, которое будет обновлять значение. (например, обновление локального состояния, обновление записи в Firestore и т.д.).
св 5

Настройка

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

Изменение цвета

Чтобы изменить цвета переключателей:

  • Выберите виджет Switch, перейдите на панель свойств и прокрутите вниз до раздела Switch Properties. Здесь вы можете изменить цвет для следующих свойств:
    • Активный цвет: цвет большого пальца (круга), когда переключатель включен.
    • Цвет активной дорожки: цвет дорожки (линии, по которой скользит кружок), когда переключатель включен.
    • Цвет неактивной дорожки: цвет дорожки (линии, по которой скользит кружок), когда переключатель выключен.
    • Цвет неактивного пальца: цвет большого пальца (круга), когда переключатель выключен.

Добавить подкладку

Здесь приведены инструкции по добавлению подкладок.

Настроить выравнивание

Здесь приведены инструкции по настройке выравнивания.