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

CountController

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

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

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

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

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

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

  1. Сначала перетащите виджет CountController из вкладки Элементы формы (в панели виджетов) или добавьте его непосредственно из дерева виджетов.
  2. Перейдите в панель свойств (справа) и прокрутите вниз до Свойств Count Controller.
  3. Число на CountController появляется сразу после загрузки, это называется начальным счётом, по умолчанию 0. Чтобы изменить это начальное значение, введите значение в поле ввода Initial Count. Вы также можете устанавливать это значение динамически, указав Установить от переменной. Это можно использовать для отображения количества продукта по умолчанию в приложении электронной коммерции.
  4. Свойство Step Size устанавливает значение, на которое должен увеличиваться или уменьшаться счёт. Значение по умолчанию - 1. Чтобы изменить это значение, введите его в поле ввода Step Size.
  5. Чтобы позволить пользователям устанавливать допустимый счёт или количество, вы можете ограничить диапазон CountController (минимальное и максимальное количество), указав значение в полях ввода Минимальное и Максимальное.

Срабатывание действия при изменении счетчика​

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

Для этого:

  1. Выберите CountController, выберите Действия из панели свойств (правое меню) и нажмите + Добавить действие.
  2. Вы заметите, что Тип действия (также известный как обратный вызов) уже установлен на При изменении счёта. Это означает, что действия, добавленные здесь, будут вызываться при изменении счёта.
  3. Теперь вы можете добавить здесь любое действие.

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

Настройка CountController​

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

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

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

  1. Выберите виджет CountController из дерева виджетов или области холста.
  2. Перейдите в панель свойств и найдите раздел Свойства стиля.
  3. Чтобы изменить иконку, щёлкните по уже выбранной иконке, а затем найдите и выберите новую иконку.
  4. Чтобы изменить размер иконки, введите значение в свойстве Размер иконки.
  5. Чтобы изменить цвет иконки, найдите свойство Цвет иконки, щёлкните на квадрат рядом с выбранным цветом, выберите цвет и нажмите Использовать цвет или нажмите Сбросить и введите Hex-код напрямую.