Slider

Slider выбирает число из диапазона: пользователь тянет бегунок (thumb) вдоль полосы. Диапазон задают Minimum и Maximum. Так делают регулятор громкости от 0 до 100 или выбор суммы пожертвования.

Плавный Slider на 70 из 100 и пошаговый на 6 из 10 с шагом 2

Как добавить

  1. Добавьте Slider из раздела Form Elements в Widget Palette или через дерево виджетов.
  2. Выделите его и откройте Slider Properties. Задайте Minimum и Maximum, затем Initial Value внутри диапазона. Начальное значение можно взять из переменной — например, регулятор громкости начнёт с сохранённого уровня.
  3. Добавьте виджет Text, который будет показывать текущее значение.
  4. В его тексте выберите Set from Variable > Widget State > [имя Slider]. Если ползунков на странице несколько, выберите нужный. По желанию задайте Number Format Option и нажмите Confirm.
инфо
Показать — не значит сохранить

Text показывает текущее значение Slider, но никуда его не записывает. Чтобы значение сохранилось, прочитайте его действием из Widget State и запишите в постоянную переменную App State или на бэкенд.

Действие при изменении значения

Чтобы запускать действие, когда пользователь двигает ползунок, используйте триггер On Selected. Как его настроить — в разделе Триггеры форм.

Настройка

Выделите Slider в дереве виджетов или на холсте. Platform Type находится в разделе Platform, остальное — в Slider Properties:

  • Platform Type — Android или Adaptive. Adaptive рисует ползунок в стиле iOS на iOS и в стиле Android на Android.
  • Minimum — наименьшее значение. Для громкости — 0.
  • Maximum — наибольшее значение. Для громкости — 100.
  • Step Size — выбор только с заданным шагом. При минимуме 0, максимуме 10 и шаге 2 доступны 0, 2, 4, 6, 8 и 10.
  • Width — ширина. Бесконечность — вся доступная ширина, или введите конкретное число.
  • Active Color — цвет полосы от минимума до бегунка.
  • Inactive Color — цвет остальной полосы.
  • Show Value — показывает значение над бегунком, пока его тянут.
  • Round Value — округляет значение.
  • Num Decimal Places — сколько знаков после запятой оставлять при округлении.
  • Disable — запрещает двигать ползунок. Поле под настройкой позволяет привязать блокировку к значению.
перевод официальной документации FlutterFlow

обновлено · перевод от

⌕ ESC