SwiftUI View 與 Modifier 基礎

在深入學習各種 UI 元件之前，我們需要先理解 SwiftUI 的兩個核心概念：View (視圖) 和 Modifier (修飾符)。這兩個概念貫穿了整個 SwiftUI 開發過程。

什麼是 View？

在 SwiftUI 中，一切皆為 View。

View 是一個協議 (Protocol)，定義了使用者介面的一部分。從簡單的文字 (Text)、圖片 (Image)，到複雜的列表 (List) 甚至整個 App 的畫面結構，都是由 View 組成的。

View 的特點是輕量級且宣告式的。你不需要像以前 UIKit 那樣手動建立和管理視圖的生命週期，只需要定義 body 屬性來描述視圖應該長什麼樣子。

struct MyView: View {
    var body: some View {
        Text("這是一個 View")
    }
}

什麼是 Modifier？

Modifier 是用來改變 View 外觀或行為的方法。

在 SwiftUI 中，我們透過鏈式調用 (Chaining) 的方式，將 Modifier 附加到 View 上。每個 Modifier 都會回傳一個新的 View，這個新的 View 包裹了原本的 View 並套用了該修改。

Text("Hello")
    .font(.title)       // Modifier 1: 設定字體
    .foregroundColor(.red) // Modifier 2: 設定顏色
    .padding()          // Modifier 3: 增加留白
    .background(.blue)  // Modifier 4: 設定背景顏色

Modifier 的順序很重要

因為每個 Modifier 都會回傳一個新的 View，所以 Modifier 的執行順序會影響最終的結果。這在處理背景 (background)、邊框 (border) 或留白 (padding) 時特別明顯。

試著比較以下兩段程式碼的差異：

範例 A：先 Padding 再 Background

Text("Hello")
    .padding()      // 先在文字周圍增加留白
    .background(.red) // 再將背景填滿紅色

結果：紅色背景會包含留白的區域，看起來像一個有內距的按鈕。

範例 B：先 Background 再 Padding

Text("Hello")
    .background(.red) // 先將文字背景填滿紅色
    .padding()      // 再於紅色背景外圍增加留白

結果：紅色背景只會包住文字本身，留白是在紅色背景之外。

記住一個簡單的原則：Modifier 是由上往下執行的，每一層都包裹著上一層的結果。想像你在幫照片裱框，順序不同，框出來的效果自然不同。

宣告式語法 (Declarative Syntax)

SwiftUI 採用宣告式語法，這意味著我們關注的是狀態 (State) 和結果，而不是過程。

命令式 (Imperative, 舊式 UIKit)：「先建立一個 Label，設定它的字體，然後設定顏色，最後把它加到畫面上。」
宣告式 (Declarative, SwiftUI)：「我要一個紅色、大標題的文字標籤。」

當 App 的狀態改變時（例如使用者按下按鈕），SwiftUI 會自動根據新的狀態重新計算 body 屬性，並更新畫面。你不需要手動去修改 View 的內容。

理解了 View 和 Modifier 的關係後，下一章我們將開始介紹最常用的基礎元件：Text。