Photo by Isaac Viglione on Unsplash

回顧昨天的 code :

我們來換換 Circle 的背景顏色吧

在 activities array 下寫 colors array , color 記得加 s

var colors: [Color] = [.blue, .cyan, .gray, .green, .indigo, .mint, .orange, .pink, .purple, .red]

Circle()
    .fill(.blue)

Circle()
    .fill(colors.randomElement() ?? .blue)

我們來改善佈局，用 Spacer() ，
結構大概如下：

var body: some View {
    VStack {
        VStack {
            HStack {
                Text("🏊🏻‍♂️")
                Text("奮泳向前")
                ZStack {
                    Text("🏊🏻‍♂️")
                    Text("🏊🏻‍♂️")
                    Text("🏊🏻‍♂️")
                }
            }
            Text("今天要揮灑汗水的姿勢")
        }

        Spacer()

        VStack {
            Circle()

            Text("\(selected)!")

        }

        Spacer()

        Button("Try again") {
            
        }

    }
}

圖示化表達

Spacer 是一個非常有用的元件，它在其父視圖內盡可能地擴展，將其他視圖推開。它實質上在使用者介面中創建了靈活的空間，允許動態佈局而不指定確切的尺寸。

就像人與人之間社交距離，自動會有 Spacer () 隔開。

當你遇到熱情洋溢的巴西人，還可以調整 Spacer () 間距。

Spacer().frame(height: 20)

Wait , 熊熊想起 UIKit 沒有提供類似 SwiftUI 的 Spacer 的元件，要靠其他招式達到類似的間隔和佈局效果。

UIKit 使用 Spacer 領域展開招式如下：

1. 使用UIView並設定其 Auto Layout 約束:
   • 你可以使用一個空的 UIView 作為 spacer，並根據你的需求設定其寬度或高度約束。
2. 使用 UILayoutGuide:
   • 在 iOS 9 及之後的版本中，你可以使用 UILayoutGuide 作為虛擬的界面元件來協助佈局。它不會在介面中呈現，但可以像其他界面元件一樣參與 Auto Layout。這對於創建不可見的間隔或空間非常有用。
3. 使用 Auto Layout 的 priority:
   • 你可以利用 Auto Layout 約束的 priority 屬性來模仿 Spacer 的行為。例如，你可以設定一個約束使某個界面元件的寬度為 0，但其 priority 較低。這樣在有其他更高優先級的約束存在時，該約束會被打破，從而達到動態間隔的效果。
4. 使用 UIStackView 的 spacing 屬性:
   • UIStackView 是一個自動管理子界面元件佈局的容器，類似 SwiftUI 的 HStack 和 VStack。你可以使用其 spacing 屬性來控制子界面元件之間的間隔。然而，這不像 Spacer 那樣提供動態間距的能力，除非你動態地添加和移除子界面元件。

Anyway 新時代，用新的招式，這篇寫的很好 學會這四個方法。

利用 Spacers、Stack Spacing 和 Alignment

利用 Shapes

利用 Frame Modifier

利用 Grids

趕緊學完這 4 招，替五哥報仇 🤞🏻

SwiftUI 領域展開，參戰！