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

PinCode

Виджет PinCode позволяет вводить пин-код или ОТП. Вы можете использовать этот виджет для проверки личности пользователя или транзакции перед совершением платежей в приложениях финансовых технологий.

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

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

Добавление виджета PinCode​

Для добавления виджета PinCode:

  1. Откройте Палитру виджетов и найдите виджет PinCode во вкладке Базовые элементы. Вы можете перетащить его в нужное место или добавить непосредственно из дерева виджетов или области холста.
  2. Чтобы увеличить длину PIN-кода (количество символов, которые пользователи могут вводить), перейдите на панель свойств, найдите свойство Длина PIN-кода и введите значение. Примечание: Максимальное значение — 8.
  3. Если вы используете этот виджет для получения секретного PIN-кода от пользователей, вы можете скрыть его специальным символом. Для этого включите переключатель Скрыть текст и выберите Символ сокрытия из вариантов *,-,?, и •.
  4. Вы также можете включить/отключить переключатель Текст подсказки и выбрать Символ подсказки, отображаемый, когда вы еще ничего не ввели.

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

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

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

Пример отображения сообщения snackbar с введенным значением в виджете PinCode.

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

Для запуска действия каждый раз, когда вводится или удаляется значение в каждом поле этого виджета (например, чтобы предоставить пользователю мгновенную обратную связь):

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

Пример отображения сообщения snackbar, когда пользователь вводит недопустимое значение.

Валидация​

Вы можете проверить виджет PinCode на наличие введенного значения. Для этого оберните виджет PinCode в Form, в Form введите сообщение об ошибке, которое нужно отобразить, и запустите действие Validate Form. Это отобразит сообщение об ошибке, если пользователь попытается отправить форму без ввода значения PIN-кода.

Вы также можете настроить высоту текста ошибки в Панель свойств > Высота текста ошибки.

Set error text height

Кастомизация​

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

Изменение типа клавиатуры​

Когда клавиатура открывается по умолчанию, можно вводить только цифры. Но вы можете разрешить пользователям вводить как буквы, так и цифры. Для этого выберите виджет PinCode, перейдите в Панель свойств > Свойства PIN-кода > и установите Тип клавиатуры в Видимый пароль.

Keyboard Type

Keyboard type: Visible Password

Использование PinCode для секретного PIN-кода​

Чтобы использовать PinCode для ввода секретного PIN-кода, перейдите в Панель свойств > Свойства PIN-кода > и включите Скрыть текст. Теперь, при вводе значения, оно будет скрыто символом звездочки (*). Вы можете изменить этот символ, используя выпадающий список Символ сокрытия.

Установка символа подсказки​

Символ подсказки — это специальный символ, отображаемый в каждом поле ввода виджета PinCode, который служит визуальной подсказкой о формате ожидаемого ввода. Символы подсказки часто используются вместе с фактическими символами ввода, чтобы направить пользователей при вводе PIN-кода или пароля.

Чтобы установить текст подсказки, перейдите в Панель свойств > Свойства PIN-кода > включите Текст подсказки > установите Символ подсказки.

Автофокус​

При включении эта функция имитирует событие нажатия и сразу показывает клавиатуру. Это позволяет виджету PinCode быть готовым к приему ввода от пользователей без необходимости нажимать на него. Если вы хотите отключить это поведение, перейдите в Панель свойств > Свойства PIN-кода > и отключите свойство Автофокус.

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

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

Автозаполнение включено

Выравнивание полей PIN-кода​

По умолчанию все поля PIN-кода выровнены как Равномерное пространство, то есть между каждым полем PIN-кода будет одинаковое пространство.

Следующие опции помогают вам выровнять поля PIN-кода:

  • Начало: Разместить поля PIN-кода как можно ближе к началу.
  • Центр: Разместить поля PIN-кода как можно ближе к середине.
  • Конец: Разместить поля PIN-кода как можно ближе к концу.
  • Равномерное пространство: Равномерно распределить поля PIN-кода.
  • Пространство вокруг: Равномерно распределить свободное пространство между полями PIN-кода с дополнительным пространством в начале и конце.
  • Пространство между: Равномерно распределить свободное пространство между полями PIN-кода.

Чтобы настроить пространство между полями, выберите виджет PinCode, перейдите на панель свойств, найдите свойство Выравнивание PIN-кода и выберите один из вариантов.

Изменение формы и размера полей PIN-кода​

Чтобы изменить форму и размер полей PIN-кода:

  1. Выберите виджет PinCode, перейдите на панель свойств, найдите свойство Форма поля PIN и установите форму на Коробка, Круг или Подчеркивание.
  2. Для изменения высоты и ширины введите значение в поля Высота поля и Ширина поля.
  3. Чтобы создать закругленную границу, когда форма установлена на Коробка, используйте свойства Радиус границы и Ширина границы.

Изменение цветов​

Вы можете изменить цвета для различных состояний полей PIN-кода. Для этого:

  1. Выберите виджет PinCode, перейдите на панель свойств и измените цвета для следующих параметров:
    • Активный цвет: Устанавливает цвет границы при вводе значения.
    • Неактивный цвет: Устанавливает цвет границы при отсутствии значения.
    • Выбранный цвет: Устанавливает цвет границы, когда курсор находится внутри поля PIN, и пользователь собирается ввести значение.
  2. Чтобы изменить цвет фона вместо только цвета границы, Включите активное заполнение.

Кастомизация курсора​

Вы можете показать или скрыть курсор, используя переключатель Показать курсор, и изменить его цвет, используя свойство Цвет курсора.

Очистка значения PIN-кода

Посмотрите, как сбросить значение PIN-кода.