1 视图
1.1 基本框架
1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
| import SwiftUI
struct IntroView: View {
var body: some View {
// 从这里开始编写程序
Text("Hello, world.")
}
}
struct IntroView_Previews: PreviewProvider {
// 这里是生成预览
static var previews: some View {
VStack {
IntroView()
}
}
}
|
1.2 引用视图
这相当于 HTML 里的 iframe 。
直接把其他视图的文件名当做一个函数放到 body 里，就可以内嵌这个页面了。
1.3 对于任意元素的视图布局
注意：修饰符既可以直接修饰单个元素，也可以修饰整个 Stack 。如果修饰一个 Stack ，那么这个 Stack 里面所有的相应元素都会被修饰。
1.3.1 设置长宽（框架修饰符）
1.3.1.1 直接设置
1
2
| Rectangle()
.frame(width: 150, height: 233)
|
1.3.1.2 限制范围
1
2
3
| .frame(minWidth: 100, maxHeight: 200)
.frame(maxWidth: 50)
.frame(maxWidth: .infinity, maxHeight: 10) // 最大宽度设置为无穷大，就会延伸到填满空间
|
注意，对于一个图像，使用框架修饰符只会改变它周围空隙的大小。要改变图片的大小，需要加上 .resizable() 修饰符。
1.4 留白器
1.5 （语法）三元运算符
和 C++ 类似，如下：
1
| .frame(maxWidth: .infinity, alignment: isEditing ? .leading : .center)
|
2 文本类
2.1 最简单的文本
2.2 用变量保存文本并显示
1
| var t=Text("something")
|
2.3 修改字体
2.3.1 基本操作
1
2
| Text("friend")
.font(/* add something here ... */)
|
使用 .font() 修饰符，在里面添加类型。
2.3.2 大标题
1
2
| Text("friend")
.font(.largeTitle)
|
2.3.3 标题
1
2
| Text("ohh")
.font(.title)
|
2.3.4 说明文本
1
2
| Text("friend")
.font(.caption)
|
2.3.5 略加粗
3 图像类
3.1 最简单的图像
这将会使图片按原始大小显示在页面上。
3.2 使用系统内置的图标
1
2
3
| // 龟兔赛跑
Image(systemName: "tortoise")
Image(systemName: "hare")
|
3.3 大小可变的修饰符
1
2
| Image("FriendAndGem")
.resizable()
|
然后就可以使用其它的各种修饰符来给这个图像变换大小了。现在这个图像被不按原比例地拉伸填充整个屏幕了。
3.4 适合屏幕的缩放
1
2
3
| Image("FriendAndGem")
.resizable()
.scaledToFit()
|
这个图像被按原始比例缩放至适合屏幕了。
3.5 缩放以填充
1
2
3
| Image("FriendAndGem")
.resizable()
.scaledToFit()
|
4 容器
4.1 水平堆栈
1
2
3
4
5
6
7
8
9
10
11
12
13
14
| import SwiftUI
struct IntroView: View {
var body: some View {
Text("test.")
HStack {
Text("1")
Text("2")
Image("FriendAndGem")
.resizable()
.scaledToFit()
}
}
}
|
这里的 HStack 加在了 body 里面。
这样的所有元素都会水平排列。
4.2 垂直堆栈
1
2
3
4
5
6
7
| struct FriendDetailView: View {
var body: some View {
VStack {
/* something ... */
}
}
}
|
4.3 Z 轴堆栈
注意，在 ZStack 中，对于源代码从上到下的顺序，在真实的预览里是从下面到顶部。
4.4 Stack 的属性设定
4.4.1 对齐方式
可以指定该容器内部的元素的排列方式。默认左对齐。
4.4.1.1 垂直堆栈，只能设置水平对齐
1
2
3
4
5
6
| VStack (alignment: .leading) {
// 左对齐
}
VStack (alignment: .trailing) {
// 右对齐
}
|
4.4.1.2 水平堆栈，只能设置垂直对齐
1
2
3
4
5
6
| HStack (alignment: .top) {
// 上方对齐
}
HStack (alignment: .bottom) {
// 下方对齐
}
|
对于一个元素，还可以使用 frame 修饰符指定对齐方式：
1
2
| Image(systemName: "books.vertical.fill")
.frame(alignment: .trailing)
|
4.4.2 内部元素间距
1
2
3
| HStack(spacing: 20){
}
|
对于某个特定的元素，可以为其上下左右设置间距：
1
2
3
4
5
| .padding(.trailing, 20)
.padding(.leading, 20)
.padding(.top, 20)
.padding(.bottom, 20)
.padding(.horizontal, 20) // 四周全部
|
5 图形类
5.1 基本几何体
5.1.1 圆形
5.1.2 胶囊形
5.1.3 椭圆形
5.1.4 矩形
5.1.5 圆角矩形
1
2
| RoundedRectangle(cornerRadius: 10)
.foregroundColor(.brown)
|
如上代码，设置了填充色、圆角程度等。
5.2 色彩/风格设置
5.2.1 填充色/前景色
1
2
3
4
5
6
| Circle()
.foregroundColor(.blue)
Circle()
.foregroundColor(.mint)
Circle()
.foregroundColor(.bannerPink)
|
5.2.2 缩小
1
2
| Circle()
.inset(by: 40)
|
5.2.3 填充背景
注意：该方法也适用于一些图标或文字。
1
2
| Image(systemName: "books.vertical.fill")
.background(Color.yellow)
|
5.2.4 外框
5.2.5 位置偏移