SwiftUI视图的背后是什么？

刚开始使用SwiftUI时，您会获得以下代码：

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

然后通常使用背景颜色修改该文本视图并期望其充满整个屏幕：

struct ContentView: View {
    var body: some View {
        Text("Hello World")
            .background(Color.red)
    }
}

但是，这不会发生。取而代之的是，我们在屏幕中心获得了一个小的红色文本视图，并在其后出现了一片白色的海洋。

这使人们感到困惑，并且通常会引发一个问题：“如何使视图后的内容变成红色？”

让我尽可能清楚地说：对于SwiftUI开发人员，我们的视图背后没有任何东西。您不应该尝试通过骇客或变通方法使空白变成红色，并且也不应该尝试在SwiftUI之外进行操作。

现在，至少现在在我们的内容视图后面有一个名为UIHostingController的东西：它是UIKit（苹果公司最初的iOS UI框架）和SwiftUI之间的桥梁。但是，如果您开始尝试进行修改，则会发现您的代码不再可以在Apple的其他平台上使用，实际上将来可能会完全停止在iOS上使用。

一旦有了这种想法，正确的解决方案就是使文本视图占用更多空间；使其充满整个屏幕，而不是精确地围绕其内容调整大小。我们可以通过使用frame（）修饰符来做到这一点，将.infinity同时传递给它的最大宽度和最大高度。

Text("Hello World")
    .frame(maxWidth: .infinity, maxHeight: .infinity)
    .background(Color.red)

使用maxWidth和maxHeight与使用width和height不同——我们并不是说文本视图必须占用所有空间或者是只有它可以占用。如果周围还有其他视图，SwiftUI将确保它们都获得足够的空间。

默认情况下，您的视图不会离开安全区域，但您可以通过使用edgeIgnoringSafeArea()修饰符来更改它，如下所示：

Text("Hello World")
    .frame(maxWidth: .infinity, maxHeight: .infinity)
    .background(Color.red)
    .edgesIgnoringSafeArea(.all)

效果对比

译自What is behind the main SwiftUI view?

Previous: 为什么SwiftUI的视图使用结构体？	Hacking with iOS: SwiftUI Edition	Next: 为什么SwiftUI的修饰符顺序很重要？

赏我一个赞吧~~~