为什么SwiftUI修饰符顺序很重要?

2020-03-26 22:13:11 浏览数 (1)

每当我们将修饰符应用于SwiftUI视图时,我们实际上都会创建一个应用了更改的新视图——我们不仅会修改现有的视图。如果您考虑一下,这种行为是有道理的——我们的视图仅保留我们赋予它们的确切属性,因此,如果我们设置背景颜色或字体大小,则无处存储该数据。

我们将在下一章中查看为什么会发生这种情况,但是首先,我想看看这种行为的实际含义。看一下这段代码:

代码语言:javascript复制
Button("Hello World") {
    // do nothing
}    
.background(Color.red)
.frame(width: 200, height: 200)

您认为它运行时会是什么样?

您很可能猜错了:您不会在中间看到带有“ Hello World”的200x200红色按钮。相反,您会看到一个200x200的空正方形,中间是“ Hello World”,在“ Hello World”周围有一个红色矩形。

如果思考一下修饰符的工作原理,您就可以了解为什么会如此:每个修饰符都会创建一个应用了该修饰符的新结构体,而不是在视图上设置属性。

您可以通过查询视图主体的类型来窥视SwiftUI的底层。将按钮修改为如下:

代码语言:javascript复制
Button("Hello World") {
    print(type(of: self.body))
}    
.background(Color.red)
.frame(width: 200, height: 200)

Swift的type(of:)方法会打印特定值的确切类型,在这种情况下,它将打印以下内容:ModifiedContent<ModifiedContent<Button<Text>, _BackgroundModifier<Color>>, _FrameLayout>

您可以在这里看到两件事:

  • 每次我们修改视图时,SwiftUI都会使用以下泛型来应用该修饰符:ModifiedContent<OurThing, OurModifier>
  • 当我们应用多个修饰符时,它们会叠加在一起:ModifiedContent<ModifiedContent<…

要了解该类型是什么,请从最里面的类型开始,然后逐步解决:

  • 最里面的类型是ModifiedContent<Button<Text>, _BackgroundModifier<Color>:您的按钮上有一些带有背景色的文本。
  • 在外部,我们有了ModifiedContent<…, _FrameLayout>,它使用了我们的第一个视图(按钮 背景色),并为其提供了Frame。

如您所见,我们使用ModifiedContent类型堆叠——每个视图都需要一个视图进行转换以及要进行的实际更改,而不是直接修改视图。

这意味着修饰符的顺序很重要。如果我们重写代码以在设置Frame后应用背景色,那么您就会得到预期的结果:

代码语言:javascript复制
Button("Hello World") {
    print(type(of: self.body))
}
.frame(width: 200, height: 200)
.background(Color.red)

现在最好的思考方法是,想象一下SwiftUI在每个修饰符之后都会呈现您的视图。因此,只要您说 .background(Color.red),它就会将背景颜色变为红色,而不管您给它什么Frame。如果您之后再扩展Frame,它将不会神奇地重绘已经应用了的背景。

使用修饰符的一个重要副作用是,我们可以多次应用相同的效果:每个修饰符都会简单地添加到以前的内容中。

例如,SwiftUI为我们提供了padding()修饰符,该修饰符在视图周围添加了一些空间,从而不会将其推到其他视图或屏幕边缘。如果我们应用填充,然后应用背景色,然后应用更多填充和不同的背景色,则可以为视图提供多个边框,如下所示:

代码语言:javascript复制
Text("Hello World")
    .padding()
    .background(Color.red)
    .padding()
    .background(Color.blue)
    .padding()
    .background(Color.green)
    .padding()
    .background(Color.yellow)

0 人点赞