/

SwiftUI: 瀏覽視圖和修飾器

SwiftUI: 瀏覽視圖和修飾器

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

SwiftUI 就是關於視圖的。

還記得 Hello World 應用程式嗎?

1
2
3
4
5
6
7
import SwiftUI

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

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

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

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

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

視圖可以有修飾器

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

1
2
3
4
5
6
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 視圖的背景,然後給它添加一些填充。

1
2
3
Text("Hello World")
.padding()
.background(Color.blue)

這是結果:

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

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

tags: [“SwiftUI”, “views”, “modifiers”]