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

PinCode

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

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

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

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

Чтобы добавить виджет PinCode:

  1. Откройте панель виджетов и найдите виджет PinCode на вкладке Base Elements. Вы можете перетащить его в нужное место или добавить непосредственно из дерева виджетов или области холста.
  2. Чтобы увеличить длину PIN-кода (количество значений, которые может ввести пользователь), перейдите в панель свойств, найдите свойство Pin Length и введите значение. Примечание: Вы можете установить это значение максимум до 8.
  3. Если вы используете этот виджет для получения секретного PIN-кода от пользователей, вы можете скрыть его с помощью специального символа. Для этого включите переключатель Obscure Text и выберите Obscuring Character среди *, -, ? и •.
  4. Вы также можете включить или отключить переключатель Hint Text и выбрать Hint Character, который отображается, когда ничего не введено.

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

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

Для этого:

  1. Выберите виджет PinCode, в панели свойств (правое меню) выберите Actions и нажмите + Add Action.
  2. Установите Type of Action (он же callback) в On Completed. Это означает, что действия, добавленные здесь, будут вызваны после ввода пользователем всех значений PIN-поля.
  3. Теперь вы можете добавить любое действие.

Вот пример отображения сообщения в snackbar, которое показывает введённое значение в виджете PinCode.

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

Возможно, вы захотите запустить действие каждый раз, когда пользователь вводит или удаляет значение в каждом поле этого виджета. Например, вы можете проверить валидность введённой цифры сразу после её ввода и показать сообщение о том, что она недействительна. Для этого [добавьте действие с триггером../../../../resources/control-flow/user-interactivity/forms/form-triggers.md#on-change], который реагирует на изменения в этом виджете.

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

Возможно, вы захотите запустить действие, когда пользователь нажимает на поле Pincode или выходит из него. Например, вы можете выполнить проверку валидности после завершения ввода кода и перемещения фокуса из поля. Для этого [добавьте действие с триггером../../../../resources/control-flow/user-interactivity/forms/form-triggers.md#on-focus-change], который реагирует на изменения фокуса в этом виджете.

Валидация​

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

Вы также можете настроить высоту текста ошибки в Properties Panel > Error text height.

Set error text height

Настройка​

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

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

Когда клавиатура открывается по умолчанию, можно вводить только цифры. Но возможно, вы захотите разрешить пользователям вводить как буквы, так и цифры. Для этого выберите виджет PinCode, перейдите в Properties Panel > PinCode Properties > и установите Keyboard Type в Visible Password.

Keyboard Type

Keyboard type: Visible Password

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

Чтобы сделать поле PinCode секретным, перейдите в Properties Panel > Pin Code Properties > и включите Obscure Text. Теперь при вводе значения оно будет скрыто звёздочкой (*). Вы можете изменить этот символ с помощью выпадающего списка Obscuring Character.

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

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

Чтобы установить текст подсказки, перейдите в Properties Panel > Pin Code Properties > включите Hint Text > установите Hint Character.

Автофокус​

При включении это имитирует событие касания и сразу показывает клавиатуру. Это делает виджет PinCode готовым к приёму ввода от пользователей без необходимости нажимать на него. Если вы хотите отключить это поведение, перейдите в Properties Panel > Pin Code Properties > и отключите свойство Auto Focus.

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

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

Auto Fill enabled

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

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

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

  • Start: Разместите поля PIN-кода как можно ближе к началу.
  • Center: Разместите поля PIN-кода как можно ближе к середине.
  • End: Разместите поля PIN-кода как можно ближе к концу.
  • Space Evenly: Равномерно распределите поля PIN-кода.
  • Space Around: Разместите свободное пространство равномерно между полями PIN-кода с дополнительным пространством в начале и конце.
  • Space Between: Разместите свободное пространство равномерно между полями PIN-кода. Чтобы настроить пространство между и вокруг полей PIN-кода, выберите виджет PinCode, перейдите в панель свойств, найдите свойство Pin Code Alignment и выберите один из вариантов выше.

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

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

  1. Выберите виджет PinCode, перейдите в панель свойств, найдите свойство Pin Field Shape и здесь вы можете установить форму в Box, Circle или Underline.
  2. Чтобы изменить высоту и ширину, введите значение в поля Field Height и Field Width.
  3. Чтобы создать скруглённую границу при установке формы Box, используйте свойства Border Radius и Border Width.

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

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

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

Настройка курсора​

Вы можете показать или скрыть курсор с помощью переключателя Show Cursor и изменить цвет с помощью свойства Cursor Color.

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

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