SwiftUI学习之@State、@Binding、@ObservedObject、@EnvironmentObject、@StateObject

一、@State

和一般的存储属性不同,@State 修饰的值,在 SwiftUI 内部会被自动转换为一对 setter 和 getter,对这个属性进行赋值的操作将会触发 View 的刷新,它的 body 会被再次调用,底层渲染引擎会找出界面上被改变的部分,根据新的属性值计算出新的 View,并进行刷新。

  • 1、基本使用
struct ContentView: View {
    @State var count = "eeer"
    var body: some View {
        VStack{
         Text(count)
           Button("点我") { //添加一个按钮,指定标题文字为 First button
              self.count = "1234567890"
           }.background(.red)
        }
    }
}

注意ContentView是一个结构体,它可以被创建为一个常量。如果你回想一下你学习结构体的时候,那意味着它是不可变的——我们不能自由地改变它的值。 当创建想要更改属性的结构体方法时,我们需要添加mutating关键字:mutating func doSomeWork(),例如。然而,Swift不允许我们创建可变计算属性,这意味着我们不能编写mutating var body: some View——这是不允许的。幸运的是,Swift为我们提供了一个称为属性包装器的特殊解决方案:我们可以在属性之前放置一个特殊的属性,有效地赋予它们超能力。在存储简单的程序状态(如按钮被点击的次数)的情况下,我们可以使用SwiftUI中名为@state的属性包装器。@State允许我们绕过结构体的限制:我们知道不能更改它们的属性,因为结构是固定的,但是@State允许SwiftUI将该值单独存储在可以修改的地方。
上面代码运行一下:self.count重新赋值,会触发View刷新,Text显示的文字将会变为:1234567890

  • 2、值传递
    例一
struct ContentView: View {
    @State var count = "eeer"
    var body: some View {
        VStack{
           
            MapView(count1: count)
        }
        Text(count)
            .padding()
    }
}
struct MapView: View{
  @State  var count1: String
    var body: some View {
          Button("点我") { //添加一个按钮,指定标题文字为 First button
          self.count1 = "1234567890"
       }
    }
}

MapView从父视图传递count值给内部count1,是值类型的传递。正如普通的Swift函数传递参数一样,是值的拷贝,修改MapView的count1,不会影响ContentView的count值。
例二

struct Item {
    var name = "1"
    var age = "10"
}
struct ContentView: View {
    @State var item = Item()
    var body: some View {
      VStack{
          Text(item.name)
              .padding()
            Button("点我") { //添加一个按钮,指定标题文字为 First button
                item.name = "测试"
            }
      }
    }
}

这里Item是结构体,本来就是值类型就可以直接修改Item的成员属性
例三

class Item {
    var name = "1"
    var age = "10"
}
struct ContentView: View {
    @State var item = Item()
    var body: some View {
      VStack{
          Text(item.name)
              .padding()
            Button("点我") { //添加一个按钮,指定标题文字为 First button
                item.name = "测试"
            }
      }
    }
}

注意这里的Item是个类对象,我们知道类对象一般是引用类型,这里虽然@State可以修饰 item 对象,编译器不会报错。但是你点击修改 item.name = "测试"时,运行一下Text显示的值不会有任何变化。说明@State修饰引用对象,修改值是无效的。

二、@Binding

和 @State 类似,@Binding 也是对属性的修饰,它做的事情是将值语义的属性“转换”为引用语义。对被声明为 @Binding 的属性进行赋值,改变的将不是属性本身,而是它的引用,这个改变将被向外传递.

上面2-例1的例子是值传递,假如我们想实现引用传递,就可以使用@Binding解决这个问题。

struct ContentView: View {
    @State var count = "eeer"
    var body: some View {
        VStack{
           
            MapView(count1: $count)
        }
        Text(count)
            .padding()
    }
}
struct MapView: View{
  @Binding  var count1: String
    var body: some View {
          Button("点我") { //添加一个按钮,指定标题文字为 First button
          self.count1 = "1234567890"
       }
    }
}
  • @Binding将 count1的引用改变成向外传递
  • 在传递 count时,我们在它前面加上美元符号 $。

在 Swift 中,对一个由 @ 符号修饰的属性,在它前面使用 $ 所取得的值,被称为投影属性 (projection property)。有些 @ 属性,比如这里的 @State 和 @Binding,它们的投影属性就是自身所对应值的 Binding 类型。不过要注意的是,并不是所有的 @ 属性都提供 $ 的投影访问方式。
这里运行一下改变self.count1 = "1234567890",ContentView的count会随着一起改变,此时Text显示1234567890

三、属性包装

在 SwiftUI中,像@State,@Binding这样对属性进行修饰,称之为属性包装 (Property Wrapper)。

四、@ObservedObject

如果说 @State 是全自动驾驶的话,ObservableObject 就是半自动,它需要一些额外的声明。ObservableObject 协议要求实现类型是 class,它只有一个需要实现的属性:objectWillChange。在数据将要发生改变时,这个属性用来向外进行“广播”,它的订阅者 (一般是 View 相关的逻辑) 在收到通知后,对 View 进行刷新。
创建 ObservableObject 后,实际在 View 里使用时,我们需要将它声明为 @ObservedObject。这也是一个属性包装,它负责通过订阅 objectWillChange 这个“广播”,将具体管理数据的 ObservableObject 和当前的 View 关联起来。

final class Person:ObservableObject{
    @Published var name = "张三"
}

struct ContentView: View {
    @ObservedObject var p = Person()
    var body: some View {
        VStack{
            Text(p.name)
                .padding()
            Button("点我") { //添加一个按钮,指定标题文字为 First button
                p.name = "1234567890"
            
         }
        }
    }
}
  • @ObservedObject修饰的必须是遵守ObservableObject 协议的class对象
  • class对象的属性只有被@Published修饰时,属性的值修改时,才能被监听到。

五、@EnvironmentObject

在 SwiftUI 中,View 提供了 environmentObject(_:) 方法,来把某个 ObservableObject 的值注入到当前 View 层级及其子层级中去。在这个 View 的子层级中,可以使用 @EnvironmentObject 来直接获取这个绑定的环境值。

final class Person:ObservableObject{
  @Published var name = "测试测试测试测试测试测试"
   
}
struct ContentView: View {
    var body: some View {
        VStack{
            let p = Person()
            MapView().environmentObject(p)
        }
    }
}

struct MapView: View {
    @EnvironmentObject var p:Person
    var body: some View {
        VStack{
            Text(p.name)
            Button("点我") { //添加一个按钮,指定标题文字为 First button
                p.name = "1234567890"
            }
        }
    }
}
struct ContentView_Previews: PreviewProvider {
    static var previews: some View {
     
        ContentView()
    }
}
  • @EnvironmentObject 修饰器是针对全局环境的。通过它,我们可以避免在初始 View 时创建 ObservableObject, 而是从环境中获取 ObservableObject

  • 可以看出我们获取 p这个 ObservableObject 是通过 @EnvironmentObject 修饰器,但是在入口需要传入 .environmentObject(p) 。@EnvironmentObject 的工作方式是在 Environment 查找 Person 实例。

六、@StateObject

StateObject行为类似ObservedObject对象,区别是StateObject由SwiftUI负责针对一个指定的View,创建和管理一个实例对象,不管多少次View更新,都能够使用本地对象数据而不丢失

import SwiftUI
final class Person:ObservableObject{
  @Published  var name = "测试"
    deinit{
        print("销毁")
    }
}
struct ContentView: View {
    @StateObject var p = Person()
    var body: some View {
        VStack{
            Text(p.name)
            Button("点击"){
                  p.name = "哈哈哈"
            }
           
        }
    }
}

@StateObject和@ObservedObject区别:

  • 1、@ObservedObject只是作为View的数据依赖,不被View持有,View更新时ObservedObject对象可能会被销毁
    适合数据在SwiftUI外部存储,把@ObservedObject包裹的数据作为视图的依赖,比如数据库中存储的数据`
  • 2、针对引用类型设计,当View更新时,实例不会被销毁,与State类似,使得View本身拥有数据
例子1:
import SwiftUI
final class Person:ObservableObject{
  @Published  var name = 1
    deinit{
        print("销毁")
    }
}

struct ContentView: View {
    @State var count = 0
    var body: some View {
        VStack{
            Text("刷新CounterView计数 :\(count)")
                       Button("刷新"){
                           count += 1
            }
           MapView()
        }
    }
}

struct MapView: View {
    @ObservedObject var p = Person()
    var body: some View {
        VStack{
            Text("\(p.name)")
            Button("+1") { //添加一个按钮,指定标题文字为 First button
                p.name += 1
            }

        }
    }
}
  • 点击刷新时,Person 的deinit方法被调用,说明p对象被销毁;
    先连续点击+1,Text上的数字在一直递增,当点击刷新时Text上的数字恢复为1,这个现象也说明p对象被销毁

例子2

import SwiftUI
final class Person:ObservableObject{
  @Published  var name = 1
    deinit{
        print("销毁")
    }
}

struct ContentView: View {
    @State var count = 0
    var body: some View {
        VStack{
            Text("刷新CounterView计数 :\(count)")
                       Button("刷新"){
                           count += 1
            }
           MapView()
        }
    }
}

struct MapView: View {
    @StateObject var p = Person()
    var body: some View {
        VStack{
            Text("\(p.name)")
            Button("+1") { //添加一个按钮,指定标题文字为 First button
                p.name += 1
            }

        }
    }
}
  • 和例1不同的是怎么操作,p都不会销毁

小结:

@StateObject的声明周期与当前所在View生命周期保持一致,即当View被销毁后,StateObject的数据销毁,当View被刷新时,StateObject的数据会保持;而ObservedObject不被View持有,生命周期不一定与View一致,即数据可能被保持或者销毁;

最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 159,290评论 4 363
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 67,399评论 1 294
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 109,021评论 0 243
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 44,034评论 0 207
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 52,412评论 3 287
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 40,651评论 1 219
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 31,902评论 2 313
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 30,605评论 0 199
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 34,339评论 1 246
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 30,586评论 2 246
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 32,076评论 1 261
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 28,400评论 2 253
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 33,060评论 3 236
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 26,083评论 0 8
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 26,851评论 0 195
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 35,685评论 2 274
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 35,595评论 2 270

推荐阅读更多精彩内容