SwiftUI 与 iOS App
View
SwiftUI 的界面组成单元
免费阅读 · 配套小练习 · 更新于
一句话理解
从 body 和布局层级，找到 AI 修改的具体界面。
打个比方
一个页面可以由标题区、简介区和操作区拼起来。每一块都能描述自己的内容，再组合成更大的界面。
自定义 SwiftUI 视图通常遵循 View 协议，并用 body 提供界面内容。VStack 把子视图纵向排列，HStack 横向排列；修饰符调整字体、间距等。body 可能被多次求值，应表达当前界面，不能把它当成只执行一次的初始化函数。
看个例子
import SwiftUI
struct IntroView: View {
let nickname: String
var body: some View {
VStack(alignment: .leading, spacing: 8) {
Text(nickname).font(.title)
Text("今天先学一个概念")
}
.padding()
}
}上层视图可通过 IntroView(nickname: "小喵") 使用这块内容。昵称是传入的数据，body 描述显示方式；提取组件之后仍需检查原页面是否使用了它。
什么时候会遇到
- 让 AI 只调整一块界面，并定位相关 body 与修饰符。
- 把重复内容提取成组件，检查调用和传入的数据。
常见误解
拆出一个 View 不会自动接入原页面；修饰符的顺序也可能影响最终布局。
Vibe Coding 小练习 · 描述需求 → 看懂改动 → 验证结果
动手练一练：检查 AI 提取的组件是否真正接入
使用 SwiftUI 篇的介绍界面，准备保留现有内容和排列要求。
试着这样告诉 AI
请把介绍区提取为 IntroView，昵称由上层以 String 传入。保留标题和简介的显示效果，并在原 ContentView 中调用它。只做这次组件提取；完成后列出定义、调用和数据传入的位置。可以在你使用的 AI 编程工具中完成；也可以先对照本页代码示例，练习理解需求、识别改动和列出检查项。
跟着做
- 把当前代码与组件边界交给 AI，说明应保留的文字和布局。
- 在改动中找出 IntroView 的 body、昵称参数和原页面的调用。
- 对比改动前后的显示；若未做预览或运行，先用调用关系检查是否接入。
你应该看到
能够追踪介绍区从上层调用到子视图展示的过程。
完成检查
- 上层实际调用新组件，昵称传入值明确。
- 原有内容与布局保留，没有多生成一块重复介绍区。
遇到卡点？看提示
有组件定义还不够，继续找它在哪里被使用。
查看参考思路
IntroView 的 body 描述内容，上层调用 IntroView(nickname: ...) 并提供数据。未调用的新文件不会自动改变原界面；最终显示仍需预览或运行确认。
想一想
AI 新建了 IntroView，原页面却没变化，应先查什么？
查看答案
先查原页面是否实际调用 IntroView，文件是否属于正确目标，再核对传入数据和预览或运行的页面。