美文网首页
SwiftUI-修饰符的顺序

SwiftUI-修饰符的顺序

作者: rayChow | 来源:发表于2021-07-16 16:39 被阅读0次

    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

    相关文章

      网友评论

          本文标题:SwiftUI-修饰符的顺序

          本文链接:https://www.haomeiwen.com/subject/ussbpltx.html