Swiftui模态视图(sheet,fullScreenCover)某种情况不能捕获@State 值的变化

先看看下面这段代码引出的奇怪现象

struct ContentView: View {

    @State var number = 0
    @State var show = false
    
    @StateObject var custom = Custom()
    
    var body: some View {
        VStack {
            Button("Set number = 2") {
                number = 2
                show = true
                // custom.number = 2
            }

            //Text("number = \(number)") // 注释掉,full-screen 中的 Text 将显示 number = 0,不注释,等于2
        }
        //        .id(number)
        //        .onChange(of: number, perform: { _ in
        //
        //        })
        .fullScreenCover(isPresented: $show) {
            VStack {
                Text("number = \(number)")
                Button("Close") {
                    show = false
                    print("number in fullScreenCover is", number) // 无论是否注释掉上面的 Text ,此处均打印为 2
                }
            }
        }
    }
}

当注释掉这句的时候: //Text("number = (number)") // 注释掉,full-screen 中的 Text 将显示 n = 0,不注释,等于2,点击按钮"Set number = 2",弹窗模态视图,显示number =0,不注释,则显示number =2,很奇怪。

聊聊原因

在SwiftUI中,对于引用类型,可以通过 @StateObject、@ObservedObject 、@EnvironmentObject 将其注入到视图中,通过这种方式注入的依赖,无论视图的body种是否使用了该实例的属性,只要改示例的 objectWillChange.send() 方法被调用,与其关联的视图都将被强制刷新( 重新计算 body 值 )。
而@State,SwiftUI 则为其实现了高度的优化机制( EnvironmentValue 没有提供优化,行为与引用类型注入行为一致 )。这意味着,即使我们在定义视图的结构体中声明了使用 @State 标注的变量,只要 body 中没有使用该属性( 通过 ViewBuilder 支持的语法 ),即使该属性发生变化,视图也不会刷新。
与大多数的 View Extension 和 ViewModifier 不同,在视图中,通过 .sheet 或 .fullScreenCover 来声明的模态视图内容代码的闭包,只会在显示模态视图的时候才会被调用、解析( 对闭包中的 View 进行求值 )
而其它通过视图修饰器声明的代码块,则会在主视图 body 求值时进行一定的操作:

  1. overlay、background 等,会在 body 求值时调用、解析( 因为要与主视图一并显示 )
  2. alert、contextMenu 等则会在 body 求值时调用( 可以理解为创建实例 ),但只有在需要显示时才进行求值
    这就是说,即使我们在 Sheet 代码块的 Text 中添加了对 number 的引用,但只要模态视图尚未显示,则 number 并没有与视图创建关联 。
    尽管我们通过 .fullScreenCover 在 Text 中引用了 number , 但由于该段代码并不会在 ContextView 求值时被调用,因此也不会让 number 与 ContextView 创建关联。只有在 Sheet 显示后,number才与 视图创建关联 。
当 SwiftUI 创建并显示一个 Sheet 视图时,并非在现有的视图树上创建分支,而是新建一棵独立的视图树。也就是说 Sheet 中的视图与原有视图分别处于不同的上下文中。这意味着,相较于在原有视图树上创建分支,在新上下文中重建视图树的开销更大,需要进行的工作也更多。
而 SwiftUI 为了优化效率,通常会对若干操作进行合并。即使为新上下文中的视图进行的关联操作是在视图求值操作之前完成的,但由于 number 的变化与关联操作被集中在一个 Render Loop 中,这样会导致在关联之后并不会强制新关联的视图刷新( 关联后,值并没有发生变化 )。

梳理整个流程:

当 ContextView 中注释Text("n = (number)")( ContextView 没有与 number 创建关联 )

程序运行,SwiftUI 对 ContextView 的 body 进行求值并渲染
.fullScreenCover 的闭包此时并未被调用,但捕获了视图当前的 number 值 ( number = 0 )
点击 Button 后,尽管 number 的内容发生变化,但 ContextView 的 body 并未重新求值
由于 show 转变为 true ,SwiftUI 开始调用 .fullScreenCover 的闭包,创建 Sheet 视图
尽管 show 也是通过 State 声明的,但 show 的变化并不会导致 ContextView 重新更新。这是因为在 .fullScreenCover 的构造方法中,我们传递的是 show 的 projectedValue( Binding 类型 )
由于合并操作的原因,在 Sheet 视图关联到 number 后,并不会重新更新
Sheet 中的 Text 显示 number = 0
点击 Sheet 中的 Close 按钮,执行 Button 闭包,重新获得 number的当前值( number = 2 ),打印值为 2

当 ContextView 中 不注释Text("number = (number)") Text ( ContextView 与 number 之间创建了关联 )

程序运行,SwiftUI 对 ContextView 的 body 进行求值并渲染
.fullScreenCover 的闭包此时并未被调用,但捕获了视图当前的 number 值 ( number = 0 )
点击 Button 后,由于 number 值发生了变化,ContextView 重新求值( 重新解析 DSL 代码 )
在重新求值的过程中,.fullScreenCover 的闭包捕获了新的 number 值 ( number = 2 )
创建 Sheet 视图并渲染
由于 .fullScreenCover 闭包已经毕竟捕获了新值,因此 Sheet 的 Text 显示为 number = 2
也就是说,通过添加 Text,让 ContextView 与 number 创建了关联,在 number 变化后,ContextView 进行了重新求值,从而让 fullScreenCover 的闭包捕获了变化后的 number 值,并呈现了预期中的结果。

解决方案

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

推荐阅读更多精彩内容