引言

页面的搭建和布局在应用开发中几乎占据了一半的代码量。定于iOS开发而言，相较于其它平台，UIKit的布局方式显得相对局限，通常只有绝对布局和相对布局两种方案。而在Flutter或者Android开发中，布局选项更为丰富，比如横向布局，纵向布局或者网格布局等，使得界面设计更加灵活。然而，随着SwiftUI的引入，这种情况得到了极大的改善。

SwiftUI 采用声明式的方式构建用户页面，不仅简化了布局代码，还带来了全新的VStack、HStack和ZStack等核心布局组件。借助这些堆叠布局，我们可以轻松实现垂直、水平及重叠布局，构建出适应性更强的UI界面。本篇博客将深入探讨这些布局组件的使用场景及实现方式，帮助大家更好地掌握SwiftUI中的布局设计。

创建堆栈布局

在SwiftUI中我们必须返回一个确定的视图，也就是我们要显示的界面。而当我们需要在界面上返回多个视图时，比如图片+文字，这时候我们就需要告诉SwiftUI这个多个视图该如何进行布局排列，这就是堆栈的用武之处。

事实上在UIKit中已经提供了一个类似的布局组件UIStackView，UIStackView会将添加在它上面的子视图按照我们设置的参数进行横向或者纵向自动排列。而SwiftUI中的堆栈有三种形式：水平（HStack）、垂直（VStack）、还有个基于深度的（ZStack），后者将用于当你希望多个子视图重叠时。

VStack

Xcode为我们创建的SwiftUI模版项目，其实就已经使用了到了堆栈这个组件:

struct ContentView: View {var body: some View {VStack {Image(systemName: "globe").imageScale(.large).foregroundStyle(.tint)Text("Hello, world!")}.padding()}
}

此时图片和文字将会垂直排列在屏幕居中，并且它们之间会有一些自动的间距。

HStack

如果我们想要让标签并排显示，那么只需要将VStack替换为HStack，代码如下：

        HStack {Image(systemName: "globe").imageScale(.large).foregroundStyle(.tint)Text("Hello, world!")}.padding()

ZStack

ZStack专门用于创建重叠内容，当我们想要为视图创建一个比视图本身还大的背景时它将非常有用，它的使用方法和其他两种堆栈相同，比如，我们在一段文本下面放置一张大图片。

        ZStack {Image("swift")Text("Hello, world!").font(.largeTitle).foregroundStyle(.red)}

设置堆栈布局的对齐方式和间距

我们可以通过设置对齐方式及子组件的间距来自定义堆栈的布局样式。

间距

我们在创建堆栈的时候可以通过设置spacing参数来给内部子元素指定一些间距，代码如下：

        //间距VStack(spacing: 50) {Text("Hello, world!").foregroundStyle(.red)Text("Hello, world!").foregroundStyle(.red)}

我们还可以在两个子视图之间创建分隔符，以便SwiftUI在堆栈中的每个项目之间进行小的视觉区分，代码如下：

        //间距VStack(spacing: 50) {Text("Hello, world!").foregroundStyle(.red)Divider()Text("Hello, world!").foregroundStyle(.red)}

但是在ZStack中没有间距属性，因为它没有任何意义。

对齐方式

默认情况下，堆栈中的项目都是居中对齐的。在HStack中里面的所有组件将会垂直居中，因此如果我们创建两个不同高度文本视图，它们都将居中对齐。而在VStack的情况下，这意味着所有子组件将会水平居中，如果有两个长度不同的文本视图，它们都将水平居中对齐。

但是我们可以通过设置alignment参数来修改对齐方式，代码如下：

        // 左对齐VStack(alignment: .leading) {Text("SwiftUI")Text("Hello, world!")}

这样两个文本的左边缘会对齐，但是它们仍然最终会位于屏幕中间，因为堆栈只占用所需的空间。

我们还可以同时设置对齐方式和间距，代码如下：

        // 左对齐VStack(alignment: .leading,spacing: 10) {Text("SwiftUI")Text("Hello, world!")}

设置单个视图的内边距

在其它平台的布局中通常除了与其它视图的外边距之外，还有有一个内边距的属性，但是UIKit中通常我们只能通过自定义视图或者通过为视图添加父视图来达到这个问题。SwiftUI也改善了这个问题，它允许我们使用padding()修饰符在视图周围进行填充。如果我们不设置任何参数，直接使用修饰符，那么所有边都会获得系统默认的填充，代码如下：

        // 内边距VStack {Text("Hello, world!").padding().background(.red)Text("Hello, world!").background(.green)}

但是值得注意的是这种链式语法，当我们修饰符调用的顺序不一致时，效果也不一致嗷，比如，如果我们先设置背景颜色，再设置padding()虽然也会有内边距，但是内边距不会被设置成背景颜色：

        // 内边距VStack {Text("Hello, world!").padding().background(.red)Text("Hello, world!").background(.green).padding()}

内边距还可以自定义要填充的位置或者填充的大小，比如我们只想往左侧添加系统的边距：

            Text("Hello, world!").background(.blue).padding(.leading)

或者我们希望指定往左侧添加的边距为40:

            Text("Hello, world!").background(.blue).padding(.leading,40)

结语

本篇博客通过对SwiftUI中的VStack、HStack和ZStack的探讨，我们已经能够快速实现各种灵活的布局组合，再结合间距、对齐方式已经设置单个视图的内边距，可以轻松适配不同界面的需求。这种声明式的布局方式，不仅让代码更加简洁直观，还大大提高了开发效率。在实际项目开发中，灵活运用这些布局工具，将版主我们打造出更具美感、易与维护的UI设计。希望本篇博客能够为你的SwiftUI开发提供有价值的参考！