Site icon AppTractor

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

AppTractor

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.

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

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

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

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

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

В этом примере $password представляет собой @State переменную, в которой хранятся данные, введенные пользователем.

Вот что происходит в приведенном выше коде:

Используя 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)
  }
}

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

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

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

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

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

Примечание: Тип клавиатуры не накладывает ограничений на ввод. Например, использование .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)")
      }
  }
}

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

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

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

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

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

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

Источник

Exit mobile version