Текстовое поле

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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 (нижний правый). Нажмите на значок замка (), чтобы изменить каждый угол отдельно. Используйте значок обновления, чтобы сбросить значения.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

Возможно, вы добавили виджет 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]. Совет: Вы также можете установить значение по умолчанию, которое будет отображаться, пока пользователь не введет какой-либо текст.

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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