Руководство по работе с текстом в SwiftUI

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

Мы рассмотрим два основных типа текста: простое отображение обычного текста, который является статичным для приложения. А также текстовые поля, в которых пользователю предлагается разместить текстовое содержимое.

Как отобразить текст в SwiftUI

Для отображения текста с помощью SwiftUI есть класс Text:

struct ContentView: View {
    var body: some View {
        VStack{
            Text("Hello World")
        }
     }
}
Code language: JavaScript (javascript)

Таким образом, мы получаем следующий результат:

Варианты офоормления текстов

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

Метод FontWeight()

С помощью этой функции мы можем выделить текст жирным шрифтом или изменить его толщину:

Text("Hello World").fontWeight(.bold)
Code language: CSS (css)

Метод italic(): отображение текста курсивом

Для этого мы используем функцию курсива:

Text("Hello World").italic()
Code language: JavaScript (javascript)

Метод Font()

С помощью этой функции мы можем указать тип текста или размер, используя предопределенные параметры, такие как заголовок, body и т.д.:

Text("Hello World").font(.headline)
Code language: CSS (css)

Метод underline()

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

Text("Hello World").underline()
Code language: JavaScript (javascript)

Метод baselineOffset

С помощью этой опции мы можем определить расстояние между текстом и другим содержимым:

VStack{
       Text("Hello World").baselineOffset(100.0)
       Text("Hello World")
}
Code language: JavaScript (javascript)

Дополнительные функции для работы с текстом

Есть много других функций, которые можно использовать с текстом. Например, background для изменения цвета фона, multilineTextAlignment для указания выравнивания и даже расстояния между буквами с помощью lineSpacing. У нас также есть еще одна для указания расстояния между символами с помощью kerning.

Ввод текста

Ввод текста

Чтобы получать тексты от пользователя с помощью текстовых полей или вставлять их в HTML, мы можем использовать следующие функции, которые позволяют нам строить подобные блоки:

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

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

Переменные состояния

Чтобы использовать значения, вы должны объявить эти свойства как состояния. Тогда SwiftUI будет знать, что эти свойства могут быть установлены на эти типы полей.

@State var password = ""
    @State var user = ""
    var body: some View {
        VStack{
            TextField("Пользователь", text: $user)
                .foregroundColor(.red)
                .padding()
            Text("Имя пользователя: \(user)")
                .foregroundColor(.red)
                .italic()
            SecureField("Пароль", text: $password)
                .foregroundColor(/*@START_MENU_TOKEN@*/.blue/*@END_MENU_TOKEN@*/)
                .padding()
            Text("Введенный пароль: \(password)")
                .foregroundColor(/*@START_MENU_TOKEN@*/.blue/*@END_MENU_TOKEN@*/)
                .italic()
        }
    }
Code language: PHP (php)