iOS 学习笔记 - SwiftUI 和简单布局通过之前的章节，可以了解到简单的 Swift 语言编程和基于 Swif

前言

通过之前的章节，可以了解到简单的 Swift 语言编程和基于 Swift UI 的项目创建。有了这些基础知识，就可以开始了解具体的项目开发了。

Swift UI 布局

之前的章节中，创建好了一个 iOS App 项目，项目中给出了一个模板代码——一个简单的 Hello World 的 App 页面。

具体代码为

import SwiftUI

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

#Preview { // 通过设个代码，可以再右侧看到当前的预览
    ContentView()
}

这里面，出现了 SwiftUI 最核心的布局容器和视图修饰符。

这段简单的代码，包含了 SwiftUI 布局的底层逻辑：所有界面都是由「容器 + 子视图 + 修饰符」组合而成，容器负责排列视图，修饰符负责美化视图。

核心布局容器

SwiftUI 中核心的基础布局容器是三大栈容器，分别为：VStack、HStack、ZStack。接下来进行详细介绍。

1. VStack 垂直栈

正如我们看到的预览一样，这里使用了 VStack，它的作用是内部的子视图垂直从上到下排列。这也是最常见的布局排列方式。这里可以看到，代码中，图片和文字就是上下排列的。

2. HStack 水平栈

HStack 的作用是将内部的子视图水平从左到右排列，修改示例代码的布局代码为 HStack。

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

可以看到预览的页面样式已经发生了改变，图片在左侧，文字在右侧。变为了横向排列。

3. ZStack 层叠栈

ZStack的作用为，让子视图层叠叠加，后写的视图覆盖在先写的视图之上。通常可以用作背景、图标叠加、文字覆盖图片等效果。

这里修改代码，使用ZStack方式。

ZStack { 
    Circle() 
        .fill(Color.blue.opacity(0.2)) 
        .frame(width: 100, height: 100) 
    VStack { 
        Image(systemName: "globe")
        Text("Hello")
    }
}

这里，创建了一个圆，作为展示内容的背景，效果如下。

容器的参数

上一部分了解了 iOS App 界面是由不同容器嵌套构成的，这一点很像 HTML 的不同元素的嵌套，只不过声明的方式不太一样。同样的在 Swift UI 中，对于这些容器，也是由参数可以控制很多内容。

刚刚了解到的容器中，通常都支持两个关键参数：alignment（对齐方式）和 spacing（子视图间距），这也是调整布局的核心工具。

1. spacing：统一设置子视图间距

模板代码中图片和文字是紧贴的，添加 spacing 可以拉开距离：

// 垂直排列，子视图间距 20
VStack(spacing: 20) {
    Image(systemName: "globe")
        .imageScale(.large)
        .foregroundStyle(.tint)
    Text("Hello, world!")
        .font(.title) // 字体放大
}
.padding()

效果如下，可以看出区别，两个元素的距离和之前不一样了。

2. alignment：设置对齐方式

VStack 常用对齐：.leading（左对齐）、.center（居中，默认）、.trailing（右对齐）
HStack 常用对齐：.top（顶部对齐）、.center、.bottom（底部对齐）

再次修改示例代码，改成全部展示文字，使用左对齐的垂直布局

VStack(alignment: .leading, spacing: 15) {
    Text("标题")
        .font(.headline)
    Text("这是一段说明文字，演示左对齐效果")
        .font(.subheadline)
}
.padding()

可以看到效果，文字现在是作对齐的。

视图修饰符

从模板代码中，可以看到，.imageScale、.foregroundStyle、.padding 都是修饰符 ，作用是修改视图的样式、尺寸、位置。在 SwiftUI 中，修饰符是可以通过链式调用的，这是一种设计模式可以实现的，不过这里调用的顺序会影响最终效果，这里可以先结合之前见到过的了解一些最常用的几个：

1. padding：内边距

给视图添加四周的空白间距，让界面不拥挤：

Text("Hello")
    .padding() // 四周默认间距
    .padding(.top, 20) // 单独给顶部加间距

2. frame：设置尺寸

强制设置视图的宽度、高度：

Image(systemName: "globe")
    .frame(width: 50, height: 50) // 固定图片大小

3. foregroundStyle：前景色

修改文字、图标颜色：

.foregroundStyle(.red) // 红色
.foregroundStyle(Color.blue) // 蓝色

4. font：设置字体

Text("Hello")
    .font(.title) // 标题字体
    .font(.system(size: 24, weight: .bold)) // 自定义大小、加粗

四、完整实战：优化 Hello World 页面

把之前了解到的布局知识整合起来，改造模板代码，做出一个更美观的页面：

import SwiftUI

struct ContentView: View {
    var body: some View {
        // 垂直容器：居中、间距20
        VStack(spacing: 20) {
            // 图标
            Image(systemName: "globe")
                .imageScale(.large)
                .foregroundStyle(.blue)
                .font(.system(size: 60)) // 放大图标
            
            // 主标题
            Text("Hello, SwiftUI!")
                .font(.title)
                .fontWeight(.bold)
            
            // 副标题
            Text("这是我的第一个SwiftUI布局页面")
                .font(.subheadline)
                .foregroundColor(.gray)
        }
        // 整个容器添加内边距
        .padding()
        // 设置最大宽度，适配屏幕
        .frame(maxWidth: .infinity, maxHeight: .infinity)
        // 背景色
        .background(Color(.systemGray6))
    }
}

#Preview {
    ContentView()
}

运行预览后，会得到一个居中、有间距、有层级、配色舒适的标准页面，这就是 SwiftUI 布局的魅力 ——用极少的代码，实现清晰、灵活的界面。

iOS 学习笔记 - SwiftUI 和 简单布局

前言