先看看下面这段代码引出的奇怪现象
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 求值时进行一定的操作:
- overlay、background 等,会在 body 求值时调用、解析( 因为要与主视图一并显示 )
- 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 值,并呈现了预期中的结果。
解决方案
- 加上这句 // .id(number)
- 加上 这句 // .onChange(of: number, perform: { _ in // do noting })
- @StateObject var custom = Custom(), 用custom里的number带头@state var number, @StateObject实例的属性不管有没有使用都要重新求值body