SwiftUI: 瀏覽視圖和修飾器

在 SwiftUI 簡介 文章中，我提到了視圖。

SwiftUI 就是關於視圖的。

還記得 Hello World 應用程式嗎？

import SwiftUI

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

ContentView 是主要的視圖。它的工作是定義構成我們應用程式的視圖。

在這裡，我們只有一個視圖，Text。

如果你在 Xcode 中運行這段程式碼，應用程式會如下所示：

注意在 ContentView 結構後面的額外程式碼：這是告訴 Xcode 在右側的預覽面板中要顯示什麼的方式。這不是應用程式的一部分，但在開發中會用到。

視圖可以有修飾器。

以下是 Text 視圖的一個修飾器範例：font()。

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

這個修飾器接受我們創建的 Text 視圖並使字體變大：

不同的視圖可以有不同的修飾器。

到目前為止，我們只看到了 Text 視圖，這個視圖有許多你可以使用的修飾器，其中包括：

• font() 設定視圖中文字的默認字體
• background() 設定視圖的背景
• foregroundColor() 設定視圖顯示的前景元素的顏色
• padding() 在視圖四邊添加填充

⋯還有許多其他的修飾器。對於 Text 視圖，你可以在這個頁面查看所有可以使用的修飾器：https://developer.apple.com/documentation/swiftui/text-view-modifiers。

重要的是要注意，修飾器並不修改現有的視圖。它實際上是接受一個現有的視圖並創建一個新的視圖。

為什麼這很重要？因為這個事實導致修飾器的順序很重要。

假設你想要設定 Text 視圖的背景，然後給它添加一些填充。

Text("Hello World")
    .padding()
    .background(Color.blue)

這是結果：

但是，如果你倒置這兩個修飾器，你會得到這個結果：

這是因為修飾器在應用後返回一個新的視圖，而不是修改現有的視圖。