作为一个声明式的UI框架,SwiftUI帮我们处理了几乎所有关于UI和数据之间的交互,这使我们不再需要关注数据变化时刷新UI和用户交互以后更新数据的逻辑。
为了实现数据和UI的绑定,我们需要利用Swift的一些关属性包装器来向SwiftUI描述它们之间的关系,那么让我们开始吧。
State Properties @State
在前面的一篇文章中当我们给数组添加或者删除元素时,列表会自动响应变化,正是因为使用了@State
来标记View中的model。
struct ContentView: View {
@State private var title: String = ""
var body: some View {
VStack {
Text("\(title)")
TextField("Please Enter Title", text: $title)
}
}
}
使用@State
包装的变量是可以被SwiftUI读取的值,这些值通常是一些字符串或数字等常量值。
当被State包装的属性改变时,SwiftUI会重新计算和绘制使用到该属性的视图所在的整个视图层级,通常是说变量所在View的Body会被重新绘制,在本例子中就是指ContentView
的body。
被
@State
包装的变量一定要用private
修饰,并且这个变量只能在当前view以及其子View的body中使用。
正如TextField中的$title
一样,我们可以通过*$*前缀把变量和另一个view绑定起来,这样就可以在另一个view中对这个变量进行修改了。下面的代码使用一个Toggle来控制Wi-Fi的开关:
struct ContentView: View {
@State private var isOn = false
var body: some View {
VStack {
Text("Wi-Fi State: \(isOn ? "On" : "Off")")
Image(systemName: "\(isOn ? "wifi" : "wifi.slash")")
Toggle("Wi-Fi State", isOn: $isOn)
}
}
}
正如上面的代码所示,我们在isOn
属性和Toggle控件之间建立了一个绑定。Toggle可以修改isOn的值,另外当isOn改变的时候,Text和Image的内容都会发生变化。
State Binding 状态绑定
使用@state包装的属性只在它所属view的内部使用,那么当它的子视图要访问这个属性的时候就要用到@binding
了。就像上面例子用到的Toggle
,我们把Text和Image放到一个自定义的View中。
struct WiFiView: View {
@Binding var isOn: Bool
var body: some View {
Text("Wi-Fi State: \(isOn ? "On" : "Off")")
Image(systemName: "\(isOn ? "wifi" : "wifi.slash")")
}
}
在这里我们使用了@Binding
来创建数据和界面之间的依赖,它和@State
不同的地方在于,binding的属性并不被当前的视图所持有,并且binding的值是可以被state的属性值导出的。
在这里如果把@Binding换成@State就会使WiFiView和它的父视图分别拥有各自的isOn属性,其中一个修改不会影响到另一个,而这显然不是我们想要的结果。
使用Combine框架的Publisher
使用@State包装的属性只能在当前View内部或者它的子视图中使用,并且state属性时临时的——由于state包装的属性是隶属于它所在view的,当view被销毁时对应的state属性也会消失,这明显是不够的,另外我们在开发过程中还要处理一些非界面的信息,比如说Timer、Notification等,它们携带的信息通常也会有更新界面的需求。这种情况就要用到Combine中的Publisher了。
Combine是在iOS13中被引入的,主要目的是为了处理App中的各种事件消息。如果你之前接触过RxSwift或者ReactiveCocoa那你对这个概念应该很容易理解,它的原理就是发布者和订阅者的模式。
class Contact: ObservableObject {
@Published var name: String
@Published var age: Int
init(name: String, age: Int) {
self.name = name
self.age = age
}
}
struct ContentView: View {
@ObservedObject var xiaowang = Contact(name: "xiaowang", age: 21)
var body: some View {
VStack {
Text("小王:\(xiaowang.name)")
// 这里只是一个例子,通常不会在这里对Publisher进行修改
Button("修改联系人") {
xiaowang.name = "小王"
}
}
}
}
我们先创建一个遵守ObservableObject协议的联系人类,然后在SwiftUI视图中添加一个被ObservedObject包装的变量,在body中使用这个变量,当被@Published
包装的变量改变时,body会使用新值重新加载。
如果你在看WWDC2019的Introducing Combile视频的时候发现BindableObject/didChange.send()/onReceive,这些内容现在已经被移除了。
只有class可以遵守ObservableObject协议,否则会报错 Non-class type 'Contact' cannot conform to class protocol 'ObservableObject'
在iOS14中,引入了一个新的@StateObject
来丰富这种使用场景。它和ObservedObject的区别在于当view刷新时被ObservedObject包装的属性会重置到初始值,而被StateObject使用的不会。
除非在某些必要的情况下需要使用ObservedObject之外,大多数情况都适用于StateObject。
环境变量 Evironment Objects
除了以上列出的几个场景之外,假设我们的app需要从一个页面跳转到另一个页面,这是一个很常见的场景,并且在后一个页面要用到前面页面的一些属性。通常可以这样做:
NavigationLink(destination: nextView(aModel: aModel)) {
Text("Detail")
}
上面用到了NavigationLink
来做导航,destination是要弹出的页面,初始化时带着当前页面的一个属性。
这样处理没有什么大的问题,不过如果层级变多,后面层级又出现很多新层级,再有反向传值的话就会很复杂容易出错——就像使用UIKit的时候。而为了解决这个问题,SwiftUI引入了Evironment Objects。
// DataSource.swift
class DataSource: ObservableObject {
@Published var counter = 0
}
// ContentView.swift
struct ContentView: View {
let dataSource = DataSource()
var body: some View {
NavigationView {
VStack {
Button("Click") {
dataSource.counter += 1
}
NavigationLink(
destination: ContactView()) {
Text("Enter Next Page")
}
}
}
.environmentObject(dataSource)
}
}
// ContactView.swift
struct ContactView: View {
@EnvironmentObject var dataSource: DataSource
var body: some View {
Text("\(dataSource.counter)")
}
}
Environment Object和ObservedObject/StateObject用法非常相似,首先DataSource遵守ObservableObject协议,要观察的属性counter使用Publisher包装。
被@EnvironmentObject
包装的属性会随着Publised属性的改变而变化,所在的view也会重新加载。
.environmentObject是一个Modifier,它向环境变量中注入一个属性,如果不在使用@EnvironmentObject之前使用把属性注入到环境变量中,就会包错 {% label danger@MissingEnvironmentObjectError: Missing EnvironmentObject %}
总结
在这篇文章中我们学习了SwiftUI框架中数据的流动相关知识,其中主要涉及了几个常用的属性包装器(property wrapper):@State @Binding @ObservedObject @StateObject @EnvironmentObject用法和适用场景,希望对你所有帮助。如果你有任何的问题、建议都可以通过微博或邮件联系到我本人。