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

тек 1

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

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

тек 2

Ниже приведены шаги:

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

Настройка

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

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

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

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

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

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

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

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

Вы можете захотеть отобразить текстовое поле с некоторым начальным значением. Это может быть любое конкретное значение, например, «Что вы ищете», «Введите ваш Email» или значение из любой переменной.

Чтобы установить начальное значение, перейдите на панель свойств > Свойства текстового поля > Начальное значение и введите конкретное значение или Установить из переменной.

тек 5

Стилизация текста

Посмотрите, как придать тексту стиль.

Изменение высоты строки

Узнайте, как изменить высоту строки.

Настройка расстояния между буквами

Узнайте, как настроить расстояние между буквами.

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

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

Чтобы установить метку, перейдите на панель свойств > Свойства метки > введите текст метки.

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

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

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

Чтобы задать текст подсказки, перейдите на панель свойств > Свойства подсказки > введите текст подсказки.

Чтобы изменить стиль подсказки, включите переключатель Custom Hint Style и измените его в соответствии с инструкциями, приведенными здесь.
тек 7

Украшение текстового поля

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

Изменение цвета фона текстового поля

Чтобы изменить цвет фона, перейдите на панель свойств > Свойства оформления ввода > включите Заливка > установите Цвет заливки.

тек 8

Добавление границы

Вот пример того, как можно добавить границу вокруг текстового поля:

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

Добавление подкладки содержимого

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

Чтобы добавить подложку для содержимого, перейдите на панель свойств > Свойства оформления ввода > введите значение Content Padding.

тек 10

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

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

тек 11

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

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

Чтобы добавить значок в начало или конец поля, перейдите на панель свойств > найдите свойство Leading and Trailing Icon > нажмите на кнопку None > найдите и выберите значок.

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

тек 12

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

Чтобы сделать TextField полем пароля, перейдите на панель свойств > Дополнительные свойства > включите поле пароля.

Когда вы введете пароль, он будет скрыт точкой (-). Вы можете увидеть и подтвердить введенный пароль, нажав на значок Скрыть пароль (). Вы также можете настроить его размер и цвет.

тек 13

Очистить текстовое поле

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

Чтобы очистить текстовое поле, перейдите на панель свойств > Дополнительные свойства > включите опцию Показывать значок чистого поля. Вы также можете настроить цвет и размер значка.

тек 14

Очистить текстовое поле

Когда вы автофокусируете текстовое поле, оно имитирует событие касания и немедленно отображает клавиатуру.

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

тек 15

Автозаполнение текстового поля

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

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

Чтобы автозаполнить текстовое поле, выберите виджет TextField, перейдите на панель свойств > Дополнительные свойства > включите свойство Автозаполнение.

Теперь вы можете настроить автозаполнение с помощью раздела Свойства автозаполнения. Вот как это делается:

  1. В разделе Параметры автозаполнения нажмите Добавить параметр и укажите названия элементов, которые вы хотите видеть в окне предложений.
  2. Вы также можете установить параметр Set from Variable, чтобы показывать элементы из любой переменной, например, локальной переменной состояния, ответа API или коллекции Firestore.
Если вы установите приложение «Переменная» и запустите его в режиме предварительного просмотра, вы можете попробовать ввести название страны. Список будет заполнен подходящими странами.
тек 16

3.Вы также можете настроить внешний вид окна предложений с помощью таких свойств, как Высота, Высота, Цвет    фона и Цвет подсветки (выделение текущего выбранного варианта в выпадающем списке).
4.Для стилизации текста, отображаемого внутри выпадающего списка, можно использовать стиль текста опции и стиль подстроки (можно использовать для выделения совпадающего текста в имени элемента).

тек 17

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

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

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

Чтобы включить свойство подсказки автозаполнения:

  • Выберите виджет TextField, перейдите на панель свойств > Дополнительные свойства > включите свойство Auto Fill Hint.
  • Установите параметр Auto Fill Hint Options (Параметры подсказки при автозаполнении) на то значение, которое вы хотите указать в подсказке.
Доступность и поведение подсказки автозаполнения может зависеть от платформы и настроек пользователя, и это не гарантирует, что служба автозаполнения операционной системы предложит пользователю правильную информацию.
тек 18

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

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

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

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

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

Текстовое поле только для чтения

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

тек 19

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

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

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

тек 22
тек 21

Маскировка вводимых данных

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

Чтобы замаскировать пользовательский ввод, выберите виджет TextField, перейдите на панель свойств > Дополнительные свойства > установите в выпадающем списке Маска нужный вам формат.

Если нужного формата нет в списке, вы можете выбрать Custom и указать Custom Mask. Знак ‘#’ обозначает число, а ‘A’ — букву. Вот несколько примеров пользовательских масок:

тек 23

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

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

\Чтобы отфильтровать вводимые пользователем данные, выберите виджет TextField, перейдите на панель свойств > Дополнительные свойства > установите нужный вам фильтр.

Чтобы проверить вводимые пользователем данные на соответствие определенным критериям или требованиям (например, электронной почте), см. шаг 3 о том, как добавить валидацию.
тек 24

Валидация ввода

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

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

Капитализация

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

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

  • Нет: Это значение означает, что к тексту не должна применяться капитализация. Все символы будут отображаться так, как они набраны.
  • Слова: При этом значении первая буква каждого слова в тексте выделяется заглавными буквами.
  • Предложения: В этом значении первая буква каждого предложения в тексте пишется заглавными буквами.
  • Символы: Это значение выделяет заглавными буквами каждый символ в тексте.

Чтобы установить капитализацию, выберите виджет TextField, перейдите на панель свойств > Дополнительные свойства > установите в выпадающем списке Капитализация нужное вам значение.

тек 25

Показать/скрыть виджет

Узнайте, как добавить подложку и выравнивание к любому виджету.

Отзывчивая видимость

Узнайте, как добавить отзывчивую видимость к любому виджету.

Добавить отступы и выравнивание

Узнайте, как добавить подложку и выравнивание к любому виджету.

Динамическая установка цвета

Узнайте, как установить цвет из переменной в любое свойство цвета этого виджета.

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

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

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

тек 26

Чтобы скрыть/закрыть клавиатуру, выберите страницу, переместите панель свойств > включите опцию Скрыть клавиатуру при касании.

тек 27

Отображение данных Firestore

Чтобы отобразить данные, извлеченные из коллекции Firestore, и документ в виджете TextField, убедитесь, что вы:

  • Понимаете структурирование базы данных Firebase.
  • Выполнили все шаги в разделе «Настройка Firebase» для вашего проекта.
  • Извлекли данные из коллекции или документа.
  • Наконец, чтобы отобразить данные в виджете TextField, выполните следующие шаги.

Trigger action

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

  1. On Submit: Действия в этом случае срабатывают, когда вы завершаете ввод текста в виджете TextField, т.е. нажимаете кнопку «Готово» на мягкой клавиатуре.
  2. On Change (При изменении): Действия под этим пунктом будут выполняться всякий раз, когда вы вводите или удаляете символ в виджете TextField.
Совет: Фильтрация обеспечивает ввод только разрешенных символов или значений, в то время как валидация проверяет все вводимые данные на соответствие определенным критериям. Обе техники можно использовать вместе или независимо друг от друга для обеспечения правильности ввода данных пользователем в виджете TextField.
тек 28

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

  1. Выберите виджет TextField в дереве виджетов или в области холста.
  2. Выберите Действия на панели свойств (правое меню) и нажмите + Добавить действие.
  3. Выберите тип действия среди вариантов On Submit и On Change.
  4. Теперь вы можете добавить сюда любое действие.
тек 29