Count Controller

Count Controller — счётчик с кнопками «плюс» и «минус». Им набирают количество товара, число гостей, количество билетов — любое число, которое должно оставаться в заданных границах.

Как добавить

1. Добавьте виджет Count Button из вкладки Form Elements в Widget Palette.

2. Поведение счётчика задаётся четырьмя полями:

   • Initial Count — число, с которым счётчик появляется на экране; по умолчанию 0. Значение можно взять из переменной через Set from Variable — например, подставить уже выбранное количество товара.
   • Step Size — на сколько меняется значение за одно нажатие; по умолчанию 1.
   • Minimum — нижняя граница.
   • Maximum — верхняя граница.

Без границ пользователь уведёт счётчик в минус или закажет тысячу единиц товара. Для выбора количества со склада обычно ставят Initial Count, Step Size и Minimum равными 1, а Maximum — остатку.

Текущее значение

Счётчик хранит своё число в состоянии виджета. Чтобы взять его в другом виджете или действии, выберите Set from Variable > Widget State > [имя счётчика].

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

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

Триггер On Count Changed срабатывает каждый раз, когда пользователь увеличивает или уменьшает число:

1. Выделите счётчик и откройте вкладку Actions в панели свойств.
2. Выберите On Count Changed и добавьте нужное действие.
3. Там, где действию нужно само число, подставьте текущее значение из состояния виджета.

Оформление

Выделите счётчик в дереве виджетов или на холсте — настройки собраны в двух разделах панели свойств.

Стиль

• Decrement Icon — значок уменьшения; рядом задаются Icon Size и Icon Color.
• Increment Icon — значок увеличения, с теми же двумя настройками.
• Disabled Icon Color — цвет значка, когда дальше двигаться некуда: минус на нижней границе, плюс на верхней.
• Count Text Style — вид самого числа: Theme Text Style, Font Family, Font Weight, Font Size, Text Color, Line Height, Letter Spacing и Text Align.

Контейнер

• Shape — прямоугольная или круглая подложка.
• Width и Height — размеры подложки в пикселях или процентах.
• Fill Color — фон.
• Border Color — цвет рамки.
• Border Radius — скругление углов: одно значение на все четыре или каждый угол отдельно.
• Border Width — толщина рамки.
• Elevation — тень под подложкой.
• Gradient — градиентная заливка фона.