Connect with us

Разработка

Поваренная книга 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) устанавливает желтый цвет фона текстового поля.

Вот как это выглядит с введенным именем:

Поваренная книга SwiftUI: создание текстовых полей в SwiftUI

Использование модификаторов для стилизации текстовых полей SwiftUI.

Улучшение взаимодействия с текстовыми полями

Помимо внешнего вида, можно изменить поведение и взаимодействие с текстовым полем. Например, вы можете отключить автокоррекцию или применить стили автоматической капитализации в зависимости от контекста ввода.

Вы также можете реагировать на определенные действия пользователя, например, когда он отправляет форму, с помощью модификатора 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)
  }
}

Предварительный просмотр должен выглядеть следующим образом:

Поваренная книга SwiftUI: создание текстовых полей в SwiftUI

Используйте представление SecureField в SwiftUI для сбора конфиденциальной информации.

В этом примере $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)
  }
}

Вот как это выглядит в симуляторе:

Поваренная книга SwiftUI: создание текстовых полей в SwiftUI

Используйте модификатор keyboardType, чтобы облегчить пользователю ввод текста.

В приведенном выше коде вы создаете @State переменную с именем cell для получения пользовательского ввода, затем создаете TextField с текстом-заполнителем и привязываете его к cell. Многострочное выравнивание текста (multilineTextAlignment(.center)) располагает представление в центре экрана. Наконец, вы используете .keyboardType с .phonePad, чтобы показать упрощенную цифровую клавиатуру, когда пользователь нажимает на представление.

Вот еще несколько примеров часто используемых типов клавиатуры UIKeyboardType:

  • .default: стандартная клавиатура с полным набором символов
  • .numberPad: цифровая клавиатура с дополнительными математическими символами
  • .emailAddress: клавиатура со специальными символами для ввода адресов электронной почты
  • .webSearch: клавиатура с удобными кнопками для поиска.

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

Примечание: Тип клавиатуры не накладывает ограничений на ввод. Например, использование .emailAddress не проверяет введенную строку как действительный адрес электронной почты. Проверку ввода следует выполнять отдельно.

Метка отправки

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)")
      }
  }
}

Вот как это выглядит в симуляторе:

Поваренная книга SwiftUI: создание текстовых полей в SwiftUI

Используйте модификатор submitLabel, чтобы изменить текст на кнопке отправки на клавиатуре.

В этом примере модификатор submitLabel с переменной .done изменяет клавишу «Return» на отображение «Done». При нажатии она запускает действие onSubmit и печатает введенное имя.

SubmitLabel предоставляет несколько предопределенных меток, представляющих общие действия: .continue, .done, .go, .join, .next, .return, .route, .search и .send.

Использование этих функций позволяет сделать ввод текста в приложениях SwiftUI более интерактивным и удобным.

← Предыдущая статьяТексты и шрифты — часть 2

Источник

Если вы нашли опечатку - выделите ее и нажмите Ctrl + Enter! Для связи с нами вы можете использовать info@apptractor.ru.

Наши партнеры:

LEGALBET

Мобильные приложения для ставок на спорт
Хорошие новости

Telegram

Популярное

Сообщить об опечатке

Текст, который будет отправлен нашим редакторам: