介绍
import SwiftUI
struct ContentView : View {
var body: some View {
Text("Hello World!")
}
}
它的结构如下：RootView —> ContentView —> Text，那么 Text 是如何显示在屏幕上的？官方的介绍是如下 3 个步骤。
- 父视图为子视图提供预估尺寸。
- 子视图计算自己的实际尺寸。
- 父视图根据子视图的尺寸将子视图放在自身的坐标系中。
最重要的是第 2 步，通常有 3 种设置尺寸的方式。
- 无需计算，根据内容推断，如 Image 根据图片大小，Text 根据文字范围。
- 使用 frame 强制指定宽高。
- 设置缩放比例，如 Image 设置 aspectRatio。
frame
准备一个 100*100 的图片。
struct ContentView: View {
var body: some View {
Image("img")
.border(Color.black)
.frame(width: 200, height: 200)
.border(Color.blue)
}
}
frame1.png
只有当 frame 大于内容的尺寸时，alignment 才有意义。
struct ContentView: View {
var body: some View {
Image("img")
.border(Color.black)
.frame(width: 200, height: 200, alignment: .topTrailing)
.border(Color.blue)
}
}
frame2.png
Stack
案例一
struct ContentView: View {
var body: some View {
HStack(spacing: 10) {
Image("img")
Image("img")
}
.frame(width: 250, height: 200)
.border(Color.blue)
}
}
总宽度超过 2 个 Image 和 spacing 之和，所以内容在 HStack 中正常显示。
Stack1.png
struct ContentView: View {
var body: some View {
HStack(spacing: 10) {
Image("img")
Image("img")
}
.frame(width: 140, height: 200)
.border(Color.blue)
}
}
总宽度小于 2 个 Image 和 spacing 之和，所以内容会超出 HStack。
Stack2.png
复杂案例
第 1 步：堆栈计算出内部间距和边距，并将其从其父视图建议的大小中减去。
第 2 步：对于每个剩余视图，堆栈将剩余空间分成相等的部分。然后选择其中一个作为最不灵活的孩子，从未分配的空间中扣除其大小，然后重复该过程。
第 3 步：所有的孩子都有尺寸以后，堆栈使用间距将它们对齐，并根据指定的对齐方式将它们对齐。最后，堆栈选择自己的大小以便完全包含子级。
struct ContentView: View {
var body: some View {
HStack(spacing: 10) {
Image("img")
Text("所有的孩子都有尺寸以后，堆栈使用间距将它们对齐，并根据指定的对齐方式将它们对齐。最后，堆栈选择自己的大小以便完全包含子级。")
Text("所有的孩子都有尺寸以后，堆栈使用间距将它们对齐，并根据指定的对齐方式将它们对齐。最后，堆栈选择自己的大小以便完全包含子级。")
}
.padding(.horizontal, 10)
.frame(width: 280, height: 200)
.border(Color.blue)
}
}
- 总宽度间距为 300，其中间距为 2 * 10，边距为 2 * 10，所以布局空间为：280-40 = 240。
- 堆栈将空间分成 3 个相等的部分，每个部分的宽度为 80。
- 将 80 这个尺寸推荐给最不灵活的孩子。案例中为 Image，其尺寸为 80x80。
- 堆栈从剩余空间中减去 Image 的宽度，因此剩余空间为 240-80 = 160。
- 堆栈再次将空间分成 2 个相等的部分，每个部分的宽度为 80。
- 它建议第 1 个 Text 的大小为 80x200。Text 回应内容不适合，但它至少可以显示一部分内容。第 2 个文本视图也是如此。因此，尽管文本视图的文本量不同，但它们的宽度都相同，都为 80。
Stack3.png
