服务器之家:专注于服务器技术及软件下载分享
分类导航

PHP教程|ASP.NET教程|Java教程|ASP教程|编程技术|正则表达式|C/C++|IOS|C#|Swift|Android|VB|R语言|JavaScript|易语言|vb.net|

服务器之家 - 编程语言 - Swift - 为什么 SwiftUI 的修饰符顺序很重要

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

2021-08-02 23:18Swift社区韦弦Zhy Swift

每当我们将修饰符应用于 SwiftUI 视图时,我们实际上都会创建一个,应用了更改的新视图 —— 我们不仅仅是修改现有的视图。

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

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

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

  1. Button("Hello World") { 
  2.     // do nothing 
  3. }     
  4. .background(Color.red) 
  5. .frame(width: 200, height: 200) 

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

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

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

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

  1. Button("Hello World") { 
  2.     print(type(of: self.body)) 
  3. }     
  4. .background(Color.red) 
  5. .frame(width: 200, height: 200) 

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

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

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

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

  • 最里面的类型是 ModifiedContent
  • 在外部,我们有了 ModifiedContent<…, _FrameLayout> ,它使用了我们的第一个视图(按钮+背景色),并为其提供了 Frame。

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

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

  1. Button("Hello World") { 
  2.     print(type(of: self.body)) 
  3. .frame(width: 200, height: 200) 
  4. .background(Color.red) 

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

当然,这不是 SwiftUI 实际上的工作方式,因为如果这样做,那将是性能上的噩梦,但这是学习的时候可以使用的一种简洁的思维捷径。

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

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

  1. Text("Hello World"
  2.     .padding() 
  3.     .background(Color.red) 
  4.     .padding() 
  5.     .background(Color.blue) 
  6.     .padding() 
  7.     .background(Color.green) 
  8.     .padding() 
  9.     .background(Color.yellow) 

译自 Why modifier order matters[1]

参考资料

[1]Why modifier order matters: https://www.hackingwithswift.com/books/ios-swiftui/why-modifier-order-matters

原文地址:https://mp.weixin.qq.com/s/K_i8bvcaHDfVMUsQTv3MOw

延伸 · 阅读

精彩推荐