讲讲SwiftUI的数据流向,@State,@Binding的区别

·  阅读 1486

小知识,大挑战!本文正在参与「程序员必备小知识」创作活动 本文已参与 「掘力星计划」 ,赢取创作大礼包,挑战创作激励金

数据处理的基本原则

SwiftUI中的界面是严格数据驱动的:运行时界面的修改,只能通过修改数据来间接完成,而不是直接对界面进行修改操作。

  • Data Access as a Dependency:在 SwiftUI 中数据一旦被使用就会成为视图的依赖,也就是说当数据发生变化了,视图展示也会跟随变化,不会像 MVC 模式下那样要不停的同步数据和视图之间的状态变化。

  • A Single Source Of Truth: 保持单一数据源,在 SwiftUI 中不同视图之间如果要访问同样的数据,不需要各自持有数据,直接共用一个数据源即可,这样做的好处是无需手动处理视图和数据的同步,当数据源发生变化时会自动更新与该数据有依赖关系的视图。

五个数据流工具

可以通过它们建立数据和视图的依赖关系

  • Property
  • @State
  • @Binding
  • ObservableObject
  • @EnvironmentObject

注意:后面四种使用 Swift 5.1 的新特性 Property Wrapper来实现的一种属性装饰语法糖(修饰器/装饰器)

属性包装器(propertyWrapper)是什么

上面的几个标识符统统以@开头,这表示他们均由@propertyWrapper产生,所以若要搞清楚这些东西分别有什么用需要先了解propertyWrapper

使用@propertyWrapper产生一个属性包装器:@XXX,使用这个@XXX 对属性进行包装

包装前我想向你介绍几个创建包装器的时需要实现的属性:wrappedValue(被包装的值), projectedValue(呈现值)

@propertyWrapper struct 包装器名称 {
  var wrappedValue: 类型 {
    get {}
    set {}
  }
  var projectedValue: 类型 {
    return 
  }
  初始化方法(可选)
}

复制代码
  • 其中wrappedValue就是需要包装的那个值,直接访问,projectedValue就是你可能希望通过包装额外呈现出来的某个值,$+属性名称访问(下面有例子)
//我想创造一个体温温度包装器,使用该包装器包装的变量总是小于46.5且大于35(假定温度计的极限是35-46.5度),同时呈现K氏度以供参考
@propertyWrapper struct Temperature {
    var celcius = 35.0//摄氏温度
    var wrappedValue: Double {
    get {
      return celcius
    }
    set {
      celcius = newValue <= 35 ? 35 : min(46.5, newValue)//如果小于等于35就显示35度,否则在46.5和设置的温度中取小
    }
    }
    var projectedValue: Double {
      return celcius + 273.15//K氏度= 摄氏度+ 273.15
    }
}
struct People {
    @Temperature(celcius: 36.5) var templete
}
let people = People()
print("体温:",people.templete,"K氏度:",people.$templete)
复制代码

运行结果 体温:36.5 K氏度:309.65

Property

  • 这种形式最简单,就是在 View中定义常量或者变量,然后在内部使用
import SwiftUI

struct Model {
    var title: String
    var info: String
}

struct ContentView : View {
    
    let model = Model(title: "WWDC 2019", info: "SwiftUI是一个全新的UI框架")
    var body: some View {
        
        VStack {
            // 内部使用前面定义的let和var
            Text(model.title).font(.title)
            Text(model.info)
        }
    }
}
复制代码

@State

这个只要记住一句话:被@State包装的值发生改变时,UI将被同时改变 个人猜测底层在set方法中对UI进行了更新

import SwiftUI
//又一个字符串HelloWorld,按下按钮后修改了被State包装的变量x,所以UI也跟着发生了变化
struct TestView: View {
    @State var x = "HelloWorld"
       var body: some View {
        VStack{
            Text(x)
            Button(action:{self.x = "Hello UI"}){
                Text("ChangeValue")
            }
        }
       }
}

struct TestView_Previews: PreviewProvider {
    static var previews: some View {
        TestView()
    }
}

复制代码

@Binding

对包装的值采用传址而不是传值(这里有C语言基础的同学应该可以理解:也就是说传递了变量本身而不是拷贝了数据过去)

import SwiftUI
//例子:Text1和Text2是两个不相关的View,他们共同使用一个数据,当该数据发生改变的时候除了要用@State告诉Text1更新UI,还要告诉Text2更新数字
//button左边的数字是Text1,右边的数字是Text2
struct Text1: View {
    @State var x = 5
    var body: some View {
        HStack{
            Text(String(x))
            Button(action: {self.x = 10}){
                Text("change to 10")
            }
            Text2(y: $x)
        }
        
    }
}
struct Text2: View {
    @Binding var y: Int
    var body: some View {
        Text(String(y))
    }
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        Text1()
    }
}

复制代码

@ObservedObject——被观察的对象 ObservableObject——可以观察(别人)的对象

注意⚠️:ObservableObject不是属性包装器,而是一个协议,满足协议的类(Class)中使用@Publish标记可能发生改变的属性。

用@Publish标记类(Class)中希望监听的属性

用@ObservedObject包装该类(Class)的实例,当这个实例的某些被@Publish标记的属性发生改变,(Publisher发布者)会在该实例被改变之前广播给UI(数据的订阅者)

默认情况下,ObservableObject会合成一个objectWillChange发布者。

import SwiftUI
//例子:代码解读在代码后面
struct ContentView: View {
@ObservedObject var john = Human(name: "john", age: 24)
    var body: some View {
        VStack {
            Text(john.name)
            Button(action:{
                self.john.happyBirthday()
            }){
                Text(String(john.age))
            }
        }
    }
}

class Human: ObservableObject {
    @Published var name: String
    @Published var age: Int

    init(name: String, age: Int) {
        self.name = name
        self.age = age
    }

    func happyBirthday() {
        self.name = "Happy birthday"
        self.age += 1
    }
    
}

struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
//一个Human类满足ObservableObject协议表示这个类在监听某些属性
//@Publish name,@Publish age 表示这些属性在被监听
//@ObservedObject var john 表示john对象是被监听的对象
//点击按钮调用self.john.happyBirthday(),改变了john的名字和年龄
//UI收到了Publisher的广播,自动更新了界面

复制代码

相比@State解决了哪些问题呢:这里借用喵神(onevcat.com)的一句话: 如果你需要在多个 View 中共享数据,@State可能不是很好的选择;如果还需要在 View 外部操作数据,那么 @State 甚至就不是可选项了。含有少数几个成员变量的值类型,也许使用 @State 也还不错。但是对于更复杂的情况,例如含有很多属性和方法的类型,可能其 中只有很少几个属性需要触发 UI 更新,也可能各个属性之间彼此有关联,那 么我们应该选择引用类型和更灵活的可自定义方式。

@EnvironmentObject

文档:A property wrapper type for an observable object supplied by a parent or ancestor view.

翻译:父视图或祖先视图提供的可观察对象的属性包装器类型。

注意⚠️:强调可观察(Class应当满足ObservableObject协议),强调对象(必须是Class而不是Struct or Enum)


import SwiftUI
//代码解释在下面
struct ContentView: View {
@ObservedObject var john = Human(name: "john", age: 24)
    var body: some View {
        VStack {
            Text(john.name)
            Button(action:{
                self.john.happyBirthday()
            }){
                SubView()
                .environmentObject(john)
            }
        }
    }
}
struct SubView: View {
    @EnvironmentObject var john: Human
    var body: some View {
        Text(john.name)
    }
}
class Human: ObservableObject {
    @Published var name: String
    @Published var age: Int

    init(name: String, age: Int) {
        self.name = name
        self.age = age
    }

    func happyBirthday() {
        self.name = "Happy birthday"
        self.age += 1
    }
    
}
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}
//在父View中的被观察对象(被@ObservedObject包装的john)在子View中使用,只需要在子View中用@EnviromentObject 包装同类型的变量并在调用子View的时候使用.environmentObject(john)显式的说明
复制代码

总结

View与View间的公用数据使用@State + @Binding。

多个View与Class间的公用数据:对View用@ObservedObject,让Class满足ObservableObject协议。

父View与子View对Class间的公用数据:父View用@ObservedObject,子View用@EnvironmentObject,Class满足ObservableObject协议

分类:
iOS
标签:
分类:
iOS
标签:
收藏成功!
已添加到「」, 点击更改