Поваренная книга SwiftUI: состояние, привязка, ObservableObject и ObservedObject

Понимание состояния и привязки в SwiftUI

Состояние (state) и привязка (binding) — две фундаментальные концепции в SwiftUI, которые позволяют создавать динамичные и интерактивные интерфейсы. Их понимание — ключ к эффективному управлению состоянием пользовательского интерфейса.

Что такое состояние

В SwiftUI состояние — это обертка свойства, которая используется для хранения простых значений, принадлежащих определенному представлению и изменяющихся с течением времени. Когда значение State изменяется, представление аннулирует свой внешний вид и пересчитывает свойство body. Это означает, что SwiftUI автоматически перерисовывает представление при изменении состояния.

Рассмотрим следующий пример, который управляет состоянием представления Toggle:

struct ContentView: View {
  @State private var isSwitchedOn = false

  var body: some View {
    VStack {
      Toggle(isOn: $isSwitchedOn) {
        Text("Turn me on or off")
      }
      if isSwitchedOn {
        Text("The switch is on!")
      }
    }
    .padding()
  }
}

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

Используйте обертку свойства State для управления данными, локальными для одного представления.

В приведенном выше примере isSwitchedOn — это State свойство, которое отслеживает, включен или выключен тумблер. Когда тумблер переключается, isSwitchedOn изменяется, заставляя представление перерисовываться и обновлять отображаемый текст.

Понимание привязки

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

Рассмотрим следующий пример:

struct ContentView: View {
  @State private var selectedColor = Color.red

  var body: some View {
    VStack {
      Rectangle()
        .fill(selectedColor)
        .frame(width: 100, height: 100, alignment: .center)

      ColorPickerView(selectedColor: $selectedColor)
    }
    .padding()
  }
}

struct ColorPickerView: View {
  @Binding var selectedColor: Color

  let colors: [Color] = [.red, .green, .blue, .yellow, .orange]

  var body: some View {
    HStack {
      ForEach(colors, id: \.self) { color in
        Rectangle()
          .fill(color)
          .frame(width: 50, height: 50)
          .onTapGesture {
            selectedColor = color
          }
      }
    }
  }
}

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

Привязки обеспечивают бесшовное взаимодействие между представлениями.

В этом примере у вас есть ContentView, содержащий прямоугольник, цвет заливки которого определяется состоянием selectedColor. У вас также есть ColorPickerView, который принимает привязку к selectedColor. Когда цвет в ColorPickerView нажимается, он обновляет selectedColor, который затем изменяет цвет заливки прямоугольника в ContentView. Это возможно благодаря двусторонней связи, созданной привязкой — ColorPickerView не только считывает значение selectedColor, но и имеет возможность изменять его.

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

Понимание ObservableObject и ObservedObject

В SwiftUI управление состоянием, разделяемым между несколькими представлениями, требует инструментов, выходящих за рамки обертки свойства State. Именно здесь в игру вступают ObservableObject и ObservedObject.

ObservableObject — это протокол, который SwiftUI предоставляет для объектов, за которыми можно наблюдать на предмет изменений. Когда вы помечаете класс как соответствующий ObservableObject, вы сигнализируете SwiftUI, что свойства этого объекта при изменении должны вызывать обновление всех представлений, которые от них зависят. Любые свойства, помеченные @Published в ObservableObject, будут автоматически уведомлять представление о необходимости обновления при их изменении.

Давайте посмотрим на это в действии:

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

struct ContentView: View {
  @ObservedObject var settings = UserSettings()

  var body: some View {
    VStack {
      Text("Hello, \(settings.username)!")
      Button("Change Username") {
        settings.username = "John Doe"
      }
    }
  }
}

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

Использование оберток свойств ObservableObject и Published.

В этом примере UserSettings является объектом ObservableObject. У него есть свойство username, помеченное @Published, что означает, что любые изменения в имени пользователя будут уведомлять наблюдателей.

ContentView наблюдает за UserSettings через обертку свойства @ObservedObject. Когда нажимается кнопка, она изменяет свойство username в настройках, что, в свою очередь, заставляет ContentView обновляться и отображать новое имя пользователя.

Такое взаимодействие между ObservableObject и ObservedObject является основополагающим для управления общим состоянием различных представлений в SwiftUI. Оно позволяет вам создать источник истины для ваших данных, которые затем могут быть замечены и использованы любой частью вашего приложения.

В следующих статьях вы узнаете о других инструментах управления состоянием, предоставляемых SwiftUI, и о том, как они взаимодействуют с ObservableObject и ObservedObject.

← Предыдущая статья: Добавление кастомной формы к представлению SwiftUI

Источник