SwiftUI丨1分钟搞懂View与Modifers

一、在搭建界面的时候，只需要解决 2 个问题：

1、界面中都有哪些 元素？

2、怎么 修饰 这些元素 ？

二、认识元素和修饰符：

这里说的“元素”，其实就是界面中一个一个的部件，比如

一个 “ 按钮 ” ；

一段 “ 文字 ” ；

一张 “ 图片 ” ；

一个 “ 矩形 ” ；

... ...

这些元素的组合到一起，就成了我们看见的界面；

然而这些元素的堆砌只是满足了功能的需求，并没有满足设计的要求，所以还需要进行美化，美化就需要给这些元素增加一些修饰，比如

一个 “ 红色 ” 的按钮

一段 “ 间距为15的红色 ” 的文字

一张 “ 尺寸为100 × 100 " 的图片

一个 “ 圆角为10 ” 的矩形

解读：

一个红色的按钮

元素（View）：按钮

修饰（Modifers）：红色

一段间距为15的红色的文字

元素（View）：文字

修饰（Modifers）：间距和颜色

一张尺寸为100 × 100的图片

元素（View）：图片

修饰（Modifers）：尺寸

一个圆角为10的矩形

元素（View）：矩形

修饰（Modifers）：圆角

三、总结：

界面 = View（元素） + Modifers（修饰符）

四、在代码中再认识View（元素）和 Modifers（修饰符）：

import SwiftUI

struct MeiGuiTu: View {

    var body: some View {
        VStack(spacing: 20  ){ 

            Button("一个按钮"){  //我是元素

            }

            .frame(width: 100, height: 30)  //我是修饰符

            .background(Color.red)  //我是修饰符

            .foregroundColor(.white)  //我是修饰符
            
            Text(""" 

洞门高阁霭馀辉，桃李阴阴柳絮飞。

禁里疏钟官舍晚，省中啼鸟吏人稀。

晨摇玉佩趋金殿，夕奉天书拜琐闱。

强欲从君无那老，将因卧病解朝衣。

""")  //我是元素

                .lineSpacing(15)  //我是修饰符

            Image("2")  //我是元素

                .resizable()  //我是修饰符

                .scaledToFit()  //我是修饰符

                .frame(width: 100, height: 100)  //我是修饰符

            RoundedRectangle(cornerRadius: 10, style: .continuous)  //我是元素

                .frame(width:100 , height: 100)  //我是修饰符

        }

    }

}

struct MeiGuiTu_Previews: PreviewProvider {

    static var previews: some View {

        MeiGuiTu()

    }

}

你答应过我，我用心写，你用心看；既会 点赞，还会 收藏，偶尔还会 分享 和 打赏！

本篇完，感谢阅读！

送给想学《缠论》但一直被缠的朋友，下面这个视频可能是你遇到的最易懂的缠论课程（传送门）