SwiftUI-修饰符的顺序

1.修饰符的顺序

每当我们将修饰符应用于 SwiftUI 视图时，我们实际上会创建一个应用该修饰的新视图，不只是修改现有视图。
修饰符对你所需要设置的UI样式效果至关重要：
当想创建一个红色背景的按钮时，第一想法的实现是什么呢？

Button("Hello World") {
    // 点击事件
}    
.background(Color.red)
.frame(width: 200, height: 200)

但是实际上是创建了一个200x200的白色按钮，文字的背景颜色是红色，效果未能达到预期。

截屏2021-07-16 下午4.31.33.png

如果考虑到修饰符的工作方式，我们就可以理解这里发生的事情：每个修饰符都会创建一个应用该修饰符的新结构，而不仅仅是在视图上设置属性，这意味着修饰符的顺序很重要。
那此时我们再思考一下要创建的目标控件，一个200x200的红色背景按钮，首先，要添加的修饰符就是设置它的frame，在确定了它的frame之后，才是background修饰

Button("Hello World") {
    // 点击事件
}    
.background(Color.red)
.frame(width: 200, height: 200)

截屏2021-07-16 下午4.31.03.png

2.修饰符可以多次叠加使用

例如，使用padding修饰符修饰时，会在控件外部增加一点空间，设置背景色时，会同样把该空间渲染，此时，在设置背景色后，继续padding，控件外部会继续增加空间

Text("Hello World")
            .padding()
            .background(Color.red)

Text("Hello World")
            .padding()
            .background(Color.red)
            .padding()

截屏2021-07-16 下午4.38.52.png

截屏2021-07-16 下午4.39.30.png