CreditCardForm

Виджет CreditCardForm позволяет пользователям вводить данные кредитной карты, такие как номер карты, срок действия и CVV.

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

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

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

Вот пример, как вы можете добавить виджет CreditCardForm в свой проект:

1. Сначала перетащите виджет CreditCardForm из вкладки Form Elements (на панели виджетов) или добавьте его напрямую из дерева виджетов.
2. При вводе номера карты он маскируется (числа заменяются на •, то есть точки). Чтобы отключить эту функцию и позволить пользователям видеть полный номер, перейдите на панель свойств, найдите переключатель Obscure Card Number и отключите его.

Настройка

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

Маскировка CVV

По умолчанию CVV отображается при вводе. Важно, чтобы вы маскировали его (числа заменяются на •, то есть точки).

Чтобы замаскировать CVV:

1. Выберите виджет CreditCardForm в дереве виджетов или на холсте.
2. Перейдите на панель свойств, найдите переключатель Obscure CVV и включите его.

Добавление цвета фона

Чтобы изменить цвет фона полей:

1. Выберите CreditCardForm в дереве виджетов или на холсте.
2. Перейдите на панель свойств и прокрутите вниз до раздела Input Decoration Properties.
3. Найдите переключатель Fill и включите его.
4. Теперь найдите свойство Fill Color, нажмите на поле рядом с Unset, выберите цвет и нажмите Use Color или нажмите на Unset и введите hex-код напрямую. Вы также можете выбрать цвет, нажав на кнопки Palette и Simple.

Настройка рамки

Чтобы настроить рамку вокруг полей кредитной карты:

1. Выберите CreditCardForm в дереве виджетов или на холсте.
2. Перейдите на панель свойств и прокрутите вниз до раздела Input Decoration Properties.
3. Выберите тип из выпадающего списка Input Border Type.
   1. Выберите Outline, чтобы разместить рамку вокруг всего поля.
   2. Выберите Underline, чтобы разместить рамку только в нижней части поля.
   3. Выберите None, чтобы убрать рамку.
4. Прокрутите немного вниз, чтобы найти свойство Border Color, нажмите на поле рядом с уже выбранным цветом, выберите цвет и нажмите Use Color или нажмите на уже выбранный цвет и введите hex-код напрямую. Вы также можете выбрать цвет, нажав на кнопки Palette и Simple.
5. Найдите ниже свойство Border Width и введите желаемое значение.
6. Теперь перейдите к свойству Border Radius и введите значение 50. По умолчанию значение 50 будет установлено для всех углов: TL (верхний левый), TR (верхний правый), BL (нижний левый) и BR (нижний правый). Нажмите на значок замка, чтобы изменить каждый угол отдельно.

Добавление внутреннего отступа

Внутренний отступ добавляет пространство между текстом поля и рамкой.

Чтобы добавить внутренний отступ:

1. Выберите CreditCardForm в дереве виджетов или на холсте.
2. Перейдите на панель свойств (на правой стороне экрана) и прокрутите вниз до раздела Input Decoration Properties.
3. Найдите свойство Content Padding и введите значения для полей L (левый), T (верхний), R (правый) и B (нижний).

Уменьшение высоты поля

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

Чтобы уменьшить высоту поля:

1. Выберите CreditCardForm в дереве виджетов или на холсте.
2. Перейдите на панель свойств (на правой стороне экрана) и прокрутите вниз до раздела Input Decoration Properties.
3. Найдите переключатель Dense и включите его.