SwiftUI 是 Apple 新推出的一款能快速搭建页面的 framework。它采用的是声明式语法，简洁明了。
而且它是所见即所得的，你写的代码都能通过 Preview 实时的看到效果，这可以很大的节省开发者开发时间。当你开发一个复杂的项目，需要等待几分钟的时间去编译运行代码，只为了看一个 UILabel 字体大小或者颜色是否改变时，你就能体会到所见即所得的快乐了。
基础控件
当我们新建一个项目，选择 Interface 选择 SwiftUI 时，建好的项目会自带一个 ContentView，这是下面的默认代码：
struct ContentView: View {
var body: some View {
VStack {
Image(systemName: "globe")
.imageScale(.large)
.foregroundColor(.accentColor)
Text("Hello, world!")
}
.padding()
}
}
struct ContentView_Previews: PreviewProvider {
static var previews: some View {
ContentView()
}
}
ContentView 是需要我们根据需求修改代码的部分，下面的 ContentView_Previews 则是为了实时预览的。
Tips：如果注释ContentView_Previews，你会发现预览页面也会消失。
ContentView 代码说明
首先，可以看到 ContentView 有一个 body 的计算属性，该属性代表当前视图的内容。当你实现一个自定义 view 的时候，必须要实现该属性，否则代码会报错。
VStack 代表的是一个垂直布局。里面包含 Image 和 Text，两个控件垂直布局。padding 则代表当前视图外边距的间距。
Text 对应 UILabel
在 SwiftUI 中，用 Text 控件来展示静态文本。下面是它的代码示例：
Text("我是一个文本")
.font(.title)
.foregroundColor(.red)
.frame(width: 100, alignment: .center)
.lineLimit(1)
.background(.yellow)
常用的属性基本就这几个：
- font：字体。如果想更加细致化的指定字体，可以用 system，
.font(.system(size: 16, weight: .light))。 - foregroundColor：字体颜色。
- frame：控制文本的大小和对齐位置。这个不写的话默认是自适应宽高。如果仅指定宽度就是高度自适应，仅指定高度就是宽度自适应。
- lineLimit：指定行数，默认为 0，不限制行数。
- background：用来设置背景。比如背景形状、背景颜色等等。
Tips：SwiftUI 的布局简化了自动布局和弱化了 frame 指定具体数值的布局方式。默认都是自适应的，这一点和 Flutter 类似，大大提高了开发效率。
Image 对应 UIImageView
在 SwiftUI 中，Image 用来展示图像资源。下面是它的示例代码：
Image(systemName: "globe")
.resizable()
.aspectRatio(contentMode: .fit)
.foregroundColor(.accentColor)
.background(.red)
常用属性：
- resizable：可调整大小以适应当前布局。
- aspectRatio：调整缩放比。
- foregroundColor、background：参见 Text。
Button 对应 UIButton
在 SwiftUI 中，用 Button 来表示一个按钮。下面是它的示例代码：
Button {
print("点击了按钮")
} label: {
Text("按钮文本")
Image(systemName: "globe")
}
.cornerRadius(10)
.background(.red)
.font(.body)
.border(.black, width: 2)
常用属性：
- font、foregroundColor、background 等属性与 Text 使用一致。
- label：用来自定义按钮的文本和图标。
- cornerRadius：设置圆角。
- border：设置边框。
总结
本文主要讲解了 SwiftUI 的三个基本控件 Text：用来展示静态文本；Image：用来加载图像资源；Button：用来展示按钮。以及三个控件的基本使用。希望通过此文大家可以对 SwiftUI 的语法有个基本的了解。
