SwiftUI 与 iOS App
SwiftUI
用 Swift 描述 App 界面
免费阅读 · 配套小练习 · 更新于
一句话理解
看懂 AI 怎样用文字、按钮和布局容器组成原生界面。
打个比方
先说明界面要展示什么、怎样排列，系统根据这些描述更新画面。就像提供一份随当前数据变化的展示方案。
SwiftUI 是 Apple 的声明式界面框架。Text 描述文字，Button 描述按钮，VStack 等容器组织布局。Swift 负责表达这些代码，SwiftUI 结合状态与视图描述更新界面。让 AI 写界面时，明确平台、内容、交互和项目已有约束。
看个例子
import SwiftUI
struct ContentView: View {
var body: some View {
VStack(spacing: 16) {
Text("你好，我是小喵")
.font(.title)
Text("我正在学习 AI 编程")
}
.padding()
}
}这是可放进已有 SwiftUI App 工程的视图示例；需要工程的 App 入口展示 ContentView 才能看到它。它展示标题和简介，还没有按钮行为、数据保存或后端服务。
什么时候会遇到
- 让 AI 实现一个小界面，检查内容与布局是否符合需求。
- 区分 Swift 语言、SwiftUI 框架和 Xcode 开发工具。
常见误解
SwiftUI 代码不能作为 HTML 直接在浏览器运行。生成了视图文件，也不能据此认定 App 已运行或上架。
Vibe Coding 小练习 · 描述需求 → 看懂改动 → 验证结果
动手练一练：让 AI 做一块简单的原生介绍界面
有 Mac 和 Xcode 时使用自己的 SwiftUI 练习 App 工程；也可以先对照本页示例审阅。
试着这样告诉 AI
请在现有 iOS SwiftUI 练习工程的 ContentView 中展示“你好，我是小冬”和“我正在学习 AI 编程”，上下排列、间距 16，并保留内边距。只改这块界面，不新增登录、网络或保存功能。完成后说明 Text、VStack 和 padding 各对应哪项要求，并指出 App 入口如何展示这个视图。可以在你使用的 AI 编程工具中完成；也可以先对照本页代码示例，练习理解需求、识别改动和列出检查项。
跟着做
- 把当前工程文件和界面需求交给 AI；材料不足时让它先说明还缺什么。
- 在生成结果里找到文字、容器与修饰符，检查原有 App 入口仍能展示这块界面。
- 在 Xcode 预览或运行中查看内容和排列；未运行时先与示例对照，不声称 App 已验证通过。
你应该看到
一块对应需求的介绍视图，以及明确的接入与检查说明。
完成检查
- 两个 Text 的内容与 VStack 间距对应需求。
- 记录检查用了代码审阅、预览还是实际运行。
遇到卡点？看提示
让 AI 先确认当前工程和目标视图，避免只新建一个没接入的文件。
查看参考思路
Text 描述两段文字，VStack 纵向排列，spacing 和 padding 处理间距。视图要由 App 入口或上层视图展示；生成文件、编译和看到界面是不同检查结果。
想一想
AI 给了 ContentView.swift，为什么还不一定能看到 App？
查看答案
需要把文件加入正确的工程和构建目标，并由 App 入口展示它。还要在匹配的 Xcode 环境中构建和运行。