SwiftUI 官方教程（二）

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教程（三）