2.3 创建Tab View导航

在本节中，我们将为项目创建一个Tab View导航，通过它可以帮助我们更有效地组织项目中的视图。

首先，我们需要将整个项目的结构调整一下，让它更规范，以便于提高我们的开发速度。

在项目中新添加Data、Model、View和App 4个文件夹，根据前一章的经验你应该知道，Data是存放数据文件的，Model是存放数据模型文件的，View是存放可复用或小视图文件的，而App是存放场景视图的。我们将ThisIsBeijingApp和ContentView两个swift文件拖曳到App文件夹中。

2.3.1 创建4个场景视图

本项目中的Tab View一共要组织4个场景视图，分别为简介、小吃、胡同和设置。所以我们需要先在App文件夹中创建好这4个视图。

首先在项目导航中选择ContentView文件，我们将来会用它呈现介绍北京小吃的视图，所以将该结构体的名字修改为FoodView。但是直接修改名称显然费时费力，还可能出现意想不到的问题。所以需要使用Xcode的Refactor方法。

在编辑区域中右击ContentView选项，在弹出的快捷菜单中选择Refactor > Rename，此时在Xcode编辑区域中会列出项目中所有与ContentView相关的代码（code）、文件（file）、备注（comment），一共5处，如图2-17所示。直接将其修改为FoodView即可。

图2-17 修改ContentView名称

重新回到FoodView，将Text的内容修改为Food View。

在App文件夹中再新建3个SwiftUI类型的文件，文件名称分别为BeijingView、HutongView和SettingsView，并将每个文件中的Text内容修改为Beijing、Hutong和Settings。

2.3.2 创建Tab View

在App文件夹中新建一个SwiftUI类型文件，将其命名为AppView，我们将在该文件中创建Tab View，并将该文件作为程序的主视图文件。修改Body部分的代码如下。

在Body部分，我们创建了一个Tab View，然后在其内部添加之前创建好的4个场景视图，每个视图都设置了tabItem修饰器。通过该修饰器，配置了标签部分的图标和文字信息。最后，我们还为TabView添加了accentColor修饰器，让文本的颜色为系统主色，这样在浅色和深色模式下，文字会呈现与之相匹配的颜色。

为了可以同时看到浅色和深色模式的效果，我们可以修改Preview部分的代码如下。

此时的预览窗口中会同时显示两个iPhone屏幕，一个是浅色模式，一个是深色模式，效果如图2-18所示。

图2-18 两种模式下Tab View的显示效果