介紹
import SwiftUI
struct ContentView : View {
var body: some View {
Text("Hello World!")
}
}
它的結(jié)構(gòu)如下：RootView —> ContentView —> Text砂代，那么 Text 是如何顯示在屏幕上的蹋订？官方的介紹是如下 3 個(gè)步驟。
- 父視圖為子視圖提供預(yù)估尺寸刻伊。
- 子視圖計(jì)算自己的實(shí)際尺寸露戒。
- 父視圖根據(jù)子視圖的尺寸將子視圖放在自身的坐標(biāo)系中。
最重要的是第 2 步捶箱，通常有 3 種設(shè)置尺寸的方式智什。
- 無(wú)需計(jì)算，根據(jù)內(nèi)容推斷丁屎，如 Image 根據(jù)圖片大小荠锭，Text 根據(jù)文字范圍。
- 使用 frame 強(qiáng)制指定寬高晨川。
- 設(shè)置縮放比例证九，如 Image 設(shè)置 aspectRatio。
frame
準(zhǔn)備一個(gè) 100*100 的圖片共虑。
struct ContentView: View {
var body: some View {
Image("img")
.border(Color.black)
.frame(width: 200, height: 200)
.border(Color.blue)
}
}
frame1.png
只有當(dāng) frame 大于內(nèi)容的尺寸時(shí)愧怜，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)
}
}
總寬度超過(guò) 2 個(gè) Image 和 spacing 之和看蚜，所以內(nèi)容在 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 個(gè) Image 和 spacing 之和，所以內(nèi)容會(huì)超出 HStack。
Stack2.png
復(fù)雜案例
第 1 步：堆棧計(jì)算出內(nèi)部間距和邊距渴逻，并將其從其父視圖建議的大小中減去疾党。
第 2 步：對(duì)于每個(gè)剩余視圖，堆棧將剩余空間分成相等的部分惨奕。然后選擇其中一個(gè)作為最不靈活的孩子雪位，從未分配的空間中扣除其大小，然后重復(fù)該過(guò)程梨撞。
第 3 步：所有的孩子都有尺寸以后雹洗，堆棧使用間距將它們對(duì)齊，并根據(jù)指定的對(duì)齊方式將它們對(duì)齊卧波。最后时肿，堆棧選擇自己的大小以便完全包含子級(jí)。
struct ContentView: View {
var body: some View {
HStack(spacing: 10) {
Image("img")
Text("所有的孩子都有尺寸以后港粱，堆棧使用間距將它們對(duì)齊螃成，并根據(jù)指定的對(duì)齊方式將它們對(duì)齊。最后查坪，堆棧選擇自己的大小以便完全包含子級(jí)寸宏。")
Text("所有的孩子都有尺寸以后，堆棧使用間距將它們對(duì)齊偿曙，并根據(jù)指定的對(duì)齊方式將它們對(duì)齊氮凝。最后，堆棧選擇自己的大小以便完全包含子級(jí)望忆。")
}
.padding(.horizontal, 10)
.frame(width: 280, height: 200)
.border(Color.blue)
}
}
- 總寬度間距為 300罩阵，其中間距為 2 * 10，邊距為 2 * 10炭臭，所以布局空間為：280-40 = 240永脓。
- 堆棧將空間分成 3 個(gè)相等的部分，每個(gè)部分的寬度為 80鞋仍。
- 將 80 這個(gè)尺寸推薦給最不靈活的孩子。案例中為 Image搅吁，其尺寸為 80x80威创。
- 堆棧從剩余空間中減去 Image 的寬度，因此剩余空間為 240-80 = 160谎懦。
- 堆棧再次將空間分成 2 個(gè)相等的部分肚豺，每個(gè)部分的寬度為 80。
- 它建議第 1 個(gè) Text 的大小為 80x200界拦。Text 回應(yīng)內(nèi)容不適合吸申，但它至少可以顯示一部分內(nèi)容。第 2 個(gè)文本視圖也是如此。因此截碴，盡管文本視圖的文本量不同梳侨，但它們的寬度都相同，都為 80日丹。
Stack3.png
