@State
struct ContentView: View {@State private var isRain = truevar body: some View {VStack {Image(systemName: isRain ? "cloud.rain.fill" : "sun.max.fill").resizable().frame(width: 100, height: 100)Text(isRain ? "我們淋著大雨不知何時才能放晴" : "太陽公公出來了,他對我呀笑呀笑")Button {isRain = Bool.random()} label: {Text("今天天氣如何 ?")}}}
}
struct 是赋值, class是引用
在struct 的计算属性(computed property)里,不允许改变成员变量
加上 @State 就可以改变了
参考:
用狀態設計 SwiftUI 畫面 — 認識 State property
sink
@Published + @StateObject + @ObservedObject
+ ObservableObject
可以在继承 ObservableObject 的struct或class 的变量加上 @Published 的 property。
当变量改变,将会自动更新页面
class Baby: ObservableObject {@Published var age = 1
}
struct ContentView: View {@ObservedObject var cuteBaby = Baby()var body: some View {VStack {Text("\(cuteBaby.age) 岁").font(.largeTitle).padding().background(Capsule().foregroundColor(.yellow))Button(action: {cuteBaby.age += 1}, label: {Text("baby大一岁")})}}
}
改版一下,加个子view
struct BabyView: View {@StateObject var cuteBaby = Baby()var body: some View {VStack {AgeText(cuteBaby: cuteBaby)Button(action: {cuteBaby.age += 1}, label: {Text("baby大一岁")})}}
}struct AgeText: View {var cuteBaby: Babyvar body: some View {Text("\(cuteBaby.age) 岁").font(.largeTitle).padding().background(Capsule().foregroundColor(.yellow))}
}
再点击button,岁数不会变化
问题出在 AgeText 不知道它的页面需要更新,在 property cuteBaby 前加上 @ObservedObject,这样 cuteBaby 的 age 变化,页面才会更新
struct AgeText: View {@ObservedObject var cuteBaby: Babyvar body: some View {Text("\(cuteBaby.age) 岁").font(.largeTitle).padding().background(Capsule().foregroundColor(.yellow))}
}
另外如果 Baby 的类型为 struct, 则不会有这个问题
struct Baby {var age = 1
}
struct ContentView: View {@State var cuteBaby = Baby()var body: some View {VStack {Image("baby").resizable().scaledToFit()AgeText(cuteBaby: cuteBaby)Button(action: {cuteBaby.age += 1}, label: {Text("一暝大一寸")})}}
}
struct AgeText: View {var cuteBaby: Babyvar body: some View {Text("\(cuteBaby.age) 歲").font(.largeTitle).padding().background(Capsule().foregroundColor(.yellow))}
}