沒有一個 SwiftUI 的應用程式除了 Hello World 之外只有一個視圖。
當你想要添加多個視圖時,你需要將它們添加到一個堆疊中。
有三種類型的堆疊:
HStack
在 X 軸上對齊項目VStack
在 Y 軸上對齊項目ZStack
在 Z 軸上對齊項目
讓我們回到 Hello World 應用程式的程式碼:
import SwiftUI
struct ContentView: View {
var body: some View {
Text("Hello World")
}
}
要添加第二個 Text
視圖,我們不能這樣做:
struct ContentView: View {
var body: some View {
Text("Hello World")
Text("Hello again!")
}
}
而必須將這些視圖嵌入到堆疊中。
讓我們嘗試使用 VStack
:
struct ContentView: View {
var body: some View {
VStack {
Text("Hello World")
Text("Hello again!")
}
}
}
看到了嗎?這些視圖垂直對齊,一個接著一個。
這是 HStack
:
這是 ZStack
,它將項目放在彼此的前面,在這種情況下產生了一個混亂:
ZStack
是有用的,例如,可以在其上放置一個背景圖像和一些文本。這是你可以想到的最簡單的用例。
在 SwiftUI
中,我們使用這三種堆疊來組織我們的所有 UI。
我們還使用 Group
,Group
與堆疊視圖類似,可以將多個視圖分組在一起,但與堆疊視圖不同的是,它不會影響布局。
VStack {
Group {
Text("Hello World")
Text("Hello again!")
}
}
除了在下一節中我們將看到的應用修改器到子視圖之外,Group 還有一個有用的用例是,視圖只能有 10 個子視圖。因此,您可以使用 Group 將最多 10 個視圖分組成一個視圖。
Group
和堆疊視圖也是視圖,因此它們也有修改器。
有時候修改器會影響到被應用的視圖,就像這個例子:
Text("Hello World")
.font(.largeTitle)
有時候,它們則用於同時將屬性應用於多個視圖。
就像這樣:
VStack {
Text("Hello World")
Text("Hello again!")
}
.font(.largeTitle)
看到了嗎?通過將 font()
修改器應用於 VStack
,.largeTitle
字體被應用於兩個 Text
視圖。
這對於我們稱為環境修改器的修改器是有效的。並非每個修改器都可以以這種方式工作,但有些修改器可以,就像上面的例子一樣。