The Оригинальное название: Swiftui for Разработчики IOS

• — устанавливает стиль шрифта
• — изменение цвета текста
• — добавляет по умолчанию набивку вокруг вида
• — заполняет фон цветом
• — обводит углы формы или изображения
• — добавляет капельную тень

Модификаторы могут применяться в любом порядке, но порядок имеет значение, потому что каждый модификатор обертывает предыдущий вид. Например, сначала накладывает содержимое, а затем рисует фон, в результате чего вокруг мягкой области образуется красный прямоугольник. Обратите порядок и вы получите красный фон с текстом внутри, без дополнительной набивки.

Контейнеры для макета: VStack, HStack, ZStack

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

• VStack — устраивает детей вертикально (сверху вниз)
• HStack — устраивает детей горизонтально (слева направо)
• ZStack — накладывает детей друг на друга (глубокий порядок)

Вы можете произвольно вставлять стеки для создания сложных макетов. Каждый стек также поддерживает параметры и . Например:

VStack(alignment: .leading, spacing: 20) {
 Text("Top")
 HStack {
 Text("Left")
 Text("Right")
 }
 ZStack {
 Color.blue
 Text("Overlay")
 .foregroundColor(.white)
 }
 .frame(height: 100)
}

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

Управление государством в SwiftUI

Одна из самых мощных функций SwiftUI — это то, как он обрабатывает динамические данные. Вместо ручного обновления пользовательского интерфейса при изменении данных вы объявляете данные как состояние , и SwiftUI автоматически переоформляет затронутые представления. Это устраняет целый класс ошибок, связанных с синхронизацией пользовательского интерфейса.

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

Использование @State для местного государства

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

struct ToggleExample: View {
 @State private var isOn = false

 var body: some View {
 Toggle("Enable Notifications", isOn: $isOn)
 .padding()
 }
}

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

@Binding for Passing State Down (недоступная ссылка)

Когда вид ребенка должен изменить состояние, принадлежащее родителю, вы используете . Ребенок получает привязку к значению и может изменить его, а вид родителя обновляется автоматически.

struct ParentView: View {
 @State private var showSheet = false

 var body: some View {
 ChildView(showSheet: $showSheet)
 }
}

struct ChildView: View {
 @Binding var showSheet: Bool

 var body: some View {
 Button("Toggle Sheet") {
 showSheet.toggle()
 }
 }
}

Связывания — это клей, который соединяет взгляды в иерархии без введения сложных делегированных или обратных шаблонов.

Наблюдаемые объекты и @StateObject

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

class UserSettings: ObservableObject {
 @Published var username = "Guest"
}

struct SettingsView: View {
 @StateObject private var settings = UserSettings()

 var body: some View {
 VStack {
 Text("Hello, \(settings.username)")
 TextField("Username", text: $settings.username)
 .textFieldStyle(RoundedBorderTextFieldStyle())
 .padding()
 }
 }
}

Используйте только при инициализации объекта в этом представлении.Если объект создан в другом месте, используйте , чтобы наблюдать его, не принимая на себя ответственность.

@EnvironmentОбъект для общего государства

Когда вам нужно вставить один и тот же наблюдаемый объект во многие виды, не пропуская его через каждый инициализатор, используйте . Во-первых, создайте объект в родительском виде (например, точку входа в приложение) и введите его с помощью модификатора . Любой вид потомка может затем получить к нему доступ, объявив свойство с . Это особенно полезно для данных в масштабе приложения, таких как аутентификация пользователя или настройки.

@main
struct MyApp: App {
 @StateObject private var settings = UserSettings()

 var body: some Scene {
 WindowGroup {
 ContentView()
 .environmentObject(settings)
 }
 }
}

struct DetailView: View {
 @EnvironmentObject var settings: UserSettings

 var body: some View {
 Text(settings.username)
 }
}

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

import Foundation

struct Note: Identifiable {
 let id = UUID()
 var title: String
 var content: String
}

struct ContentView: View {
 @State private var notes = [
 Note(title: "Hello", content: "This is my first note.")
 ]

 var body: some View {
 NavigationStack {
 List {
 ForEach(notes) { note in
 NavigationLink(destination: NoteDetailView(note: note)) {
 Text(note.title)
 }
 }
 .onDelete(perform: removeNote)
 }
 .navigationTitle("Notes")
 .toolbar {
 ToolbarItem(placement: .navigationBarTrailing) {
 Button(action: addNote) {
 Image(systemName: "plus")
 }
 }
 }
 }
 }

 private func addNote() {
 notes.append(Note(title: "New Note", content: ""))
 }

 private func removeNote(at offsets: IndexSet) {
 notes.remove(atOffsets: offsets)
 }
}

struct NoteDetailView: View {
 let note: Note

 var body: some View {
 VStack(alignment: .leading, spacing: 16) {
 Text(note.title)
 .font(.title)
 Text(note.content)
 .font(.body)
 .foregroundColor(.secondary)
 Spacer()
 }
 .padding()
 .navigationTitle("Note")
 }
}

struct ContentView_Previews: PreviewProvider {
 static var previews: some View {
 Group {
 ContentView()
 .previewDevice("iPhone 15 Pro")
 ContentView()
 .previewDevice("iPhone SE (3rd generation)")
 }
 }
}

Для того, чтобы узнать больше о SwiftUI, проверьте этот гид от Swift с Маджидом .

Следующие шаги и ресурсы

Теперь у вас есть прочная основа в SwiftUI. Чтобы продолжить обучение и создавать более продвинутые приложения: