Пин код

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

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

• Сначала нажмите на + Добавить виджет, перетащите виджет PinCode из вкладки Базовые элементы или добавьте его непосредственно из дерева виджетов. Это добавит самую базовую версию виджета PinCode, позволяющую ввести до четырех значений.
• Чтобы увеличить длину пина (количество значений, которые могут вводить пользователи), перейдите на панель свойств, найдите свойство Pin Length и введите значение. Примечание: Вы можете установить значение только до 8.
• Если вы используете этот виджет для получения секретного PIN-кода от пользователей, вы можете скрыть его специальным символом. Для этого включите переключатель Obscure Text и выберите скрывающий символ среди *,-,? и -.
• Вы также можете включить/выключить тумблер «Текст подсказки» и выбрать символ подсказки, отображаемый, когда вы ничего не ввели.
• По умолчанию этот виджет установлен в режим автофокуса, то есть он готов принимать от вас ввод без необходимости нажатия на него.

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

Для этого:

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

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

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

Для этого:

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

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

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

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

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

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

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

• Start (): Расположить поля пин-кода как можно ближе к началу.
• Центр (): Расположить поля пин-кода как можно ближе к середине.
• Конец (): Разместите поля пин-кода как можно ближе к концу.
• Равномерно (): Равномерное размещение полей пин-кода.
• Space Around (): Равномерно разместите свободное пространство между полями пин-кода с некоторым дополнительным пространством в начале и конце.
• Space Between (): Равномерное размещение свободного пространства между полями пин-кода.

Чтобы настроить пространство между полями пин-кода и вокруг них, выберите виджет PinCode, перейдите на панель свойств, найдите свойство Pin Code Alignment и выберите один из вышеперечисленных вариантов.

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

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

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

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

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

Посмотрите, как можно изменить стиль текста.