PinCode

PinCode принимает PIN или одноразовый код. Через него подтверждают вход и платёж — в финансовых приложениях это обязательный шаг.

Как добавить

1. Откройте Widget Palette, найдите PinCode во вкладке Base Elements и перетащите на холст или вставьте в дерево виджетов.
2. Pin Length задаёт число полей. Максимум — 8.
3. Если код секретный, включите Obscure Text и выберите Obscuring Character — *, -, ? или •.
4. Hint Text показывает символ-подсказку в пустых полях; сам символ задаётся в Hint Character.

Действие по завершении ввода

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

Порядок такой:

1. Выделите PinCode, выберите Actions в панели свойств и нажмите + Add Action.
2. Установите Type of Action в On Completed — действия отсюда срабатывают, когда заполнены все поля.
3. Добавьте нужное действие.

Пример со снекбаром, показывающим введённое значение:

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

Иногда реакция нужна на каждую введённую или стёртую цифру — например, чтобы сразу сообщить о неверном символе. Для этого есть триггер On Change.

Действие при смене фокуса

Триггер срабатывает, когда пользователь входит в поле или уходит из него: удобно запускать проверку после того, как ввод закончен и фокус ушёл. Настраивается триггером On Focus Change.

Проверка заполнения

Чтобы форма не отправлялась с пустым кодом, оберните PinCode в виджет Form, задайте текст ошибки и вызовите действие Validate Form.

Высота строки с ошибкой настраивается в Properties Panel > Error text height.

Настройки

Внешний вид и поведение задаются в панели свойств.

Тип клавиатуры

По умолчанию открывается цифровая клавиатура. Если код может содержать буквы, выделите PinCode и в Properties Panel > PinCode Properties установите Keyboard Type в Visible Password.

Скрытие вводимых символов

В Properties Panel > Pin Code Properties включите Obscure Text — вводимые цифры заменятся звёздочками. Символ замены выбирается в списке Obscuring Character.

Символ-подсказка

Символ-подсказка стоит в пустых полях и показывает, сколько знаков ждёт от пользователя виджет.

Задаётся в Properties Panel > Pin Code Properties: включите Hint Text и выберите Hint Character.

Автофокус

Когда Auto Focus включён, клавиатура открывается сразу — пользователю не нужно попадать пальцем в поле. Выключается там же: Properties Panel > Pin Code Properties.

Автозаполнение

Auto Fill позволяет виджету взять код из пришедшего SMS и подставить его самостоятельно.

Расположение полей

По умолчанию поля расставлены как Space Evenly — с одинаковыми промежутками.

Доступные варианты:

• Start — прижать к началу.
• Center — собрать по центру.
• End — прижать к концу.
• Space Evenly — равные промежутки везде.
• Space Around — равные промежутки между полями плюс половинные по краям.
• Space Between — свободное место только между полями, по краям его нет.

Настройка живёт в свойстве Pin Code Alignment.

Форма и размер полей

1. Выделите PinCode и найдите в панели свойств Pin Field Shape: Box, Circle или Underline.
2. Размеры задаются в Field Height и Field Width.
3. Для формы Box скругление и толщину рамки задают Border Radius и Border Width.

Цвета

У полей три состояния, и у каждого свой цвет:

1. Выделите PinCode и задайте в панели свойств:
   • Active Color — цвет рамки поля, в которое уже введено значение;
   • Inactive Color — цвет пустого поля;
   • Selected Color — цвет поля, в котором стоит курсор.
2. Чтобы закрашивалась не только рамка, но и фон, включите Enable Active Fill.

Курсор

Переключатель Show Cursor показывает и прячет курсор, свойство Cursor Color задаёт его цвет.