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
上一篇下一篇

猜你喜欢

热点阅读