Виджеты Switch
В FlutterFlow Switch предоставляют интуитивный способ для пользователей переключаться между двумя состояниями, такими как включено/выключено или включено/отключено. Они полезны для настроек, предпочтений и других сценариев, где требуется простой бинарный выбор. FlutterFlow предлагает два основных виджета переключателя: Switch и SwitchListTile. Каждый из этих виджетов предоставляет уникальные функции и использования, что облегчает добавление функционала переключения в пользовательский интерфейс вашего приложения.
Switch
Виджет Switch представляет собой простой переключатель. Он состоит из перемещающейся кнопки, которую можно перемещать между двумя позициями, указывая состояние включено/выключено. Вы можете настраивать внешний вид и поведение переключателя, такие как его цвет и начальное состояние (включено или выключено).
Добавление Switch
Давайте посмотрим, как добавить виджет переключателя и создать пример, который показывает его значение на виджете Text. Вот как это выглядит:
Видео превью добавления виджета Switch.
Установка начального значения
Вы можете хотеть отобразить переключатель со значением по умолчанию, например, включен или выключен. Например, показать настройку службы геолокации со значением выключено по умолчанию.
Инструкция по установке начального значения переключателя.
Сохранение значения переключателя
Вы можете захотеть сохранить значение переключателя сразу после его переключения в положение включено или выключено. Например, сохранить его в переменной состояния приложения или поле документа Firestore. Вы можете сделать это, добавив действие на виджет переключателя.
Инструкция по добавлении действий на переключатель.
Настройка
Вы можете настраивать внешний вид и поведение этого виджета с использованием различных свойств, доступных в панели свойств.
Изменение цвета
Чтобы изменить цвета переключателя, выберите виджет Switch, перейдите к панели свойств и прокрутите вниз до раздела Switch Properties. Здесь вы можете изменить цвет для следующих свойств:
- Активный цвет: Цвет ползунка (круга) при включенном переключателе.
- Активный цвет дорожки: Цвет дорожки (линии, по которой скользит круг) при включенном переключателе.
- Неактивный цвет дорожки: Цвет дорожки при выключенном переключателе.
- Неактивный цвет ползунка: Цвет ползунка при выключенном переключателе.
Отключение переключателя
Вы можете потребоваться отключить переключатель, если не выполняются определенные условия. Например, пользователи должны иметь возможность переключать переключатель только при работающем подключенном умном устройстве.
Видео по отключению переключателя в определенных условиях.
SwitchListTile
Виджет SwitchListTile объединяет функциональность переключателя с ListTile, обеспечивая более полную опцию для отображения переключателей наряду с дополнительной информацией. Этот виджет включает переключатель, заголовок и необязательный подзаголовок, в се в одном цельном элементе.
SwitchListTile идеально подходит для случаев, когда необходимо предоставить дополнительный контекст или описательный текст наряду с переключателем, например, в меню настроек или форме с подробными опциями.
Добавление SwitchListTile
Вот пример того, как вы можете использовать виджет SwitchListTile в вашем проекте:
Видео примера добавления виджета SwitchListTile.
Установка типа платформы
Вы можете установить тип платформы Adaptive или Android для этого виджета. Выбор типа Adaptive отобразит виджет в своем собственном стиле. Это означает, что виджет будет отображать стиль iOS при запуске на устройствах iOS и стиль Android при запуске на устройствах Android.
Видео по установке типа платформы для виджета.
Настройка
Вы можете настраивать внешний вид и поведение этого виджета с использованием различных свойств, доступных в панели свойств.
Изменение цвета переключателя
Чтобы изменить цвет переключателя:
Инструкция по изменению цвета переключателя.
Отображение переключателя в начале
Чтобы сделать переключатель появляться перед заголовком:
Инструкция по отображению переключателя в начале.