SwiftUI ma’lumotlar oqimi


ULASHISH

SwiftUI ma’lumotlar oqimi

State’ni (holatni) @State va @Binding bilan boshqaring hamda ma’lumotlarni ObservableObject, @StateObject va @EnvironmentObject yordamida ulashing.


@State va @Binding

View’ning lokal state’i uchun @State dan, uni ichki (child) view’larga ochib berish uchun esa @Binding dan foydalaning.

Sintaksis:

  • @State private var name = ""
  • struct Child { @Binding var name: String }
  • Child(name: $name) ko‘rinishida uzating

Misol

import SwiftUI

struct Child: View {
  @Binding var text: String
  var body: some View {
    TextField("Enter", text: $text)
      .textFieldStyle(.roundedBorder)
  }
}

struct Parent: View {
  @State private var text = "Hello"
  var body: some View {
    VStack {
      Text(text)
      Child(text: $text)
    }
    .padding()
  }
}
import SwiftUI

struct ContentView: View {
  var body: some View { Parent() }
}
import SwiftUI

@main
struct MyApp: App {
  var body: some Scene {
    WindowGroup { ContentView() }
  }
}

Misolni ishga tushirish »

Ushbu misolda ota view lokal state’ini @Binding orqali ichki view’ga ochib beradi, shuning uchun tahrirlar ota view’dagi qiymatni yangilaydi.



ObservableObject va StateObject

Ma’lumotlarni view’lar o‘rtasida ObservableObject yordamida ulashing.

Unga @StateObject bilan egalik qiling yoki @ObservedObject bilan undan foydalaning.

Sintaksis:

  • class VM: ObservableObject { @Published var count = 0 }
  • @StateObject private var vm = VM()
  • @ObservedObject var vm: VM

Misol

import SwiftUI

class CounterModel: ObservableObject {
  @Published var count = 0
  func increment() { count += 1 }
}

struct ChildView: View {
  @ObservedObject var model: CounterModel
  var body: some View {
    HStack {
      Text("Count: \(model.count)")
      Button("Inc") { model.increment() }
    }
  }
}

struct ParentView: View {
  @StateObject private var model = CounterModel()
  var body: some View {
    VStack(spacing: 12) {
      ChildView(model: model)
    }
    .padding()
  }
}
import SwiftUI

struct ContentView: View {
  var body: some View { ParentView() }
}
import SwiftUI

@main
struct MyApp: App {
  var body: some Scene {
    WindowGroup { ContentView() }
  }
}

Misolni ishga tushirish »

Ota view modelga @StateObject bilan egalik qiladi, ichki view esa o‘zgarishlarni aks ettirish uchun uni @ObservedObject bilan kuzatadi.


@EnvironmentObject

Umumiy ilova state’ini root view’dan .environmentObject() yordamida taqdim eting, so‘ng uni avlod view’larda @EnvironmentObject bilan ishlating.

Sintaksis:

  • Root().environmentObject(model)
  • @EnvironmentObject var model: Model

Misol

import SwiftUI

final class AppSettings: ObservableObject {
  @Published var theme = "Light"
}

struct Root: View {
  @StateObject private var settings = AppSettings()
  var body: some View {
    VStack(spacing: 8) {
      Button("Toggle Theme") { settings.theme = (settings.theme == "Light") ? "Dark" : "Light" }
      Child()
    }
    .environmentObject(settings)
    .padding()
  }
}

struct Child: View {
  @EnvironmentObject var settings: AppSettings
  var body: some View { Text("Theme: \(settings.theme)") }
}
import SwiftUI

struct ContentView: View {
  var body: some View { Root() }
}
import SwiftUI

@main
struct MyApp: App {
  var body: some Scene {
    WindowGroup { ContentView() }
  }
}

Misolni ishga tushirish »

Root view umumiy AppSettings ni joylaydi (inject); istalgan avlod view yangilanishlarni @EnvironmentObject orqali o‘qiy oladi.

Maslahat: Sozlamalar yoki sessiya kabi global ilova state’i uchun @EnvironmentObject dan foydalaning.



W3Schools Pathfinder

Yutuqlaringizni kuzating – bu bepul!