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

前言

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

Swift UI 布局

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

具体代码为

swift 复制代码

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。

swift 复制代码

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

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

3. ZStack 层叠栈

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

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

swift 复制代码

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 可以拉开距离：

swift 复制代码

// 垂直排列，子视图间距 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（底部对齐）

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

swift 复制代码

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

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

视图修饰符

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

1. padding：内边距

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

swift 复制代码

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

2. frame：设置尺寸

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

swift 复制代码

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

3. foregroundStyle：前景色

修改文字、图标颜色：

swift 复制代码

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

4. font：设置字体

swift 复制代码

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

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

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

swift 复制代码

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 和 简单布局

前言

Swift UI 布局

核心布局容器

1. VStack 垂直栈

2. HStack 水平栈

3. ZStack 层叠栈

容器的参数

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

2. alignment：设置对齐方式

视图修饰符

1. padding：内边距

2. frame：设置尺寸

3. foregroundStyle：前景色

4. font：设置字体

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

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