SwiftUI实战：构建现代化iOS应用界面（零基础入门）
大家好，我是你们的iOS老学长！在大厂干了三年开发，业余时间也在B站做技术UP主。今天这篇教程，就是想带完全零基础的朋友，亲手用SwiftUI写出第一个漂亮的iOS界面。
我当初学的时候，光看文档根本不知道从哪下手——按钮怎么放？文字怎么改颜色？布局怎么调？所以这次，咱们不讲理论堆砌，直接上手做！你会发现，SwiftUI真的比你想象中简单得多。
什么是SwiftUI？它能做什么？
SwiftUI 是苹果公司在2019年推出的一套声明式UI框架。简单说，你不用再像以前那样“一步步告诉系统怎么画界面”，而是直接“描述你想要什么样的界面”，剩下的交给系统自动处理。
比如你想放一个红色按钮，传统方式要写好几行代码设置颜色、大小、位置……而用SwiftUI，一行就够了：
Button("点我") {}
.foregroundColor(.white)
.background(Color.red)
.cornerRadius(8)
是不是清爽多了？而且它天然支持实时预览（Preview），改完代码马上看到效果，开发效率飞起！
更重要的是，用SwiftUI做出的界面，天然适配 iPhone、iPad、Mac，甚至 Apple Watch —— 这对想做出“产品级”应用的同学来说，简直是福音。
环境准备：5分钟搭好开发环境
别担心，你不需要买新电脑！只要满足以下条件就行：
| 要求项 | 最低配置 |
|---|---|
| 操作系统 | macOS Monterey (12.0) 或更高 |
| 开发工具 | Xcode 13+（推荐最新版） |
| Apple ID | 免费注册即可（用于真机调试） |
安装步骤（超简单）：
- 打开 App Store
- 搜索 Xcode
- 点击“获取”并安装（文件较大，约10GB，建议连Wi-Fi）
- 安装完成后，打开 Xcode，首次启动会自动安装额外组件，耐心等几分钟
💡小贴士：如果磁盘空间紧张，可以只安装 iOS 模拟器（默认已包含），暂时不用真机调试也没关系！
核心概念：3个关键词搞懂SwiftUI
1. View（视图）—— 界面的基本单位
在SwiftUI里，一切界面元素都叫 View。文本、图片、按钮、列表……都是 View。你可以把它们像积木一样组合起来。
struct ContentView: View {
var body: some View {
Text("Hello, SwiftUI!")
.font(.title)
}
}
ContentView是你自定义的视图body是这个视图要显示的内容Text(...)就是一个文本视图
2. Modifier（修饰符）—— 给视图“化妆”
想改字体？加背景？调间距？全靠 .xxx() 这种“修饰符”。
Text("欢迎来到SwiftUI")
.font(.headline) // 字体变粗
.foregroundColor(.blue) // 文字变蓝
.padding() // 加内边距
✅ 重要原则：修饰符顺序很重要！
.padding().background(.red)和.background(.red).padding()效果完全不同！
3. State（状态）—— 让界面“动”起来
如果界面上的数据会变（比如点按钮计数+1），就要用 @State。
struct CounterView: View {
@State private var count = 0
var body: some View {
VStack {
Text("点了 \(count) 次")
Button("点我") {
count += 1 // 修改状态，界面自动刷新！
}
}
}
}
@State告诉SwiftUI：“这个变量变了，就重新画界面”- 不用手动调
reloadData()，系统自动搞定！
实战项目：做一个“今日待办”小产品
我们来做一个极简但完整的产品原型：用户可以添加待办事项，并标记完成。
第一步：创建新项目
- 打开 Xcode → Create a new Xcode project
- 选择 App → Next
- Product Name 填
MyTodo - Interface 选 SwiftUI
- Language 选 Swift
- 点 Finish
第二步：编写核心代码
把 ContentView.swift 的内容替换成以下代码：
import SwiftUI
struct TodoItem: Identifiable {
let id = UUID()
let title: String
var isCompleted = false
}
struct ContentView: View {
@State private var todos: [TodoItem] = []
@State private var newTodoText = ""
var body: some View {
NavigationView {
VStack {
// 输入框 + 添加按钮
HStack {
TextField("输入新任务", text: $newTodoText)
.textFieldStyle(RoundedBorderTextFieldStyle())
Button("添加") {
if !newTodoText.trimmingCharacters(in: .whitespaces).isEmpty {
todos.append(TodoItem(title: newTodoText))
newTodoText = ""
}
}
}
.padding()
// 待办列表
List {
ForEach($todos) { $todo in
HStack {
Image(systemName: todo.isCompleted ? "checkmark.circle.fill" : "circle")
.onTapGesture {
todo.isCompleted.toggle()
}
Text(todo.title)
.strikethrough(todo.isCompleted)
}
}
.onDelete(perform: deleteItems)
}
}
.navigationTitle("今日待办")
}
}
func deleteItems(offsets: IndexSet) {
todos.remove(atOffsets: offsets)
}
}
第三步：理解关键代码
TodoItem：一个待办事项的数据结构，Identifiable让List能识别每个item$newTodoText：前面加$表示“双向绑定”，输入框内容和变量同步List+ForEach：循环渲染列表.onTapGesture：点击图标切换完成状态.onDelete：左滑删除（模拟器上按住Option+Shift可模拟滑动）
🎉 恭喜！你已经做出了一个有交互、有数据、有UI的产品雏形！
新手常见问题 & 避坑指南
❓ Q1：为什么我的预览不显示？
- 可能原因：没开启 Canvas。点击右上角 Resume 按钮（或快捷键 Cmd+Option+P）
- 终极方案：直接运行模拟器（Cmd+R），效果一模一样
❓ Q2：修改代码后界面没更新？
- 检查是否忘了加
@State - 确保修改的是
body里用到的变量 - 如果是数组，记得用
append/remove，不要直接赋值（如todos = [...]可能不触发刷新）
❓ Q3：怎么改颜色/字体/间距？
记住万能公式：先写内容，再链式加修饰符。比如：
Text("示例")
.font(.system(size: 20, weight: .bold))
.foregroundColor(.purple)
.padding(.horizontal, 20)
.padding(.vertical, 10)
⚠️ 避坑提醒：
- 别在
body里写复杂逻辑（比如网络请求），应该放在 ViewModel 里（后面进阶再学） VStack/HStack默认占满屏幕，如果内容没居中，试试加.frame(maxWidth: .infinity, maxHeight: .infinity)- 图标用
Image(systemName: "...")，名字去 SF Symbols 查
下一步学习建议
你已经跨出了最重要的一步！接下来可以：
- 多练小项目：天气卡片、个人简历页、倒计时器……
- 学 Navigation：如何跳转页面（
NavigationLink） - 接入网络：用
async/await获取 API 数据 - 状态管理进阶：了解
@ObservedObject和ViewModel - 上架App Store：把你的小作品变成真实产品！
我在B站更新了《30天SwiftUI实战》系列，从零开始做一款记账App，欢迎关注！遇到问题也可以在评论区留言，我会一一解答。
最后送大家一句话：编程不是记住所有语法，而是学会“拆解问题 + 查文档 + 试错”。你写的每一行代码，都在让你离做出自己的“产品”更近一步。
加油，未来的iOS开发者！🚀
评论 0