SwiftUI 官方教程（二）

2. 自定義 Text View

為了自定義 view 的顯示，我們可以自己更改代碼，或者使用 inspector 來幫助我們編寫代碼。

在構建 Landmarks 的過程中，我們可以使用任何編輯器來工作：編寫源碼、修改 canvas、或者通過 inspectors ，無論使用哪種工具，代碼都會保持更新。

接下來，我們使用 inspector 來自定義 text view 。

SwiftUI教程

 

2.1 在預覽中，按住 Command 並單擊問候語來顯示編輯窗口，然后選擇 Inspect 。

編輯窗口顯示了可以修改的不同屬性，具體取決於其 view 類型。

2.2 用 inspector 將文本改為 Turtle Rock ，這是在 app 中顯示的第一個地標的名字。

SwiftUI教程

2.3 將 Font 修改為 Title 。

這個修改會讓文本使用系統字體，之后它就能正確顯示用戶的偏好字體大小和設置。

Edit the code by hand to add the .color(.green) modifier; this changes the text’s color to green.

To customize a SwiftUI view, you call methods called modifiers. Modifiers wrap a view to change its display or other properties. Each modifier returns a new view, so it’s common to chain multiple modifiers, stacked vertically.

2.4 在代碼中添加 .color(.green) ，將文本的顏色更改為綠色。

如果想自定義 SwiftUI 的 view，我們可以調用一類叫做 modifiers 的方法。這類方法通過包裝一個 view 來改變它的顯示或者其他屬性。每個 modifiers 方法會返回一個新的 view，因此我們可以鏈式調用多個 modifiers 方法。

ContentView.swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Turtle Rock")
            .font(.title)
            .color(.green)
    }
}

struct ContentView_Preview: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

view 的真實來源是其實是代碼，當我們使用 inspector 修改或刪除 modifiers 時，Xcode 會立即更新我們的代碼。

2.5 這次我們在代碼編輯區按住 Command ，單擊 Text 的聲明來打開 inspector ，然后選擇 Inspect 。單擊顏色菜單並且選擇 Inherited ，這樣文字又變回了黑色。

2.6 注意，Xcode 會自動針對修改來更新代碼，例如刪除了 .color(.green) 。

ContentView.swift

import SwiftUI

struct ContentView: View {
    var body: some View {
        Text("Turtle Rock")
            .font(.title)

    }
}

struct ContentView_Preview: PreviewProvider {
    static var previews: some View {
        ContentView()
    }
}

 

SwiftUI教程（一）

SwiftUI教程（三）