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)

这就是结果。

但如果你把这两个修改器颠倒过来，你会得到这个结果。

这是修改器应用后返回一个新视图的结果，而不是修改现有视图。