/

SwiftUI：堆疊和群組

SwiftUI：堆疊和群組

沒有一個 SwiftUI 的應用程式除了 Hello World 之外只有一個視圖。

當你想要添加多個視圖時，你需要將它們添加到一個堆疊中。

有三種類型的堆疊：

  • HStack 在 X 軸上對齊項目
  • VStack 在 Y 軸上對齊項目
  • ZStack 在 Z 軸上對齊項目

讓我們回到 Hello World 應用程式的程式碼：

1
2
3
4
5
6
7
import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Hello World")
    }
}

要添加第二個 Text 視圖，我們不能這樣做：

1
2
3
4
5
6
struct ContentView: View {
    var body: some View {
        Text("Hello World")
        Text("Hello again!")
    }
}

而必須將這些視圖嵌入到堆疊中。

讓我們嘗試使用 VStack：

1
2
3
4
5
6
7
8
struct ContentView: View {
    var body: some View {
        VStack {
            Text("Hello World")
            Text("Hello again!")
        }
    }
}

看到了嗎？這些視圖垂直對齊，一個接著一個。

這是 HStack：

這是 ZStack，它將項目放在彼此的前面，在這種情況下產生了一個混亂：

ZStack 是有用的，例如，可以在其上放置一個背景圖像和一些文本。這是你可以想到的最簡單的用例。

在 SwiftUI 中，我們使用這三種堆疊來組織我們的所有 UI。

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

1
2
3
4
5
6
VStack {
    Group {
        Text("Hello World")
        Text("Hello again!")
    }
}

除了在下一節中我們將看到的應用修改器到子視圖之外，Group 還有一個有用的用例是，視圖只能有 10 個子視圖。因此，您可以使用 Group 將最多 10 個視圖分組成一個視圖。

Group 和堆疊視圖也是視圖，因此它們也有修改器。

有時候修改器會影響到被應用的視圖，就像這個例子：

1
2
Text("Hello World")
    .font(.largeTitle)

有時候，它們則用於同時將屬性應用於多個視圖。

就像這樣：

1
2
3
4
5
VStack {
    Text("Hello World")
    Text("Hello again!")
}
    .font(.largeTitle)

看到了嗎？通過將 font() 修改器應用於 VStack，.largeTitle 字體被應用於兩個 Text 視圖。

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

tags: [“SwiftUI”, “stacks”, “groups”]