[SwiftUI练级-1]--增加导航栏

[SwiftUI练级-1]--增加导航栏

默认情况下，iOS允许我们把内容放置在屏幕上的任何地方，包括系统时钟和home指示器的下面。这样看起来并不美观，因此SwiftUI默认会确保所有的内容被放置在不会被系统UI或者屏幕圆角覆盖的地方，即所谓的safe area。在iPhone 11上，safe area是从刘海以下一直到home指示器之间的区域，看一下实际效果吧：

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

你可以通过iOS模拟器来查看效果，点击Xcode窗口左上角的Play按钮，或者按下Cmd+R。你会看到Form从刘海下面开始，默认全屏展示。但是，Form是可以滚动的，当你在模拟器中swipe时，Form里的行会跑到系统时钟下面，变得难以阅读。解决这个问题的常见方法是在屏幕顶部放置一个导航栏。导航栏可以有标题和按钮。在SwiftUI中，导航栏支持在用户执行动作时显示新的视图。按钮和新视图会在后面的工程中展示，这次我们先给导航栏添加一个标题，它将改善Form在滚动后的视觉。跟上面的方式类似，我们在外面再包上一层视图，这一次这个视图叫 NavigationView。

    NavigationView {
        Form {
            Section {
                Text("Hello World")
            }
        }
    }
}

当你在Xcode的画布中查看效果时，你会留意到顶部有一片灰色的区域。是的，它是导航栏的区域。你通常会希望给导航栏设置一个标题，可以用 modifier 来实现。Modifiers 跟常规的方法有一点区别：无论你把它们用在哪里，它们总会返回新的实例。让我们为Form设置一个标题吧：

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

当你添加 .navigationBarTitle() modifier 到我们的 Form 时，Swift 实际上创建了一个新的 Form，这个新的 Form 基于前面所有的内容增加了一个导航栏标题。注意导航栏标题，你会注发现它使用了标题的字号。为了得到一个更小的字号，你可以用一种略有不同的方式调用

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

在设置app中，你会发现 Apple 大小两种标题字号：前面那屏是大字号，后来那屏是小字号。因为大字号更普遍，所以这个API有一个便利版本，允许你直接用字符串而不是文本控件来设置标题：

.navigationBarTitle("SwiftUI")