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

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

[[414805]]

本文转载自微信公众号「Swift社区」,作者韦弦Zhy。转载本文请联系Swift社区公众号。

每当我们将修饰符应用于 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

 

责任编辑:武晓燕 来源: Swift社区
相关推荐

2023-12-29 09:01:27

SwiftUI视图修饰符

2009-08-24 16:49:39

C#修饰符

2023-02-13 11:06:58

决策智能数据分析

2022-01-10 23:39:18

Java测试开发

2023-05-23 16:08:19

2022-11-07 11:22:33

2024-01-08 13:28:00

5G低延迟

2022-05-11 15:08:16

加密货币私钥安全

2022-08-24 15:03:21

数据智能数据分析

2015-10-19 17:57:33

容器OpenStack微服务

2013-01-08 14:58:48

Firefox OS

2009-09-02 17:14:28

C#修饰符

2009-08-27 11:04:08

C# extern修饰

2009-08-27 13:06:13

C# new修饰符

2009-08-21 13:58:06

C# virtual修

2009-08-27 11:12:03

C# abstract

2018-10-25 15:20:17

区块链去中心化互联网

2022-11-15 14:52:09

虚拟孪生数字孪生

2010-10-26 13:44:15

2022-12-29 10:16:12

观察性系统监视
点赞
收藏

51CTO技术栈公众号