SwiftUI-修饰符的顺序
2021-07-16 本文已影响0人
rayChow
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