Основы Swift: Состояние, Привязка и Предварительный просмотр

Вопрос или проблема

import SwiftUI

@main
struct BinnderApp: App {
    @State private var appModel: Model = Model(value: 42)
    
    var body: some Scene {
        WindowGroup {
            ContentView(myModel: $appModel)
        }
    }
}

struct Model {
    var value: Int
    
    mutating func increment() {
        value += 1
    }
}

import SwiftUI

struct ContentView: View {
    @Binding var myModel: Model
    
    var body: some View {
        VStack {
            Button("вверх!!") {
                myModel.increment()
            }
            Text("значение равно \(myModel.value)")
        }
    }
}

#Preview {
    //  @Binding var myModel: Model = Model(value: 0). //. это была проблема
    @Previewable @State var myModel: Model = Model(value: 0) //  решение!
    ContentView(myModel: $myModel)
}

Ответ или решение

Основы Swift: State, Binding и Preview

В этой статье мы обсудим основные концепции, связанные с использованием @State, @Binding и Preview в SwiftUI. Эти аспекты являются ключевыми для управления состоянием и данных в интерфейсе на SwiftUI, и понимание их поможет вам более эффективно разрабатывать приложения.

Понимание @State и @Binding

В вашем коде вы определили приложение с использованием @State и @Binding. Давайте более детально разберём, как каждый из этих атрибутов работает.

@State

@State – это свойство, которое представляет собой источник прав на данные внутри структуры SwiftUI View. Когда состояние изменяется, SwiftUI автоматически обновляет интерфейс. В вашем случае:

@State private var appModel: Model = Model(value: 42)

Здесь appModel хранит объект модели типа Model, который инициализируется со значением 42. Это состояние будет локальным для вашего BinnderApp.

@Binding

@Binding используется для создания двусторонней связи между состоянием и пользовательским интерфейсом. Это означает, что когда вы обновляете Binding в дочернем представлении, изменения автоматически отразятся в родительском представлении. Далее в вашем коде:

struct ContentView: View {
    @Binding var myModel: Model

    var body: some View {
        VStack {
            Button("up!!") {
                myModel.increment() // Обновляем значение модели
            }
            Text("the value is \(myModel.value)")
        }
    }
}

Здесь myModel является связкой, и когда вы вызываете increment(), происходит изменение состояния, которое обновляет текст на экране.

Проблема с @Preview

В секции #Preview возникает ошибка при попытке создать привязку из обычного свойства, так как @Binding ожидает получать данные от @State. Ваша первоначальная попытка:

@Previewable @State var myModel: Model = Model(value: 0) //  решение!

была правильной, так как это позволяет использовать @State для создания состояния, которое затем может быть передано в ContentView. Связка $myModel создается автоматически, что делает её доступной для использования как в ContentView, так и в BinnderApp.

Итог

Ваш код демонстрирует основные принципы работы с состоянием и привязками в SwiftUI. Использование @State позволяет управлять локальным состоянием, в то время как @Binding создает двустороннюю связь между родительским и дочерними представлениями. Применение этих концепций в сочетании с правильным использованием предосмотра (#Preview) позволяет эффективно отлаживать и тестировать интерфейсы.

Если вы хотите продолжить изучение SwiftUI, рекомендуем обратить внимание на следующие аспекты:

1. Модели данных: Изучите, как создавать и управлять сложными моделями данных.
2. Управление состоянием приложения: Ознакомьтесь с использованием @ObservedObject и @EnvironmentObject для более сложных случаев.
3. Больше примеров: Практикуйтесь с реальными приложениями, чтобы укрепить свои знания и навыки.

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