Разработка
Поваренная книга SwiftUI: создание текстовых полей в SwiftUI
Использование этих функций позволяет сделать ввод текста в приложениях SwiftUI более интерактивным и удобным.
TextField
в SwiftUI — это универсальный элемент, используемый для получения текстового ввода от пользователя. Вы создаете TextField
, предоставляя строку-заполнитель (placeholder), которая отображается, когда поле пустое, и привязку к переменной, в которой будет храниться вводимый текст.
Вот простой пример:
struct ContentView: View { @State private var name = "" var body: some View { TextField("Enter your name", text: $name) .multilineTextAlignment(.center) } }
В этом примере "Enter your name"
служит текстом-заполнителем, а text: $name
создает двустороннюю привязку к переменной состояния name
. Это означает, что любой текст, введенный пользователем в текстовое поле, будет сохранен в переменной name
. Модификатор multilineTextAlignment
используется для центрирования текста в текстовом поле.
Настройка внешнего вида текстового поля
Стилизация текстового поля может значительно улучшить пользовательский опыт. SwiftUI предоставляет различные модификаторы вида для настройки, включая шрифт, цвет переднего плана и цвет фона.
Вот пример, который настраивает эти свойства:
struct ContentView: View { @State private var name = "" var body: some View { TextField("Enter your name", text: $name) .foregroundColor(.blue) .background(.yellow) .font(.largeTitle) .multilineTextAlignment(.center) } }
В этом фрагменте .font(.largeTitle)
изменяет шрифт текста на стиль крупного заголовка, .foregroundColor(.blue)
изменяет цвет текста на синий, а .background(.yellow)
устанавливает желтый цвет фона текстового поля.
Вот как это выглядит с введенным именем:
Улучшение взаимодействия с текстовыми полями
Помимо внешнего вида, можно изменить поведение и взаимодействие с текстовым полем. Например, вы можете отключить автокоррекцию или применить стили автоматической капитализации в зависимости от контекста ввода.
Вы также можете реагировать на определенные действия пользователя, например, когда он отправляет форму, с помощью модификатора onSubmit
. Он запускает предусмотренное замыкание, когда пользователь выполняет действие по умолчанию, например, нажимает клавишу return на клавиатуре.
Подробнее о TextField
читайте в разделе «Текстовый ввод в SwiftUI» этом руководстве.
Создание защищенного поля в SwiftUI
При создании форм в SwiftUI вам может понадобиться собирать конфиденциальную информацию от пользователей, например пароль или PIN-код. Чтобы создать защищенное текстовое поле, скрывающее этот ввод от посторонних глаз, можно использовать представление SecureField
.
Чтобы создать защищенное поле с заполнителем, можно просто передать текст заполнителя в качестве параметра:
struct ContentView: View { @State private var password = "" var body: some View { SecureField("Enter your password", text: $password) .textContentType(.password) .padding() .background(RoundedRectangle(cornerRadius: 5).stroke()) .multilineTextAlignment(.center) } }
Предварительный просмотр должен выглядеть следующим образом:
В этом примере $password
представляет собой @State
переменную, в которой хранятся данные, введенные пользователем.
Вот что происходит в приведенном выше коде:
@State private var password = ""
создает@State
переменную под названиемpassword
для привязки к представлению и хранения вводимых пользователем данных.SecureField("Enter your password", text: $password)
создает представление защищенного поля, устанавливает текст-заполнитель, который будет отображаться перед тем, как пользователь начнет вводить данные, и привязывает поле к переменной состоянияpassword
..textContentType(.password)
указывает iOS, что это поле пароля, что может помочь в автозаполнении и управлении связками ключей пользователя..padding()
добавляет немного пространства вокруг представления..background(RoundedRectangle(cornerRadius: 5).stroke())
делает представление более красивым..multilineTextAlignment(.center)
центрирует вид.
Используя SecureField
для ввода паролей, вы можете гарантировать, что конфиденциальная информация останется скрытой от посторонних глаз, обеспечивая при этом привычный и простой ввод для пользователей.
Настройка типа клавиатуры для текстового поля в SwiftUI
Одним из преимуществ использования TextField в SwiftUI является возможность настраивать виртуальную клавиатуру, представляемую пользователю. Эта функция улучшает пользовательский опыт, показывая только наиболее подходящие символы для данного поля ввода.
Тип клавиатуры
Вы можете указать тип виртуальной клавиатуры с помощью модификатора keyboardType
в представлении TextField
. Например, чтобы отобразить клавиатуру, оптимизированную для ввода телефонных номеров.
Вот как отобразить клавиатуру, оптимизированную для ввода телефонных номеров:
struct ContentView: View { @State private var cell = "" var body: some View { TextField("Enter your cell number", text: $cell) .multilineTextAlignment(.center) .keyboardType(.phonePad) } }
Вот как это выглядит в симуляторе:
В приведенном выше коде вы создаете @State
переменную с именем cell
для получения пользовательского ввода, затем создаете TextField
с текстом-заполнителем и привязываете его к cell
. Многострочное выравнивание текста (multilineTextAlignment(.center)
) располагает представление в центре экрана. Наконец, вы используете .keyboardType
с .phonePad
, чтобы показать упрощенную цифровую клавиатуру, когда пользователь нажимает на представление.
Вот еще несколько примеров часто используемых типов клавиатуры UIKeyboardType
:
.default
: стандартная клавиатура с полным набором символов.numberPad
: цифровая клавиатура с дополнительными математическими символами.emailAddress
: клавиатура со специальными символами для ввода адресов электронной почты.webSearch
: клавиатура с удобными кнопками для поиска.
Убедитесь, что выбранный тип клавиатуры соответствует ожидаемому пользовательскому вводу, чтобы избежать путаницы.
Метка отправки
SwiftUI предоставляет структуру SubmitLabel
для текстового описания действия отправки в иерархии представлений. Эти метки изменяют внешний вид клавиши «Return» на виртуальной клавиатуре, чтобы лучше соответствовать ожидаемому действию, предоставляя пользователям четкую визуальную подсказку.
struct ContentView: View { @State private var name = "" var body: some View { TextField("Enter your name", text: $name) .keyboardType(.default) .submitLabel(.done) .onSubmit { print("Name entered: \(name)") } } }
Вот как это выглядит в симуляторе:
В этом примере модификатор submitLabel
с переменной .done
изменяет клавишу «Return» на отображение «Done». При нажатии она запускает действие onSubmit
и печатает введенное имя.
SubmitLabel
предоставляет несколько предопределенных меток, представляющих общие действия: .continue
, .done
, .go
, .join
, .next
, .return
, .route
, .search
и .send
.
Использование этих функций позволяет сделать ввод текста в приложениях SwiftUI более интерактивным и удобным.
← Предыдущая статья: Тексты и шрифты — часть 2
-
Интегрированные среды разработки2 недели назад
Лучшая работа с Android Studio: 5 советов
-
Новости4 недели назад
Видео и подкасты о мобильной разработке 2024.43
-
Новости3 недели назад
Видео и подкасты о мобильной разработке 2024.44
-
Исследования2 недели назад
Поможет ли новая архитектура React Native отобрать лидерство у Flutter в кроссплатформенной разработке?