沒有一個 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。

我們還使用 GroupGroup 與堆疊視圖類似,可以將多個視圖分組在一起,但與堆疊視圖不同的是,它不會影響布局。

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 視圖。

這對於我們稱為環境修改器的修改器是有效的。並非每個修改器都可以以這種方式工作,但有些修改器可以,就像上面的例子一樣。