82 lines
5.6 KiB
Markdown
82 lines
5.6 KiB
Markdown
# 部门课 04：小植物补水卡与交互状态
|
||
|
||
## 教学目标
|
||
|
||
- 区分用户交互、当前状态和界面反馈，理解“操作—状态变化—界面更新”的基本闭环。
|
||
- 知道 `Button` 包含用户看到的 label 和点击后执行的 action，但本节不系统讲授闭包。
|
||
- 理解 `@State private var` 表示由当前 View 拥有、由 SwiftUI 管理的临时可变状态。
|
||
- 能从简单代码中找出状态存在哪里、谁修改它、哪些界面读取并依赖它。
|
||
- 使用简单 `if / else`，让同一个状态决定不同文字、图标或颜色反馈。
|
||
- 理解父 View 保存唯一的 `@State`，子 View 通过 `@Binding` 修改同一份状态。
|
||
- 知道 `$waterCount` 传递的是指向已有状态的可读写连接，不是复制一份新值。
|
||
- 知道 `@State` 不负责持久化，停止并重新运行 App 后会恢复初始值。
|
||
|
||
## 教学内容
|
||
|
||
### 1. 从静态卡片到状态闭环
|
||
|
||
- 课堂使用授课干部提供并经过 Build/Run 的静态植物卡片，不要求学员重复部门课 3 的页面布局。
|
||
- 起始项目只使用系统图标，不依赖网络、第三方包或外部素材。
|
||
- 从“用户点击以后，App 需要记住什么”出发，区分用户操作、状态和可见反馈。
|
||
- 在父 View 中增加 `@State private var waterCount = 0`，让文字读取并显示当前补水次数。
|
||
- 在父 View 内加入“浇水”和“重新开始”按钮，先完成最小的 Button action、状态修改和界面更新闭环。
|
||
|
||
### 2. 状态规则与条件反馈
|
||
|
||
- `waterCount` 只允许在 0–3 之间变化。
|
||
- “浇水”每次增加 1，到达 3 后不再增加并禁用。
|
||
- “重新开始”将次数恢复为 0，在初始状态下可以禁用。
|
||
- 使用简单 `if / else`，为 0、1–2、3 三个阶段显示不同文字、图标或颜色反馈。
|
||
- 强调界面中的数字、文案和样式都读取同一个 `waterCount`，不为每种反馈分别保存容易矛盾的状态。
|
||
|
||
### 3. 从 `@State` 到 `@Binding`
|
||
|
||
- 在父 View 中跑通交互后，将两个按钮拆成同一 Swift 文件中的 `PlantControls` 子 View。
|
||
- 父 View 保留唯一的 `@State`，作为 `waterCount` 的状态拥有者。
|
||
- `PlantControls` 使用 `@Binding var waterCount: Int`，通过连接修改父 View 已有的状态。
|
||
- 父 View 使用 `$waterCount` 将可读写连接传给子 View。
|
||
- 重新 Build/Run，并按“拥有者—修改者—读取者”追踪完整数据流。
|
||
- 对比父子 View 各自声明一份 `@State` 的错误方案，说明 Binding 用于维持单一事实来源。
|
||
- 停止并重新运行 App，观察次数恢复为 0，明确这只是本次运行中的临时界面状态。
|
||
|
||
### 4. AI 可选互动与课程边界
|
||
|
||
授课干部可以根据课堂节奏选择以下互动，不作为共同完成要求：
|
||
|
||
- 让学员请 AI 标出状态拥有者、修改者和读取者，再自行核对。
|
||
- 让 AI 比较“父子 View 各自声明 `@State`”和“父 View 使用 `@State`、子 View 使用 `@Binding`”的区别。
|
||
- 让 AI 用初学者能够理解的语言解释 `$waterCount`，再由学员用自己的话复述并运行验证。
|
||
|
||
本节不讲授 Observable、环境注入、持久化、计时器、手势、异步任务、数组、随机数、多页面状态、复杂组件架构或属性包装器底层原理。动画、进度条、更多植物阶段和其他状态类型均为自愿挑战。
|
||
|
||
授课干部备课时可参考 [Managing user interface state](https://developer.apple.com/documentation/swiftui/managing-user-interface-state)、[State](https://developer.apple.com/documentation/swiftui/state) 和 [Button](https://developer.apple.com/documentation/SwiftUI/Button)。
|
||
|
||
## 课后作业
|
||
|
||
### 最低完成标准
|
||
|
||
- 完成并个性化“小植物补水卡”。
|
||
- 初始 `waterCount` 为 0；“浇水”最多增加到 3；“重新开始”能够恢复为 0。
|
||
- 0、1–2、3 三个阶段具有清楚的条件反馈。
|
||
- 父 View 使用唯一的 `@State`，`PlantControls` 使用指向同一状态的 `@Binding`。
|
||
- 至少修改一处植物名称、SF Symbol、反馈文案或配色。
|
||
- 停止并重新运行 App，确认状态恢复为 0；本节不要求保存数据。
|
||
- 通过个人 Fork 和作业分支提交源码 PR，简要说明状态的拥有者、修改者、读取者以及重启归零的原因。
|
||
|
||
### 建议完成标准
|
||
|
||
- 根据兴趣尝试动画、进度条或更多植物阶段，并验证效果。
|
||
- 探索其他简单状态类型，不作为基础完成要求。
|
||
|
||
本节不强制上传 GitHub 录屏。目录、分支、PR 模板和必要的运行记录形式由授课干部在备课时确定；不在课纲中规定视频时长、编码、格式或大小。AI 使用可选，未完成或提交受阻时按[共同安排](../iOS部2026十课初步规划.md)记录当前状态并求助。
|
||
|
||
## 验收方式
|
||
|
||
- 确认完整项目能在模拟器中 Build/Run。
|
||
- 通过实际操作检查增加、上限、三个阶段的条件反馈、重置和重新运行归零；授课干部可以直接运行源码，不要求学员上传录屏。
|
||
- 从源码确认唯一的 `@State` 与对应 `@Binding`，没有重复的事实来源，并保留个人可见修改。
|
||
- PR 中的简短说明用于了解理解和提供反馈，不因表达不够准确拒绝已达到基础要求的作品。
|
||
- 提交内容遵守共同的目录与隐私边界；不以视觉精致度、动画、额外功能或属性包装器底层原理作为合并门槛。
|
||
- 部门课 05 开头可选少量作品复习状态所有权、Binding 或重启归零原因，不转化为逐人技术答辩、评分或淘汰。
|
||
- 未完成的 Draft PR 保留并提供帮助，修正后再转为正式 PR。
|