2.1　视图、视图修饰符、布局方式

在创建SwiftUI项目之前，本节先介绍SwiftUI项目模板的代码结构。

一款应用的基础创建过程是先基于App协议创建一个应用，然后基于Scene协议创建视图层级结构的容器，最后在View中搭建具体的UI。项目模板的代码结构如图2-1所示。

图2-1　项目模板的代码结构

在ContentView视图部分，代码结构为创建一个遵循View协议的结构体，并且声明一个遵循View协议的、具备body属性的视图容器，以便显示视图上的内容。

在图2-1展示的示例代码中，ContentView可以当作一个界面的框架，用于定义当前的界面。body属性的视图容器可以是ContentView定义的界面中显示的内容的外层容器，body内部的元素则是界面中真实显示的内容。接下来介绍body中的代码，ContentView代码块如图2-2所示。

图2-2　ContentView代码块

在ContentView代码块中，可以看到有两个视图，分别是Image视图和Text视图，这是SwiftUI提供的封装好的视图，方便开发者快速创建图片和文本。

Image视图、Text视图和其他内置的视图，在SwiftUI框架中都被称为视图，如图2-3所示。SwiftUI可以将所有用于显示的对象元素都当作视图来处理。

图2-3　视图

在SwiftUI中，视图修饰符（Modifiers）可以对不同视图进行修饰，例如调整图片大小、文本大小、文本颜色等。

在上述代码中，修饰Image视图的imageScale（图片缩放）修饰符可以将图片视图缩放至默认大小，foregroundColor（前景色）修饰符可以修改图片视图显示的图标的前景色，最外层的padding（边距）修饰符可以将整个视图四周进行留白处理。视图修饰符如图2-4所示。

图2-4　视图修饰符

当body属性的视图容器中存在多个视图时，就需要使用布局方式（Layout）对界面中视图的布局进行排列。VStack是一种视图，与其他视图不同的是，VStack也是一种布局方式，可以将内部的视图按照垂直方向进行排布。布局方式如图2-5所示。

图2-5　布局方式

也可以直接修改布局方式，下面将VStack修改为HStack，HStack的效果如图2-6所示。

图2-6　HStack的效果

在这里，可以注意到一个细节，当容器视图中存在多个视图时，视图会严格按照代码的先后顺序排布。如果是垂直布局，那么视图按照代码的先后顺序从上到下排布；如果是横向布局，那么按照代码的先后顺序从左到右排布。