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