SwiftUI 入门教程 - 基础控件

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 的语法有个基本的了解。