ios开发教程SwiftUI零基础实战案例详解

是不是很多零基础想学 iOS 开发的朋友，一听到 “SwiftUI” 就犯怵？听人说它是苹果新出的界面框架，语法和以前不一样，看着代码全是 “VStack”“Text” 这些陌生词，不知道从哪下手？其实啊，SwiftUI 比你想象中简单多了，它就像用积木搭房子，代码写一行，界面就实时显示效果，新手做起来特别有成就感。今天兔子哥就带零基础的朋友实战一个待办清单 APP，从新建项目到功能实现，每步都讲明白，跟着练，你会发现 SwiftUI 原来这么好上手，一起往下看吧！

一、先搞懂：SwiftUI 到底是啥？零基础为啥选它？

核心问题：学 iOS 开发有 UIKit 和 SwiftUI，新手该选哪个？SwiftUI 真的更简单吗？
简单说，SwiftUI 是苹果 2019 年推出的新框架，用 “声明式语法” 写界面，你告诉它 “要显示一个按钮在中间”，它就会自动做好，不用像 UIKit 那样写一堆布局代码。

对比维度	UIKit（老框架）	SwiftUI（新框架）
语法风格	命令式，要写布局逻辑	声明式，直接描述界面样子
上手难度	较难，需要学布局约束	简单，代码和界面对应直观
实时预览	要运行模拟器才能看效果	右侧实时预览，改代码立马见效
适合人群	有经验开发者	零基础新手、快速做原型

兔子哥刚开始学的时候也纠结过，后来试了 SwiftUI 才发现，写个按钮加文字，UIKit 要 5 行代码，SwiftUI 一行就够了 —— 新手选 SwiftUI，能少走很多弯路。

二、实战准备：3 分钟搞定开发环境，比装微信还简单

核心问题：学 SwiftUI 需要啥工具？没 Mac 电脑能学吗？
必须用 Mac 电脑（这是硬要求），再装个 Xcode 就行，步骤超简单：

1. 打开 Mac 上的 App Store，搜 “Xcode”，点下载（有点大，大概 10GB，耐心等它下完）。
2. 安装完成后打开 Xcode，第一次启动会加载组件，可能要几分钟，别着急关掉。
3. 点 “Create a new project”，选 “App” 模板，输入项目名（比如 “TodoList”），Interface 选 “SwiftUI”，Language 选 “Swift”，点 “Create”—— 搞定！

小提醒：Xcode 打开后，左侧是项目文件，中间是代码区，右侧是实时预览（没显示的话点顶部 “Editor”→“Canvas” 打开），改代码右侧立马能看到效果，这就是 SwiftUI 的爽点！

三、第一个实战案例：做个待办清单 APP，功能全解析

核心问题：零基础能做啥项目？太复杂的怕学不会，太简单的学不到东西。
就做个待办清单，能添加待办事项、标记完成、删除事项，功能实用还不难，跟着步骤来：

步骤 1：写基础界面，显示标题和输入框

打开 ContentView.swift，默认代码是个 “Hello, World!”，我们改成待办清单的基础界面：
swift

struct ContentView: View {// 定义一个变量存输入的待办内容@State private var todoText = ""var body: some View {// 垂直排列的容器VStack(spacing: 20) {// 标题Text("我的待办清单").font(.title) // 标题字体.fontWeight(.bold) // 加粗// 输入框TextField("请输入待办事项...", text: $todoText).padding() // 加内边距，别太挤.border(Color.gray) // 加边框，看得清楚.padding(.horizontal) // 左右加外边距// 这里后面加按钮和列表}}}

效果：右侧预览会显示 “我的待办清单” 标题，下面是带边框的输入框，能实时输入文字 —— 是不是很简单？

步骤 2：加 “添加” 按钮，把输入内容存起来

输入框做好了，再加个按钮，点击后把输入的文字存到数组里：
swift

// 在ContentView里加一个数组存待办事项@State private var todos = [String]()// 在VStack里继续加按钮Button("添加") {// 输入不为空才添加if !todoText.isEmpty {todos.append(todoText)todoText = "" // 清空输入框}}.buttonStyle(.borderedProminent) // 按钮样式，突出显示

效果：输入 “买牛奶” 点添加，文字会存到 todos 数组里（现在还不显示，下一步做列表）。按钮点了没反应？检查输入框是不是空的，空内容我们加了判断不添加哦。

步骤 3：用 List 显示待办列表，能滑动删除

加个 List 控件，把数组里的待办事项显示出来，再支持滑动删除：
swift

// 在按钮下面加列表List {// 遍历数组，显示每个待办事项ForEach(todos, id: \.self) { todo inText(todo)}// 支持滑动删除.onDelete(perform: deleteTodo)}// 在ContentView里加删除函数private func deleteTodo(at offsets: IndexSet) {todos.remove(atOffsets: offsets)}

效果：添加的待办事项会一条条显示在列表里，左滑某条事项会出现 “删除” 按钮，点了就能删掉 —— 核心功能完成！

步骤 4：加 “标记完成” 功能，点一下文字变灰划线

想让点过的待办事项变灰划线？给文字加个点击事件，用数组存完成状态：
swift

// 定义两个数组，一个存内容，一个存是否完成@State private var todos = [String]()@State private var isDone = [Bool]()// 添加按钮的代码改一下，同时存完成状态Button("添加") {if !todoText.isEmpty {todos.append(todoText)isDone.append(false) // 默认未完成todoText = ""}}// 列表里的文字加点击效果ForEach(0..<todos.count, id: \.self) { index inText(todos[index]).strikethrough(isDone[index]) // 完成的话划线.foregroundColor(isDone[index] ? .gray : .black) // 完成变灰.onTapGesture {isDone[index].toggle() // 点击切换完成状态}}.onDelete(perform: deleteTodo)// 删除函数也要同步删完成状态private func deleteTodo(at offsets: IndexSet) {todos.remove(atOffsets: offsets)isDone.remove(atOffsets: offsets)}

效果：点一下待办文字，会变成灰色带划线，再点一下恢复正常 —— 这样就知道哪些做完了！

四、新手常见问题：这些坑别再踩了！

1. 右侧预览不显示？

可能是 Xcode 卡了，点顶部 “Product”→“Clean Build Folder” 清理一下，再关闭预览重新打开。或者直接运行模拟器（点左上角播放按钮），在模拟器里看效果也行。

2. 变量前面的 @State 是啥？不加行不行？

不加的话，改了变量界面不会更新！@State 是 SwiftUI 的 “状态标记”，告诉框架 “这个变量变了，界面要跟着刷新”，新手别省略，照着加就行。

3. 列表遍历报错 “ForEach requires identifiable data”？

用数组遍历的时候，要么数组元素是 “可识别的”（比如自定义结构体带 id），要么像我们示例里用0..索引遍历，或者加id: \.self（简单情况能用）。

4. 按钮点了没反应？

检查是不是写在VStack外面了，或者变量没加 @State。新手常犯的错是把按钮事件写成Button("添加")后面没加闭包，一定要加{ ... }才会有点击效果。

最后说几句实在的

SwiftUI 真的是零基础新手的福音，代码少、见效快，改一行代码右侧预览立马变，这种即时反馈特别能让人坚持学下去。兔子哥第一次用 SwiftUI 做出待办清单时，激动得把每个功能都试了好几遍 —— 那种从 0 到 1 做出东西的感觉，比看多少教程都有用。
别害怕代码报错，SwiftUI 的错误提示很友好，比如漏了括号会明确标出来。刚开始不用深究 “结构体”“View 协议” 这些概念，先会用、能做出界面再说，用熟了自然就理解了。
按今天的案例练完，你已经掌握了 SwiftUI 的核心用法：布局容器、状态管理、列表、按钮事件。接下来可以试试加个 “清空列表” 按钮，或者给界面换个颜色，慢慢拓展功能。希望这篇教程能帮你迈出 SwiftUI 的第一步，动手试试吧，你会发现开发 APP 原来这么有趣！

标签： 模拟器 左侧