SwiftUI @State @Published @ObservedObject 深入理解和使用

1.SwiftUI 是Apple 新出面向未来、跨多端解决方案、声明式编程
SwiftUI最新版本 2.0 但是需要 IOS 14 支持,多数现在还用的是IOS 13 所以很多不完善的东西都用SwiftUIX 以及各种库代替,bug也是层出不穷

2.下面是鄙人对 @State @Published @ObservedObject 理解,如有不对,还请指出

1.@State 介绍

因为SwiftUI View 采用的是结构体,当创建想要更改属性的结构体方法时,我们需要添加mutating关键字:mutating func doSomeWork()例如。
然而,Swift不允许我们创建可变计算属性,这意味着我们不能编写mutating var body: some View——这是不允许的。

@State允许我们绕过结构体的限制:我们知道不能更改它们的属性,因为结构是固定的,但是@State允许SwiftUI将该值单独存储在可以修改的地方。

是的,这感觉有点像作弊,你可能想知道为什么我们不使用类-它们可以自由修改。但是相信我,这是值得的:随着你的进步,你会了解到SwiftUI经常破坏和重新创建你的结构体,所以保持它们的小而简单的结构对性能很重要。

提示:在SwiftUI中存储程序状态有几种方法,您将学习所有这些方法。@State是专门为存储在一个视图中的简单属性而设计的。因此,苹果建议我们向这些属性添加私有访问控制,
比如:@State private var tapCount = 0。

2.@Published + @ObservedObject 介绍

@Published是SwiftUI最有用的包装之一,允许我们创建出能够被自动观察的对象属性,SwiftUI会自动监视这个属性,一旦发生了改变,会自动修改与该属性绑定的界面。

比如我们定义的数据结构Model,前提是 @Published 要在 ObservableObject 下使用
然后用 @ObservedObject 来引用这个对象,当然@State 不会报错,但是无法更新

class BaseModel: ObservableObject{
    @Published var name:String = ""
}

struct ContentView: View{

  @ObservedObject var baseModel:BaseModel = BaseModel()

  var body: some View{
      Text("用户名\(baseModel.name)")

      Button(action: {
              baseModel.name  = "Renew"
            }, label: {
                Text("更新视图")
            })
  }
}

3.最重要的部分 (代码注释部分最为主要,务必看完)

虽然上面案例运行中什么都正常展示加载,但是到了实际项目中,却一堆bug,这是如何导致的,如果对 这三种状态跟View绑定的关系不了解,很可能给自己留下隐患

1.先来看组案例
//// MASK - 先定义两个Model 继承 ObservableObject 
class WorkModel: ObservableObject {
    
    @Published var name = "name"
    
    @Published var count = 1
}

class UserModel: ObservableObject {
    
    @Published var nickname = "nickname"
    
    @Published var header = "http://www.baidu.com"
}

//// MASK - View显示层
struct ContentView: View {
    @ObservedObject var workModel:WorkModel = WorkModel()
        
    @ObservedObject var userModel:UserModel = UserModel()

    var body: some View {
        VStack{
            Text("work.count \(workModel.count)")

            Text("work.name \(workModel.name)")

            Text("user.nickname \(userModel.nickname)")

            Text("user.header \(userModel.header)")
            
            Button(action: {
               userModel.nickname = "Renew"

               userModel.header = "http://..."

               workModel.name = "work name"
                
               workModel.count += 1

            }, label: {
                Text("更新数据")
            })
        }

     }
}

不出意外上面代码点击按钮就会更新数据,但是如果我们有个包装类呢

class WrapperModel: ObservableObject{
    
    @ObservedObject var workModel:WorkModel = WorkModel()
        
    @ObservedObject var userModel:UserModel = UserModel()
}

struct ContentView: View {
    @ObservedObject var wrapperModel:WrapperModel = WrapperModel()

    var body: some View {
        VStack{
            Text("work.count \(wrapperModel.workModel.count)")

            Text("work.name \(wrapperModel.workModel.name)")

            Text("user.nickname \(wrapperModel.userModel.nickname)")

            Text("work.header \(wrapperModel.userModel.header)")
            
            Button(action: {
               wrapperModel.userModel.nickname = "Renew"

               wrapperModel.userModel.header = "http://..."

               wrapperModel.workModel.name = "work name"
                
               wrapperModel.workModel.count += 1

            }, label: {
                Text("更新数据")
            })
        }

     }
}

这时候点击按钮还会更新数据吗,答案是否定的,那这个是为啥呀???

因为SwiftUI更新数据的前提是触发 
第一层 绑定的对象 wrapperModel下的属性(字段)发生更新才会调用视图层更新数据
但是 第一次下绑定的对象还绑定了 @ObservedObject 或者其他类型的对象呢?
还会触发第一次对象属性更新吗,答案是不能的
你可以在 didSet 事件里面捕捉,是捕捉不到的,所以视图是不会更新的,那这还有其他解决方案吗

有:
调用对象 wrapperModel.objectWillChange.send() 方法告诉View 层 我更新
但是这个就是绝对的了吗?:不是 如果层次再深一点的model 还是有bug,触发不了

4.总结以及解决方案

/// 既然我们知道View 跟 状态绑定的关系
/// 是以第一继承ObservableObject 类 下的属性(字段)更新来更新视图的
/// 那我们可以给 ObservableObject 加一个 无关紧要的字段,然后编写一个方法,来通知更新
class BaseobservableObject: ObservableObject {

    ///
    /// 注意
    /// 接收 子类model 时候要用   @ObservedObject 不能用 @Published
    /// 因为SwiftUI 更新机制是当前对象有 @Published 字段更新 就会调用View视图进行更新
    /// 在BaseModel里面实现 notifyUpdate 更新当前对象 _lastUpdateTime 字段,实现自身全部字段更新
    @Published private var _lastUpdateTime: Date = Date()

    ///
    /// 通知更新
    public func notifyUpdate() {
        _lastUpdateTime = Date()
    }
}

/// 那当我们 包装类下的对象更新的时候
/// 可以直接 调用包装类 notifyUpdate() 方法更新当前对象属性,来达到更新View 的效果
/// 顾忌:如果多次调用 notifyUpdate() View会刷新两边吗
/// 答案是否定的,再一次函数栈里面 多次调用 notifyUpdate() View也只更新一次
/// 当子类继承了 BaseobservableObject 对象
/// 那么该对象下面属性其实可以不需要在写 @ObservedObject 或者 @Published 了
/// 因为更新属性之后调用了 notifyUpdate() 达到了更新整个对象的效果,所以可以省略了

5.其他知识

/// MASK - 实现一个基础Model类,其他Model继承该类

class BaseModel: ObservableObject {
    
   @Published var isLoading = false
}

class SonModel: BaseModel {
    
    @Published var name = "name"
    
    @Published var count = 1
}

struct ContentView: View {
    @ObservedObject var sonModel:SonModel = SonModel()

    var body: some View {
        VStack{
            Text("name \(sonModel.name)")

            Button(action: {
               sonModel.name = "Renew"
            }, label: {
                Text("加载")
            })
        }

     }
}

/// 问题来了,现在我View 层我直接引用 
/// 照说这时候应该 Text 提示信息是 name Renew 但是点击没反应
/// 啥原因,问题其实还是跟上面的问题有点相似
/// SonModel 不是直接继承于 ObservableObject 类的
/// 所以,直接继承 ObservableObject 下的属性(字段)没更新,就不会更新View
/// 最简单的解决办法就是 更新直接继承 ObservableObject(父对象) 里面的随便一个属性
最后编辑于
©著作权归作者所有,转载或内容合作请联系作者
  • 序言:七十年代末,一起剥皮案震惊了整个滨河市,随后出现的几起案子,更是在滨河造成了极大的恐慌,老刑警刘岩,带你破解...
    沈念sama阅读 206,126评论 6 481
  • 序言:滨河连续发生了三起死亡事件,死亡现场离奇诡异,居然都是意外死亡,警方通过查阅死者的电脑和手机,发现死者居然都...
    沈念sama阅读 88,254评论 2 382
  • 文/潘晓璐 我一进店门,熙熙楼的掌柜王于贵愁眉苦脸地迎上来,“玉大人,你说我怎么就摊上这事。” “怎么了?”我有些...
    开封第一讲书人阅读 152,445评论 0 341
  • 文/不坏的土叔 我叫张陵,是天一观的道长。 经常有香客问我,道长,这世上最难降的妖魔是什么? 我笑而不...
    开封第一讲书人阅读 55,185评论 1 278
  • 正文 为了忘掉前任,我火速办了婚礼,结果婚礼上,老公的妹妹穿的比我还像新娘。我一直安慰自己,他们只是感情好,可当我...
    茶点故事阅读 64,178评论 5 371
  • 文/花漫 我一把揭开白布。 她就那样静静地躺着,像睡着了一般。 火红的嫁衣衬着肌肤如雪。 梳的纹丝不乱的头发上,一...
    开封第一讲书人阅读 48,970评论 1 284
  • 那天,我揣着相机与录音,去河边找鬼。 笑死,一个胖子当着我的面吹牛,可吹牛的内容都是我干的。 我是一名探鬼主播,决...
    沈念sama阅读 38,276评论 3 399
  • 文/苍兰香墨 我猛地睁开眼,长吁一口气:“原来是场噩梦啊……” “哼!你这毒妇竟也来了?” 一声冷哼从身侧响起,我...
    开封第一讲书人阅读 36,927评论 0 259
  • 序言:老挝万荣一对情侣失踪,失踪者是张志新(化名)和其女友刘颖,没想到半个月后,有当地人在树林里发现了一具尸体,经...
    沈念sama阅读 43,400评论 1 300
  • 正文 独居荒郊野岭守林人离奇死亡,尸身上长有42处带血的脓包…… 初始之章·张勋 以下内容为张勋视角 年9月15日...
    茶点故事阅读 35,883评论 2 323
  • 正文 我和宋清朗相恋三年,在试婚纱的时候发现自己被绿了。 大学时的朋友给我发了我未婚夫和他白月光在一起吃饭的照片。...
    茶点故事阅读 37,997评论 1 333
  • 序言:一个原本活蹦乱跳的男人离奇死亡,死状恐怖,灵堂内的尸体忽然破棺而出,到底是诈尸还是另有隐情,我是刑警宁泽,带...
    沈念sama阅读 33,646评论 4 322
  • 正文 年R本政府宣布,位于F岛的核电站,受9级特大地震影响,放射性物质发生泄漏。R本人自食恶果不足惜,却给世界环境...
    茶点故事阅读 39,213评论 3 307
  • 文/蒙蒙 一、第九天 我趴在偏房一处隐蔽的房顶上张望。 院中可真热闹,春花似锦、人声如沸。这庄子的主人今日做“春日...
    开封第一讲书人阅读 30,204评论 0 19
  • 文/苍兰香墨 我抬头看了看天上的太阳。三九已至,却和暖如春,着一层夹袄步出监牢的瞬间,已是汗流浃背。 一阵脚步声响...
    开封第一讲书人阅读 31,423评论 1 260
  • 我被黑心中介骗来泰国打工, 没想到刚下飞机就差点儿被人妖公主榨干…… 1. 我叫王不留,地道东北人。 一个月前我还...
    沈念sama阅读 45,423评论 2 352
  • 正文 我出身青楼,却偏偏与公主长得像,于是被迫代替她去往敌国和亲。 传闻我的和亲对象是个残疾皇子,可洞房花烛夜当晚...
    茶点故事阅读 42,722评论 2 345

推荐阅读更多精彩内容