Перейти к основному содержимому

CountController

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

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

Состояние виджета

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

Добавление CountController в проект​

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

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

Запуск действия при изменении счетчика​

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

Для этого:

  1. Выберите CountController, выберите Actions в панели свойств (правое меню) и нажмите + Add Action.
  2. Вы заметите, что Type of Action (он же callback) уже установлен в On Count Changed. Это означает, что действия, добавленные под этим пунктом, будут вызываться каждый раз при изменении счетчика.
  3. Теперь вы можете добавить любое действие здесь.

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

Настройка CountController​

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

Настройка иконки​

Чтобы настроить иконку уменьшения:

  1. Выберите виджет CountController из дерева виджетов или области холста.
  2. Перейдите в панель свойств и найдите раздел Style Properties.
  3. Чтобы изменить иконку, нажмите на уже выбранную иконку, затем выполните поиск и выберите новую иконку.
  4. Чтобы изменить размер иконки, введите значение в свойство Icon Size.
  5. Чтобы изменить цвет иконки, найдите свойство Icon Color, нажмите на поле рядом с выбранным цветом, выберите цвет и нажмите Use Color или нажмите Unset и введите Hex-код напрямую.