Поваренная книга 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)
  }
}

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

xxxxxxxxxx

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

xxxxxxxxxx

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 переменную, в которой хранятся данные, введенные пользователем.

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

• @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)
  }
}

xxxxxxxxxx

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:

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

xxxxxxxxxx

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

Источник