Слайдер

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

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

Давайте построим пример использования виджета Slider и получения его значения в виджете Text.

Шаги по созданию примера следующие:

• Сначала добавьте виджет Slider из вкладки Form Elements или добавьте его непосредственно из дерева виджетов.
• Теперь добавьте виджет Text для отображения значения ползунка.
• Выделите виджет Text, перейдите на панель свойств и нажмите на Set from Variable. Откроется новая панель.
• Установите Source (Источник) на Widget State (Состояние виджета).
• Установите для параметра Доступные параметры значение Слайдер. Если вы добавите несколько слайдеров, имена будут такими: Slider1, Slider2 и так далее.
• При желании установите параметр Формат чисел.
• Нажмите кнопку Подтвердить.

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

Начальное значение можно установить двумя способами:

• Установка начального значения вручную
• Установка начального значения из переменной

Чтобы вручную ввести начальное значение слайдера, выполните следующие действия:

• Выберите виджет Slider в дереве виджетов или в области холста.
• Перейдите на панель свойств (в правой части экрана) и прокрутите вниз до раздела «Свойства слайдера«.
• Найдите поле ввода Initial Value и введите нужное значение.

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

Чтобы установить значение из локальной переменной состояния, создайте переменную с типом данных Integer. Для этого найдите инструкцию здесь.

Чтобы установить значение из документа Firestore, убедитесь, что вы можете получить доступ к документу Firestore. Чтобы получить доступ к единому документу Firestore, найдите инструкцию здесь.

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

• Выберите слайдер в дереве виджетов или в области холста.
• Перейдите на панель свойств (в правой части экрана) и прокрутите вниз до раздела Slider Properties.
• Найдите свойство Initial Value и нажмите на Set from Variable. Откроется новая панель.
• Чтобы установить значение из переменной локального состояния.
  • Установите для параметра Source значение Local State.
  • Установите для параметра Available Options имя переменной.
• Чтобы установить значение из документа Firestore.
  • Найдите выпадающий список Source, нажмите на Unset и выберите [collection] Record (from PageName).
  • В разделе Доступные параметры нажмите на Снять и выберите поле, содержащее значение, которое нужно установить на виджете Слайдер.
• Нажмите Подтвердить.

Рассмотрим пример сохранения значения слайдера внутри документа Firestore.

Сохранение значения слайдера в документе Firestore включает в себя следующие шаги:

1. Предварительные условия
2. Создание пользовательской функции для преобразования строки в int
3. Передача выбора в поле документа

Чтобы сохранить значение ползунка в документе Firestore, убедитесь, что вы выполнили все перечисленные предварительные условия.

• Ознакомьтесь со структурированием базы данных Firebase.
• Выполните все шаги в разделе «Настройка Firebase» для вашего проекта.
• Создайте Коллекцию со схемой, содержащей поле с типом данных Integer.

Виджет слайдера выводит значение в типе данных String, а поле может принимать значение типа данных Integer. Следовательно, вам нужно преобразовать значение String в Integer, создав пользовательскую функцию.

Вы можете создать пользовательскую функцию, следуя инструкции здесь.

Определение пользовательской функции выглядит следующим образом:

Вот код (сгенерированный AI) для пользовательской функции:

import ‘dart:math’ as math;

int convertStringToInt(String someString) {
// string to int
int tries;

if (someString == null) {
return 0;
}

try {
tries = int.parse(someString);
} catch (err) {
return 0;
}

return tries;
}

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

Ниже приведены подробные шаги:

• Выберите виджет (например, кнопку), для которого вы хотите добавить действие.
• Выберите Действия на панели свойств (правое меню) и нажмите Открыть. Это откроет редактор потока действий в новом всплывающем окне.
  • Нажмите на кнопку + Добавить действие.
  • В правой части найдите и выберите Создать документ или Обновить документ.
  • Если вы выбрали Создать документ.
    • Установите Коллекцию на имя вашей коллекции (например, todo).
  • Если вы выбрали Обновить документ, установите ссылку документа на обновление.
    • Если у вас есть доступ к документу, установите Источник на фактический документ, а Доступные параметры — на ссылку.
• В разделе Задать поля нажмите на кнопку + Поле.
• Щелкайте по имени поля, пока не увидите поля, в которых хранится значение ползунка.
  • Установите для параметра Источник значения значение Из переменной.
  • Установите для параметра Источник значение Пользовательская функция.
  • Выберите имя функции.
  • Теперь выберите имя аргумента пользовательской функции и установите Value Source в From Variable.
  • Установите Source на Widget State.
  • Установите для параметра Available Options значение Slider. Если у вас несколько слайдеров, имена будут Slider1, Slider2 и так далее.
  • При желании установите параметр Формат числа.
  • Нажмите кнопку Подтвердить.

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

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

Чтобы установить тип платформы:

• Выберите виджет Slider в дереве виджетов или в области холста.
• Перейдите на панель свойств и откройте раздел Платформа.
• Установите тип платформы среди Android или Adaptive.

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

Чтобы задать минимальное и максимальное значения:

• Выберите виджет Slider в дереве виджетов или в области холста.
• Перейдите на панель свойств и прокрутите вниз до раздела Свойства слайдера.
• Найдите свойство Min и введите значение. Это будет начальное значение диапазона.
• Найдите свойство Max и введите значение. Это будет конечное значение диапазона.

По умолчанию вы можете перемещать и останавливать палец ползунка в любом месте дорожки ползунка. Чтобы заставить палец ползунка останавливаться на определенном интервале, можно задать величину шага.

Чтобы задать размер шага, выполните следующие действия:

• Выберите виджет «Слайдер» в дереве виджетов или в области холста.
• Перейдите на панель свойств и прокрутите вниз до раздела Свойства слайдера.
• Найдите свойство Размер шага и введите значение.

Чтобы изменить ширину слайдера:

• Выберите виджет Slider в дереве виджетов или в области холста.
• Перейдите на панель свойств и прокрутите вниз до раздела Свойства слайдера.
• Найдите свойство Width и его значение. Чтобы сделать ширину ползунка равной ширине экрана, нажмите на значок бесконечности ().

Чтобы изменить цвета слайдера:

• Выберите виджет Slider в дереве виджетов или в области холста.
• Перейдите на панель свойств и прокрутите вниз до раздела «Свойства слайдера«.
• Чтобы изменить активный цвет, найдите свойство Active Color, нажмите на поле рядом с уже выбранным цветом, выберите цвет, а затем нажмите Use Color или нажмите на уже выбранный цвет и введите Hex-код напрямую. Вы также можете выбрать цвет, нажав кнопку Палитра и просто.
• Чтобы изменить неактивный цвет, найдите свойство Неактивный цвет, нажмите на поле рядом с уже выбранным цветом, выберите цвет, а затем нажмите кнопку Использовать цвет или нажмите на уже выбранный цвет и введите шестнадцатеричный код напрямую. Вы также можете выбрать цвет, нажав кнопку Палитра и просто.

Посмотрите, как установить цвет из переменной в любое свойство цвета этого виджета.

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

Чтобы показать значение ползунка:

• Выберите виджет «Слайдер» в дереве виджетов или в области холста.
• Перейдите на панель свойств и прокрутите вниз до раздела Свойства слайдера.
• Найдите свойство «Показывать значение» и включите тумблер.

Посмотрите, как вызвать действие при изменении выбора на этом виджете.

Инструкции по отображению/скрытию виджета находятся здесь.