Контроль подсчёта

Виджет CountController используется для увеличения и уменьшения счета или числа.

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

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

• Сначала перетащите виджет CountController с вкладки Form Elements (в панели виджетов) или добавьте его непосредственно из дерева виджетов.
• Перейдите на панель свойств (справа) и прокрутите вниз до Свойств контроллера подсчета.
• Число на CountController появляется сразу после его загрузки и называется Initial Count, по умолчанию 0.
• Чтобы изменить этот начальный счет, введите значение в поле ввода Initial Count. Вы также можете установить это значение динамически, задав ему параметр Set from Variable. Это можно использовать для отображения количества товара по умолчанию в приложении электронной коммерции.
• Свойство Step Size задает значение, на которое нужно увеличить или уменьшить счетчик. Значение по умолчанию равно 1. Чтобы изменить его, введите значение в поле ввода Step Size.
• Чтобы позволить пользователям устанавливать действительный счетчик или количество, вы можете ограничить диапазон CountController (минимальное и максимальное количество), указав значение в полях ввода Minimum и Maximum.

Давайте посмотрим, как запустить действие при изменении счета на этом виджете. Это полезно, когда вы хотите обновить последние данные в бэкенде (сделать вызов API, создать/обновить документ Firestore) при изменении количества.

Для этого:

• Выберите CountController, выберите Actions на панели Properties (правое меню) и нажмите + Add Action.
• Вы заметите, что Тип действия (он же обратный вызов) уже установлен на On Count Changed. Это означает, что действия, добавленные здесь, будут вызываться каждый раз, когда счетчик изменится.
• Теперь вы можете добавить сюда любое действие.

Вот пример обновления счета в локальной переменной состояния.

Панель свойств может быть использована для настройки внешнего вида и поведения вашего виджета.

Ниже приведены инструкции по добавлению вставки.

Здесь приведены инструкции по настройке выравнивания.

Эти элементы относятся к значку инкремента, значку декремента и тексту подсчета. Вы можете использовать раздел Style Properties для настройки внешнего вида этих элементов.

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

• Выберите виджет CountController в дереве виджетов или в области холста.
• Перейдите на панель свойств и найдите раздел Свойства стиля.
• Чтобы изменить значок декремента, нажмите на уже выбранный значок (например, минус -), а затем найдите и выберите новый значок.
• Чтобы изменить размер значка, введите значение в свойство Icon Size.
• Чтобы изменить цвет значка, найдите свойство Icon Color, нажмите на поле рядом с выбранным цветом, выберите цвет и нажмите Use Color или нажмите Unset и введите Hex—код напрямую.

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

• Выберите виджет CountController в дереве виджетов или в области холста.
• Перейдите на панель свойств и найдите раздел Style Properties.
• Чтобы изменить значок инкремента, нажмите на уже выбранный значок (т.е. плюс +), а затем найдите и выберите новый значок.
• Чтобы изменить размер значка, введите значение в свойство Icon Size.
• Чтобы изменить цвет значка, найдите свойство Icon Color, нажмите на поле рядом с выбранным цветом, выберите цвет и нажмите Use Color или нажмите Unset и введите Hex—код напрямую.

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

Элементы CountController (декремент, иконка инкремента, текст подсчета) находятся в прямоугольной коробке округлой формы, называемой контейнером. Вы можете использовать раздел «Свойства контейнера», чтобы изменить его форму, размер и цвет фона, настроить его границу, добавить высоту и цвет градиента.

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

Пожалуйста, найдите инструкции по отображению/скрытию виджета здесь