SwiftUI 框架认识 SwiftUI 视图结构 + 布局

前言：

问：为何不考虑从ui kit框架学起之后学swift ui?

因为没必要老框架了百分之99场景用不到它

学swift ui跟qt不同之处在于之前的还是你写具体的代码给你具体实现

swift ui完全是你形容一个东西的代码然后给你具体实现

建议：

swift ui这玩意资源太少了官方文档对于咱们这种大学生来说也晦涩难懂（我是这样认为）

建议找找b站课程or权威点的ai一步步教你自己多在mac里面下个xcode 的playground手搓

更进阶的话建议看看采用swiftui的支持大量用户使用的开源工具（例如 zed) 看看源码

搞个小demo一点点跑起来

好了正式开始。

正文

认识 SwiftUI 视图结构 + 第一个 Text

1. 先看你 Xcode 里默认的代码

打开 ContentView.swift，你会看到类似这样：

Swift 复制代码

import SwiftUI

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

#Preview {
    ContentView()
}

我一句一句拆细讲。

2. 第一句：import SwiftUI

Swift 复制代码

import SwiftUI

意思：引入 SwiftUI 框架
没有这行，你不能用 Text、Button、VStack 这些东西
每个 SwiftUI 文件基本都要写

3. 核心结构：struct ContentView: View

Swift 复制代码

struct ContentView: View {

struct：结构体，Swift 里常用
ContentView：随便起的名字，代表这个页面
: View：遵守 View 协议
- 只要是 SwiftUI 界面，都必须是 View
- 必须实现 var body: some View

4. 最重要的：body

Swift 复制代码

var body: some View {
    // 你的界面全部写在这里面
}

一个 View 只能有一个 body
body 里面必须返回一个 View
- 不能直接放两个 View 并排，会报错
- 必须用 VStack/HStack/ZStack 包起来

5. 今天只学：Text 文本

先把默认代码简化，只留 Text，方便你理解：

Swift 复制代码

struct ContentView: View {
    var body: some View {
        Text("你好，SwiftUI")
    }
}

右边预览点 Resume，就能看到一行字。

6. Text 的常用修饰符（细讲）

在 Text 后面加 .xxx 叫修饰符，顺序会影响效果。

① 字体大小

Swift 复制代码

Text("你好，SwiftUI")
    .font(.title)

常用字体级别（从大到小）：

.largeTitle
.title
.title2
.title3
.headline
.body（默认）
.caption

② 文字颜色

Swift 复制代码

.foregroundColor(.red)
// 或者
.foregroundStyle(.blue)

③ 加粗、斜体

Swift 复制代码

.bold()
.italic()

④ 加间距、居中

Swift 复制代码

.frame(width: 300, alignment: .center)

⑤ 内边距

Swift 复制代码

.padding() // 四周默认间距

7. 组合起来的完整例子

Swift 复制代码

struct ContentView: View {
    var body: some View {
        Text("今天开始认真学 SwiftUI")
            .font(.title)
            .bold()
            .foregroundColor(.purple)
            .padding()
    }
}

你复制进去，看预览，就能立刻看到效果。

8. 今天的小作业（必须做）

把 Text 内容改成你自己的名字
改成绿色、加粗、.title2 字号
加上 .padding()

做完你就算真正入门 SwiftUI 第一步了。

第 2 步：VStack 垂直布局

为什么需要 VStack？

刚才你只写了一个 Text，没问题。但如果你想同时显示两个 Text，像这样：

Swift 复制代码

Text("第一行")
Text("第二行")

直接写会报错。因为 SwiftUI 规定：body 里只能返回 1 个视图，不能并列多个。

解决方案：用容器把它们包起来。最常用的就是：VStack

VStack 是什么？

V = Vertical 垂直
VStack 里的内容会从上到下竖着排

基本写法：

Swift 复制代码

VStack {
    Text("第一行")
    Text("第二行")
    Text("第三行")
}

把这段放进你的 body 里，预览就能看到三行文字竖着排列。

细讲 1：spacing 控制间距

VStack 后面可以加 spacing，控制每行之间的距离：

Swift 复制代码

VStack(spacing: 30) {  // 每行间隔 30
    Text("第一行")
    Text("第二行")
    Text("第三行")
}

你可以改成 10、50、100 看看变化，非常直观。

细讲 2：给 VStack 加修饰符

修饰符加在 VStack 结束大括号的后面，作用于整个整体：

Swift 复制代码

VStack(spacing: 20) {
    Text("上行")
    Text("中行")
    Text("下行")
}
.padding()       // 整体四周留白
.background(.yellow)  // 整个 VStack 背景变黄
.cornerRadius(10)     // 圆角

注意：

修饰符加在 VStack 上 = 管整体
加在 Text 上 = 只管那一行文字

细讲 3：对齐方式 alignment

VStack 默认居中对齐，你可以改成靠左或靠右：

Swift 复制代码

VStack(alignment: .leading, spacing: 20) {
    Text("姓名")
    Text("年龄")
    Text("城市")
}

.leading = 左对齐
.center = 居中（默认）
.trailing = 右对齐

你可以一个个试，看预览变化。

现在你可以直接复制这段完整测试代码

Swift 复制代码

struct ContentView: View {
    var body: some View {
        VStack(alignment: .leading, spacing: 25) {
            Text("我学会了 Text")
                .font(.title)
                .bold()

            Text("现在正在学 VStack")
                .font(.body)
                .foregroundColor(.gray)

            Text("垂直布局超简单")
                .font(.subheadline)
                .foregroundColor(.blue)
        }
        .padding()
        .background(.cyan.opacity(0.2))
        .cornerRadius(12)
    }
}

你的小任务（做完我们继续下一个）

自己写一个 VStack，里面放4 行文字
给它设置 spacing: 15
整体加背景色 .mint
整体左对齐

HStack 水平布局

一、HStack 是什么？

H = Horizontal（水平），和 VStack 垂直布局对应
作用：把多个视图从左到右水平排列
解决的问题：和 VStack 一样，让你在 body 里放多个视图，不报错

基础写法：

Swift 复制代码

HStack {
    Text("左边")
    Text("中间")
    Text("右边")
}

预览就能看到 3 个文字从左到右排开。

二、核心参数详解（和 VStack 完全对应）

1. `spacing`：控制元素之间的水平间距

和 VStack 的 spacing 用法一模一样，用来调整两个视图之间的空隙：

Swift 复制代码

// 每个元素之间间隔 20pt
HStack(spacing: 20) {
    Text("左")
    Text("中")
    Text("右")
}

你可以改成 10、50、100，直观看到间距变化。

2. `alignment`：垂直方向的对齐方式

⚠️ 重点：HStack 是水平排列，所以 alignment 控制的是垂直方向的对齐，和 VStack 正好相反！

默认值：.center（垂直居中对齐，最常用）
可选值：
- .top：顶部对齐
- .center：垂直居中（默认）
- .bottom：底部对齐
- .firstTextBaseline：按第一行文字基线对齐（多文字场景常用）
- .lastTextBaseline：按最后一行文字基线对齐

举个例子（直观对比）：

Swift 复制代码

HStack(alignment: .top, spacing: 20) {
    Text("大文字")
        .font(.largeTitle)
    Text("小文字")
        .font(.caption)
}

把 .top 改成 .center/.bottom，就能立刻看到对齐效果的区别。

三、修饰符的作用范围（和 VStack 完全一致）

修饰符加在 HStack 大括号后面：作用于整个 HStack 整体
修饰符加在 单个 Text / 视图后面：只作用于这个视图

完整示例：

Swift 复制代码

HStack(alignment: .center, spacing: 15) {
    // 只给第一个文字加样式
    Text("首页")
        .font(.title)
        .bold()
        .foregroundColor(.blue)
    
    Text("消息")
        .font(.body)
        .foregroundColor(.gray)
    
    Text("我的")
        .font(.body)
        .foregroundColor(.gray)
}
// 给整个 HStack 加样式
.padding()
.background(.yellow.opacity(0.2))
.cornerRadius(10)

这段代码就是一个典型的「底部导航栏」雏形，非常实用。

四、VStack + HStack 嵌套（SwiftUI 布局核心）

实际开发中，几乎所有界面都是 VStack 和 HStack 嵌套出来的，举个最常用的「列表行」例子：

Swift 复制代码

VStack(spacing: 20) {
    // 第一行：水平排列的列表项
    HStack(alignment: .center, spacing: 15) {
        Image(systemName: "person.circle")
            .font(.largeTitle)
            .foregroundColor(.green)
        
        VStack(alignment: .leading, spacing: 4) {
            Text("用户名")
                .font(.headline)
            Text("这是个人简介")
                .font(.subheadline)
                .foregroundColor(.gray)
        }
    }
    
    // 第二行：再放一个列表项
    HStack(alignment: .center, spacing: 15) {
        Image(systemName: "message.circle")
            .font(.largeTitle)
            .foregroundColor(.blue)
        
        VStack(alignment: .leading, spacing: 4) {
            Text("消息通知")
                .font(.headline)
            Text("您有3条未读消息")
                .font(.subheadline)
                .foregroundColor(.gray)
        }
    }
}
.padding()

这段代码直接复制就能跑，你会看到一个标准的「列表页」布局，完全是靠 VStack + HStack 嵌套实现的。

五、今天的小作业（必须做，巩固知识点）

自己写一个 HStack，里面放 3 个 Text，模拟「首页 / 分类 / 我的」底部导航
设置 spacing: 30，整体垂直居中对齐
给选中的「首页」加蓝色、加粗、大字号，另外两个加灰色、普通字号
给整个 HStack 加背景色、内边距、圆角

ZStack 层叠布局

一、ZStack 是什么？

Z = Z-axis（Z 轴） ，核心是层叠
作用：让多个视图前后重叠，后面的视图做背景，前面的做内容
最常用场景：背景图 + 文字、圆角卡片、悬浮按钮、导航栏标题栏

基础写法（直接复制运行）：

Swift 复制代码

ZStack {
    // 底层：背景
    Color.blue
    
    // 上层：内容
    Text("我在上面")
        .foregroundColor(.white)
        .font(.title)
}

预览会看到蓝色背景上有一行白色文字。

二、核心参数详解

1. `alignment`：对齐方式

决定所有层相对于容器的位置，和 VStack/HStack 完全不同，它是二维对齐（同时控制水平 + 垂直）。

常用值：
- .topLeading：左上角
- .top：顶部居中
- .topTrailing：右上角
- .leading：左侧居中
- .center：居中（默认，最常用）
- .trailing：右侧居中
- .bottomLeading：左下角
- .bottom：底部居中
- .bottomTrailing：右下角

举个实用例子（右下角徽章）：

Swift 复制代码

ZStack(alignment: .bottomTrailing) {
    // 底层：大图片
    Image(systemName: "person.crop.circle")
        .font(.system(size: 80))
        .foregroundColor(.gray)
    
    // 上层：右上角小图标
    Image(systemName: "checkmark.circle.fill")
        .foregroundColor(.green)
        .font(.title)
        .offset(x: -10, y: -10) // 微调位置
}

2. 背景层的特殊写法

如果只做背景，直接写 Color 或 Image 是最简单的，系统会自动拉伸填充。

Swift 复制代码

ZStack {
    // 背景：渐变
    LinearGradient(gradient: Gradient(colors: [.pink, .purple]), startPoint: .topLeading, endPoint: .bottomTrailing)
    
    // 内容
    Text("渐变背景")
        .foregroundColor(.white)
        .font(.largeTitle)
        .bold()
}

三、修饰符的作用范围（重点！）

ZStack 的修饰符规则和 VStack/HStack 一致，但效果更直观：

加在 ZStack 大括号后 ：作用于所有层（比如给整个容器加圆角、边框）
加在具体层后面：只作用于该层

实战例子（圆角卡片效果）：

Swift 复制代码

ZStack {
    // 底层：背景色
    Color.white
    
    // 上层：内容
    VStack(spacing: 20) {
        Text("用户中心")
            .font(.title)
            .bold()
        
        Text("这是一个层叠布局的卡片")
            .foregroundColor(.gray)
    }
}
// 给整个 ZStack 加样式 = 给整个卡片加样式
.foregroundColor(.black)
.background(.gray.opacity(0.1))
.cornerRadius(15)
.shadow(radius: 5) // 加阴影，更像卡片

四、实战：仿微信聊天项布局

这是 ZStack 最经典的实战用法（消息气泡 + 时间）：

Swift 复制代码

HStack(spacing: 15) {
    // 头像
    Image(systemName: "person.circle")
        .font(.largeTitle)
    
    // 消息内容
    ZStack(alignment: .bottomTrailing) {
        // 背景气泡
        RoundedRectangle(cornerRadius: 15)
            .foregroundColor(.blue.opacity(0.1))
        
        // 文字内容
        VStack(alignment: .leading, spacing: 5) {
            Text("张三")
                .font(.headline)
            Text("你好，这是一条测试消息")
                .foregroundColor(.gray)
        }
        .padding(10)
        
        // 时间戳（叠在右下角）
        Text("12:30")
            .font(.caption)
            .foregroundColor(.gray)
            .padding(8)
    }
}
.padding()

五、今天的小作业（必须做，巩固）

自己写一个 ZStack，做一个圆形头像 + 右上角红点的效果
背景用 Color.gray 做圆形头像
右上角放一个红色小圆点（用 Circle().fill(.red)）
调整红点的位置，让它刚好在头像右下角

SwiftUI 框架 认识 SwiftUI 视图结构 + 布局

前言：

建议：

正文

1. 先看你 Xcode 里默认的代码

2. 第一句：import SwiftUI

3. 核心结构：struct ContentView: View

4. 最重要的：body

5. 今天只学：Text 文本

6. Text 的常用修饰符（细讲）

① 字体大小

② 文字颜色

③ 加粗、斜体

④ 加间距、居中

⑤ 内边距

7. 组合起来的完整例子

8. 今天的小作业（必须做）

第 2 步：VStack 垂直布局

为什么需要 VStack？

VStack 是什么？

细讲 1：spacing 控制间距

细讲 2：给 VStack 加修饰符

细讲 3：对齐方式 alignment

现在你可以直接复制这段完整测试代码

你的小任务（做完我们继续下一个）

HStack 水平布局

一、HStack 是什么？

二、核心参数详解（和 VStack 完全对应）

1. spacing：控制元素之间的水平间距

2. alignment：垂直方向的对齐方式

三、修饰符的作用范围（和 VStack 完全一致）

四、VStack + HStack 嵌套（SwiftUI 布局核心）

五、今天的小作业（必须做，巩固知识点）

ZStack 层叠布局

一、ZStack 是什么？

二、核心参数详解

1. alignment：对齐方式

2. 背景层的特殊写法

三、修饰符的作用范围（重点！）

四、实战：仿微信聊天项布局

五、今天的小作业（必须做，巩固）

SwiftUI 框架认识 SwiftUI 视图结构 + 布局

1. `spacing`：控制元素之间的水平间距

2. `alignment`：垂直方向的对齐方式

1. `alignment`：对齐方式