TextField

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

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

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

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

Давайте разберем, как добавить виджет TextField и отобразить его значение в диалоговом окне Alert Dialog.

Вот шаги:

1. Сначала добавьте виджет TextField, перейдите в панель свойств и задайте ему имя.
2. Добавьте виджет Button и при его нажатии добавьте действие Alert Dialog. При добавлении этого действия укажите сообщение From Variable > Widget State > [TextFieldName].

Настройка

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

Изменение ширины

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

Добавление поддержки многострочного ввода/авторасширения

По умолчанию TextField представляет собой одну строку. Таким образом, при вводе длинного текста, который не помещается в одну строку, вы сможете увидеть все сообщение с помощью горизонтальной полосы прокрутки. Вы можете изменить это поведение по умолчанию и отобразить полное сообщение (без горизонтальной полосы прокрутки), сделав TextField многострочным/авторасширяющимся.

Чтобы сделать TextField многострочным/авторасширяющимся, перейдите в Properties Panel > найдите свойства Max Lines и Min Lines.

1. Чтобы TextField автоматически расширялся в пределах, разрешенных родительским элементом, удалите значение Max Lines и установите Min Lines в 1.
2. Чтобы TextField автоматически расширялся до нескольких строк, а затем отображал вертикальную полосу прокрутки для просмотра полного сообщения, установите Max Lines в значение, до которого вы хотите отображать все сообщение (например, 3, 5), и Min Lines в 1.

Установка предзаполненного значения

Возможно, вы захотите отобразить TextField с некоторым начальным значением. Это может быть любое конкретное значение, такое как "What are you looking for", "Input your Email", или значение из любой переменной.

Чтобы установить начальное значение, перейдите в Properties Panel > TextField Properties > Initial Value и введите конкретное значение или Set from Variable.

Добавление подписи

Отображение подписи помогает пользователям понять, что именно нужно ввести в TextField. Если начальное значение не задано, Label Text отобразится в полном размере в TextField. Как только пользователь коснется TextField, Label Text станет меньше, и появится Hint Text.

Чтобы установить подпись, перейдите в Properties Panel > Label Properties > введите Label Text.

Когда TextField установлен в режим многострочного ввода, подпись появляется в центре. Чтобы приблизить ее к подсказке, включите свойство Align Label With Hint.

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

Отображение подсказки помогает пользователям понять, какую информацию нужно ввести в TextField. Например, подсказка "Enter Your Email Here" четко информирует пользователя о необходимости ввести email.

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

Оформление TextField

Различные свойства в разделе Input Decoration Properties позволяют настроить TextField в соответствии с вашим дизайном.

Изменение цвета фона TextField

Чтобы изменить цвет фона, перейдите в Properties Panel > Input Decoration Properties > включите Filled > установите Fill Color.

Добавление рамки

Вот пример, как добавить рамку вокруг TextField:

1. Выберите виджет TextField, перейдите в Properties Panel > Input Decoration Properties > выберите тип рамки Input Border Type.
   1. Выберите Outline, чтобы разместить рамку вокруг всего поля.
   2. Выберите Underline, чтобы разместить рамку только в нижней части поля.
   3. Выберите None, чтобы полностью удалить рамку.
2. Вы также можете установить цвет рамки для различных состояний, таких как Focused или Error. Для этого используйте Border Color, Focused Border Color и Error Border Color.
3. Чтобы увеличить толщину рамки, используйте свойство Border Width.
4. Чтобы создать скругленную рамку, используйте свойство Border Radius. По умолчанию любое введенное значение будет применено ко всем углам: TL (верхний левый), TR (верхний правый), BL (нижний левый) и BR (нижний правый). Нажмите на значок замка, чтобы изменить каждый угол отдельно. Используйте значок обновления, чтобы сбросить значения.

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

Content Padding добавляет пространство между текстом и рамкой вашего TextField.

Чтобы добавить внутренний отступ, перейдите в Properties Panel > Input Decoration Properties > введите значение Content Padding.

Уменьшение высоты TextField

Чтобы уменьшить высоту TextField до минимально возможной, выберите виджет TextField, перейдите в Properties Panel > включите свойство Dense.

Изменение стиля сообщения об ошибке

Вы также можете изменить стиль текста для сообщения об ошибке. Для этого перейдите в Properties Panel > Input Decoration Properties > включите Custom Error Style и измените стиль текста.

Добавление значка

Возможно, вы захотите добавить значок внутри TextField, либо в начале, либо в конце. Вы можете сделать это с помощью свойства Leading и Trailing Icon.

Чтобы добавить ведущий или завершающий значок, перейдите в Properties Panel > найдите свойство Leading и Trailing Icon > Нажмите на кнопку None > выполните поиск и выберите значок.

Вы также можете настроить размер и цвет значка.

Использование TextField для паролей

Чтобы сделать TextField полем для ввода пароля, перейдите в Properties Panel > Additional Properties > включите Password Field.

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

Toggle Hide Password Icon. Вы также можете настроить его размер и цвет.

Очистка TextField

Значок очистки поля внутри TextField позволяет пользователям быстро удалить введенный текст.

Чтобы очистить TextField, перейдите в Properties Panel > Additional Properties > включите Show Clear Field Icon. Вы также можете настроить цвет и размер значка.

Добавление действия очистки текстовых полей/пинов [Action]

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

Следуйте шагам ниже, чтобы добавить это действие к любому виджету.

1. Выберите Widget (например, IconButton, Button и т. д.), к которому вы хотите добавить действие.
2. Выберите Actions в панели свойств (правое меню), нажмите кнопку + Add Action.
3. Выполните поиск и выберите действие Clear Text Fields/Pin Codes (в разделе Widget/UI Interactions).
4. Выберите виджеты TextFields и PinCode, которые вы хотите сбросить.

Автофокус TextField

При автофокусе TextField имитирует событие касания и сразу отображает клавиатуру. Это делает TextField готовым к вводу без необходимости кликать по нему.

Чтобы установить автофокус для TextField, выберите виджет TextField, перейдите в Properties Panel > Additional Properties > включите свойство Autofocus.

Включение интерактивного выделения

Переключатель Enable Interactive Selection управляет тем, могут ли пользователи взаимодействовать с функциями выделения текста, такими как длительное нажатие для выделения, меню копирования/вставки и маркеры выделения.

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

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

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

к сведению

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

Чтобы включить автозаполнение для TextField, выберите виджет TextField, перейдите в Properties Panel > Additional Properties > включите свойство Autocomplete.

Теперь вы можете настроить автозаполнение в разделе Autocomplete Properties. Вот как это сделать:

1. В Autocomplete Options нажмите Add Option и укажите имена элементов, которые вы хотите отобразить в окне предложений.
2. Вы также можете Set from Variable, чтобы отобразить элементы из любой переменной, такой как переменная состояния приложения, ответ API или коллекция Firestore.

к сведению

Если вы Set from Variable и запустите приложение в режиме предварительного просмотра, вы можете попробовать ввести название страны. Список заполнится соответствующими странами.

3. Вы также можете настроить внешний вид окна предложений с помощью свойств, таких как Height, Elevation, Background Color и Highlight Color (выделение текущего выбранного варианта в выпадающем списке).
4. Чтобы настроить стиль текста, отображаемого в выпадающем списке, вы можете использовать Option Text Style и Substring Style (можно использовать для выделения совпадающего текста в имени элемента).

Подсказка для автозаполнения

Когда свойство Auto Fill Hint включено, оно использует службу автозаполнения операционной системы, чтобы предложить пользователю релевантную информацию, такую как имена пользователей, пароли или номера кредитных карт, на основе контекста текстового поля.

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

Чтобы включить свойство Auto Fill Hint:

1. Выберите виджет TextField, перейдите в Properties Panel > Additional Properties > включите свойство Auto Fill Hint.
2. Установите Auto Fill Hint Options в то, что вы хотите предложить в подсказке.

warning

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

Обновление страницы при изменении

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

к сведению

Включение этой функции приведет к обновлению страницы каждый раз, когда пользователь вводит текст в TextField после configurable задержки.

Вот пример отображения значения TextField в виджете Text в реальном времени:

1. Выберите виджет TextField, перейдите в Properties Panel > Additional Properties > включите свойство Update Page On Change.
2. Также установите Update Delay (ms), которое указывает временной интервал после того, как пользователь перестанет печатать, прежде чем страница обновит свой интерфейс. Например, если значение Update Delay (ms) установлено в 2000 мс (2 секунды), страница обновится через 2 секунды после того, как пользователь перестанет печатать. Для этого примера установим 0 мс.
3. Теперь выберите виджет Text, перейдите в Properties Panel > Set from Variable > Widget State > [TextFieldName]. Совет: Вы также можете установить значение по умолчанию, которое будет отображаться, пока пользователь не введет текст.

подсказка

Мы рекомендуем устанавливать значение задержки, если вы выполняете вызов API, который принимает ввод из TextField.

Только для чтения TextField

Иногда вы можете захотеть запретить пользователям вводить или обновлять что-либо в TextField и разрешить это только в режиме редактирования. Вы можете добиться этого, включив свойство Read Only.

Изменение цвета курсора

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

Чтобы изменить цвет курсора, перейдите в Properties Panel > Additional Properties > измените Cursor Color.

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

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

Чтобы изменить тип клавиатуры, выберите виджет TextField, перейдите в Properties Panel > Additional Properties > установите Keyboard Type в нужный.

Маскировка ввода

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

Чтобы замаскировать ввод пользователя, выберите виджет TextField, перейдите в Properties Panel > Additional Properties > установите выпадающий список Mask в нужный.

Если требуемый формат отсутствует в списке, вы можете выбрать Custom и указать Custom Mask. Знак '#' представляет число, а 'A' — букву. Вот несколько примеров Custom Masks:

Ввод	Custom Mask
Номер кредитной карты (например, 3424 4353 5453 3535)	#### #### #### ####
Пользовательская дата (например, 12-Jan-2023)	##-AAA-####

Фильтрация ввода

Возможно, вы захотите ограничить тип символов, которые можно ввести в TextField. Допустим, вы создаете приложение, которое требует от сотрудников ввода их идентификатора сотрудника при отметке времени входа и выхода на смену. Идентификатор сотрудника состоит только из букв и цифр, и приложение должно разрешать ввод только этих символов. Вы можете сделать это, фильтруя ввод пользователя.

Чтобы отфильтровать ввод пользователя, выберите виджет TextField, перейдите в Properties Panel > Additional Properties > установите выпадающий список Filter в нужный.

Проверка ввода

Вы можете проверить значение TextField, обернув его в виджет Form и добавив критерии проверки.

подсказка

Фильтрация гарантирует, что вводятся только разрешенные символы или значения, в то время как проверка анализирует весь ввод данных на соответствие определенным критериям. Обе техники можно использовать вместе или независимо, чтобы обеспечить правильность ввода пользователя в виджете TextField.

Регистр

Возможно, вы захотите контролировать регистр текста при вводе пользователем и при его отображении. Свойство Capitalization позволяет указать, как должен быть приведен к верхнему регистру текст, введенный в TextField.

Это свойство принимает одно из следующих значений:

• None: Это значение означает, что к тексту не применяется капитализация. Все символы отображаются так, как введены.
• Words: Это значение приводит к верхнему регистру первую букву каждого слова в тексте.
• Sentences: Это значение приводит к верхнему регистру первую букву каждого предложения в тексте.
• Characters: Это значение приводит к верхнему регистру каждый символ в тексте.

Чтобы установить капитализацию, выберите виджет TextField, перейдите в Properties Panel > Additional Properties > установите выпадающий список Capitalization в нужный.

Тип отправки

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

Это свойство принимает одно из следующих значений:

• Done: Это закрывает клавиатуру.
• Next: Это перемещает фокус на следующее поле.
• Previous: Это перемещает фокус на предыдущее поле.
• Send: Это представляет действие Отправки.
• Search: Это представляет действие Поиска.
• Go: Это представляет действие Перехода.

Чтобы установить тип отправки, выберите виджет TextField, перейдите в Properties Panel > Additional Properties > установите выпадающий список Submit Type в нужный.

Установка максимальной длины символов

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

Например, когда пользователи могут оставлять комментарии или публиковать сообщения (аналогично 'tweet'), установка максимальной длины символов может помочь предотвратить спам или чрезмерно длинные ответы.

Чтобы установить максимальный лимит символов, выберите виджет TextField, перейдите в Properties Panel > Additional Properties > установите Max Length (количество символов, которое вы хотите разрешить) и установите Max Length Enforcement в одно из следующих значений:

• Not Enforced: Это позволяет пользователям вводить дополнительные символы и отображает предупреждение при превышении лимита.
• Enforced: Это всегда обрезает любые дополнительные символы после достижения лимита.

к сведению

Вы также можете скрыть счетчик максимального количества символов, включив опцию Hide Max Length Counter.

Скрытие клавиатуры при касании

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

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

Чтобы скрыть/закрыть клавиатуру, выберите страницу, перейдите в Properties Panel > включите Hide Keyboard on Tap.

Событие изменения фокуса

Иногда вам может понадобиться знать, используется ли TextField или нет. Например, вы можете включать или выключать другие части приложения в зависимости от того, активен ли TextField. Также вы можете запускать анимации, когда кто-то начинает или прекращает печатать в TextField.

Давайте разберем пример управления видимостью виджета Text на основе состояния фокуса TextField.

Для этого:

1. На виджете Text добавьте условную видимость на основе состояния фокуса TextField. Вы можете получить доступ через меню Set from Variable > Widget Focus State > [TextField name].
2. Теперь на виджете TextField в обратном вызове On Focus Change просто добавьте действие для обновления страницы, добавив переменную состояния приложения.

Запуск действия / Обратный вызов

Виджет TextField предоставляет два типа действий (он же обратные вызовы):

1. On Submit: Действия под этим будут запущены, когда вы закончите ввод текста в виджете TextField. т. е. нажатие кнопки done внутри мягкой клавиатуры.
2. On Change: Действия под этим запустятся, когда вы введете или удалите символ в виджете TextField.
3. On Focus Change: Действия под этим запустятся, когда изменится состояние фокуса на TextField. Это означает, когда пользователи кликают по нему для ввода или кликают вне его.

warning

Будьте осторожны при добавлении действий под On Change. В частности, избегайте добавления любых действий, которые займут много времени.

On Submit

On Change

On Focus Change

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

1. Выберите виджет TextField из дерева виджетов или области холста.
2. Выберите Actions в панели свойств (правое меню) и нажмите + Add Action.
3. Выберите Type of Action среди On Submit, On Change, и On Focus Change.
4. Теперь вы можете добавить любое действие здесь.

---

Видеоролик

Если вы предпочитаете просматривать видеоурок, вот он для вас: