SwiftUI：添加导航栏

默认情况下，iOS允许我们在屏幕上的任何地方放置内容，包括在系统时钟和主指示器下。这看起来不太好，这就是为什么默认情况下，SwiftUI会确保组件放置在系统UI或设备圆角无法覆盖的区域中，这一区域称为安全区域。

在iPhone 11上，安全区域的范围从略低于刘海到略高于主指示器（底部白条）。您可以在这样的用户界面中看到它的运行：

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

尝试在iOS模拟器中运行它——按Xcode窗口左上角的Play按钮，或者按Cmd+R。

您将看到表单开始于刘海之下，因此默认情况下，表单中的行是完全可见的。然而，表单也可以滚动，所以如果你在模拟器中来回滑动，你会发现你可以将行向上移动，使其在时钟下运行，使它们都很难阅读。

一种常见的解决方法是在屏幕顶部放置一个导航栏。导航栏可以有标题和按钮，在SwiftUI中，它们还让我们能够在用户执行操作时显示新视图。

我们将在稍后的项目中讨论按钮和新视图，但我至少想向您展示如何添加导航栏并给它一个标题，因为它使我们的表单在滚动时看起来更好。

您已经看到，我们可以将文本视图放置在Section中，并且我们可以类似的方式将Section放置在Form中。好吧，我们以同样的方式添加一个导航栏，除了这里它被称为NavigationView。

var body: some View {
    NavigationView {
        Form {
            Section {
                Text("Hello World")
            }
        }
    }
}

当您在Xcode的画布中看到该代码时，您会注意到在UI的顶部有一个很大的灰色空间。好吧，那是我们的导航栏，如果你在模拟器中运行代码，当它移动到屏幕顶部时，你会看到表单在导航栏下滑动。

您通常希望在导航栏中放置某种标题，您可以通过将修饰符（Modifiers）附加到您放置在其中的任何内容来完成此操作。修饰符是有一个小区别的常规方法：它们总是返回一个新的实例。

我们尝试添加一个修饰符来设置表单的导航栏标题：

NavigationView {
    Form {
        Section {
            Text("Hello World")
        }
    }
    .navigationBarTitle(Text("SwiftUI"))
}

当我们将.navigationBarTitle()修饰符附加到表单时，Swift实际上会创建一个新表单，该表单具有导航栏标题和您提供的所有现有内容。

将标题添加到导航栏时，您会注意到该标题使用了大字体。您可以使用稍微不同的navigationBarTitle（）调用获得一个小字体：

.navigationBarTitle("SwiftUI", displayMode: .inline)

你可以在手机设置应用程序中看到苹果是如何使用这些大小标题的：第一个屏幕用大文本显示“设置”，随后的屏幕用小文本显示它们的标题。

因为使用大标题是很常见的，所以有一个快捷方式版本可以让您使用纯字符串而不是文本视图：

.navigationBarTitle("SwiftUI")

译自 Adding a navigation bar

Previous: 创建表单	Hacking with iOS: SwiftUI Edition	Next: 修改程序状态