详解SwiftUI数据流是怎么在View间传递的

作为一个声明式的UI框架,SwiftUI帮我们处理了几乎所有关于UI和数据之间的交互,这使我们不再需要关注数据变化时刷新UI和用户交互以后更新数据的逻辑。

为了实现数据和UI的绑定,我们需要利用Swift的一些属性包装器来向SwiftUI描述它们之间的关系,那么让我们开始吧。

到公众号【iOS开发栈】学习更多SwiftUI、iOS开发相关内容。

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之前使用把属性注入到环境变量中,就会包错 MissingEnvironmentObjectError: Missing EnvironmentObject

到公众号【iOS开发栈】回复“csdn”免费获取各大互联网公司面试题,和破解版CleanMyMac等软件

原文出处:CSDN【a623062360】

原文链接:https://blog.csdn.net/a623062360/article/details/113690396

本文观点不代表Dotnet9立场,转载请联系原作者。

发表评论

登录后才能评论