1 视图#

1.1 基本框架#

1
import SwiftUI
2

3
struct IntroView: View {
4
    var body: some View {
5
    // 从这里开始编写程序
6
        Text("Hello, world.")
7
    }
8
}
9

10
struct IntroView_Previews: PreviewProvider {
11
  // 这里是生成预览
12
    static var previews: some View {
13
        VStack {
14
            IntroView()
15
        }
16
    }
17
}

1.2 引用视图#

这相当于 HTML 里的 iframe 。

1
FriendDetailView()

直接把其他视图的文件名当做一个函数放到 body 里，就可以内嵌这个页面了。

1.3 对于任意元素的视图布局#

注意：修饰符既可以直接修饰单个元素，也可以修饰整个 Stack 。如果修饰一个 Stack ，那么这个 Stack 里面所有的相应元素都会被修饰。

1.3.1 设置长宽（框架修饰符）#

1.3.1.1 直接设置#

1
Rectangle()
2
  .frame(width: 150, height: 233)

1.3.1.2 限制范围#

1
.frame(minWidth: 100, maxHeight: 200)
2
.frame(maxWidth: 50)
3
.frame(maxWidth: .infinity, maxHeight: 10) // 最大宽度设置为无穷大，就会延伸到填满空间

注意，对于一个图像，使用框架修饰符只会改变它周围空隙的大小。要改变图片的大小，需要加上 .resizable() 修饰符。

1.4 留白器#

1
Spacer()

1.5 （语法）三元运算符#

和 C++ 类似，如下：

1
.frame(maxWidth: .infinity, alignment: isEditing ? .leading : .center)

2 文本类#

2.1 最简单的文本#

1
Text("Hello, world.")

2.2 用变量保存文本并显示#

1
var t=Text("something")

2.3 修改字体#

2.3.1 基本操作#

1
Text("friend")
2
  .font(/* add something here ... */)

使用 .font() 修饰符，在里面添加类型。

2.3.2 大标题#

1
Text("friend")
2
  .font(.largeTitle)

2.3.3 标题#

1
Text("ohh")
2
  .font(.title)

2.3.4 说明文本#

1
Text("friend")
2
  .font(.caption)

2.3.5 略加粗#

1
.frame(.headline)

3 图像类#

3.1 最简单的图像#

1
Image("FriendAndGem")

这将会使图片按原始大小显示在页面上。

3.2 使用系统内置的图标#

1
// 龟兔赛跑
2
Image(systemName: "tortoise")
3
Image(systemName: "hare")

3.3 大小可变的修饰符#

1
Image("FriendAndGem")
2
  .resizable()

然后就可以使用其它的各种修饰符来给这个图像变换大小了。现在这个图像被不按原比例地拉伸填充整个屏幕了。

3.4 适合屏幕的缩放#

1
Image("FriendAndGem")
2
  .resizable()
3
  .scaledToFit()

这个图像被按原始比例缩放至适合屏幕了。

3.5 缩放以填充#

1
Image("FriendAndGem")
2
  .resizable()
3
  .scaledToFit()

4 容器#

4.1 水平堆栈#

1
import SwiftUI
2

3
struct IntroView: View {
4
    var body: some View {
5
        Text("test.")
6
        HStack {
7
            Text("1")
8
            Text("2")
9
            Image("FriendAndGem")
10
                .resizable()
11
                .scaledToFit()
12
        }
13
    }
14
}

这里的 HStack 加在了 body 里面。

这样的所有元素都会水平排列。

4.2 垂直堆栈#

1
struct FriendDetailView: View {
2
    var body: some View {
3
        VStack {
4
            /* something ... */
5
        }
6
    }
7
}

4.3 Z 轴堆栈#

1
ZStack {
2

3
}

注意，在 ZStack 中，对于源代码从上到下的顺序，在真实的预览里是从下面到顶部。

4.4 Stack 的属性设定#

4.4.1 对齐方式#

可以指定该容器内部的元素的排列方式。默认左对齐。

4.4.1.1 垂直堆栈，只能设置水平对齐#

1
VStack (alignment: .leading) {
2
  // 左对齐
3
}
4
VStack (alignment: .trailing) {
5
  // 右对齐
6
}

4.4.1.2 水平堆栈，只能设置垂直对齐#

1
HStack (alignment: .top) {
2
  // 上方对齐
3
}
4
HStack (alignment: .bottom) {
5
  // 下方对齐
6
}

对于一个元素，还可以使用 frame 修饰符指定对齐方式：

1
Image(systemName: "books.vertical.fill")
2
  .frame(alignment: .trailing)

4.4.2 内部元素间距#

1
HStack(spacing: 20){
2

3
}

对于某个特定的元素，可以为其上下左右设置间距：

1
.padding(.trailing, 20)
2
.padding(.leading, 20)
3
.padding(.top, 20)
4
.padding(.bottom, 20)
5
.padding(.horizontal, 20) // 四周全部

5 图形类#

5.1 基本几何体#

5.1.1 圆形#

1
Circle()

5.1.2 胶囊形#

1
Capsule()

5.1.3 椭圆形#

1
Ellipse()

5.1.4 矩形#

1
Rectangle()

5.1.5 圆角矩形#

1
RoundedRectangle(cornerRadius: 10)
2
  .foregroundColor(.brown)

如上代码，设置了填充色、圆角程度等。

5.2 色彩/风格设置#

5.2.1 填充色/前景色#

1
Circle()
2
  .foregroundColor(.blue)
3
Circle()
4
  .foregroundColor(.mint)
5
Circle()
6
  .foregroundColor(.bannerPink)

5.2.2 缩小#

1
Circle()
2
  .inset(by: 40)

5.2.3 填充背景#

注意：该方法也适用于一些图标或文字。

1
Image(systemName: "books.vertical.fill")
2
  .background(Color.yellow)

5.2.4 外框#

1
.border(Color.black)

5.2.5 位置偏移#

1
.offset(x: -2, y: 20)

SwiftUI 学习笔记（一）基础语法