Виджеты Switch

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

Switch

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

Добавление Switch

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

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

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

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

Возможно, вы захотите отобразить переключатель с состоянием по умолчанию, например, ВКЛЮЧЕНО или ВЫКЛЮЧЕНО. Например, настройка службы геолокации с переключателем, выключенным по умолчанию.

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

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

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

Возможно, вы захотите сохранить значение переключателя сразу после его переключения в положение ВКЛЮЧЕНО или ВЫКЛЮЧЕНО. Для этого добавьте действие с использованием триггера, который реагирует на изменения в выборе виджета.

Настройка

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

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

Чтобы изменить цвета переключателя, выберите виджет Switch, перейдите в панель свойств и прокрутите вниз до раздела Switch Properties. Здесь вы можете изменить цвет для следующих свойств:

• Active Color: Цвет ползунка (круга), когда переключатель включен.
• Active Track Color: Цвет дорожки (линии, по которой скользит круг), когда переключатель включен.
• Inactive Track Color: Цвет дорожки (линии, по которой скользит круг), когда переключатель выключен.
• Inactive Thumb Color: Цвет ползунка (круга), когда переключатель выключен.

Отключение переключателя

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

Чтобы отключить переключатель, перейдите в Properties Panel > включите Switch Disable Options > нажмите Unset и задайте Condition. После установки вы также можете настроить цвета отключенного состояния с помощью свойств Disabled Active Color, Disabled Active Track Color, Disabled Inactive Track Color и Disabled Inactive Thumb Color.

SwitchListTile

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

SwitchListTile идеален для случаев, когда вы хотите предоставить больше контекста или описательного текста рядом с переключателем, например, в меню настроек или форме с подробными опциями.

Добавление SwitchListTile

Вот пример того, как вы можете использовать виджет SwitchListTile в своем проекте:

1. Перетащите виджет SwitchListTile из вкладки Base Elements и поместите его внутрь Column.
2. По умолчанию переключатель включен изначально.
   1. Чтобы выключить его, перейдите в панель свойств и снимите галочку с свойства Switch Initial Value.
   2. Чтобы задать значение на основе переменной (например, переменной состояния приложения или ответа API), перейдите в панель свойств, нажмите Set from Variable и выберите Source.
3. Чтобы задать заголовок, прокрутите вниз до раздела Title и измените свойство Text.
4. Аналогично, прокрутите вниз, найдите раздел Subtitle и измените Text, чтобы добавить описание.

Установка типа платформы

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

Чтобы задать тип платформы:

1. Выберите виджет SwitchListTile из дерева виджетов или области холста.
2. Перейдите в панель свойств и откройте раздел Platform.
3. Установите Platform Type как Adaptive или Android.

Настройка

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

Изменение цвета переключателя

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

1. Выберите SwitchListTile из дерева виджетов или области холста.
2. Перейдите в панель свойств и прокрутите вниз до раздела Switch List Tile Properties.
3. Чтобы изменить цвет ползунка (скользящего круга), найдите свойство Thumb Color и нажмите на поле рядом с уже выбранным цветом, выберите цвет, а затем нажмите Use Color или нажмите на уже выбранный цвет и введите Hex-код напрямую.
4. Чтобы изменить цвет дорожки (линии, по которой скользит круг), найдите свойство Track Color и нажмите на поле рядом с уже выбранным цветом, выберите цвет, а затем нажмите Use Color или нажмите на уже выбранный цвет и введите Hex-код напрямую.

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

Чтобы переключатель отображался перед заголовком:

1. Выберите SwitchListTile из дерева виджетов или области холста.
2. Перейдите в панель свойств и прокрутите вниз до раздела Switch List Tile Properties.
3. Прокрутите вниз и отметьте свойство Leading (нажмите на него).