LESSON 19 / 575 分钟
Auto Layout、列表与事件
认识约束关系、复用和代理，可以覆盖大量 UIKit 日常维护场景。
用你的前端经验理解
Auto Layout 是约束系统，并非 Flexbox；Cell 复用有点像虚拟列表，但配置与状态清理需要遵守 UIKit 的规则。
01 / 理解问题
为什么需要它
Auto Layout 通过约束表达视图之间的尺寸与位置关系。你描述“标题距离安全区左侧一定距离、右侧不超过按钮”，系统再求解具体位置。约束不足会产生歧义，互相矛盾则会被打破。看到运行日志里的约束警告，应阅读涉及的视图与关系，而非删除全部约束。
它是怎样工作的
内容拥抱优先级影响视图是否愿意被拉大，抗压缩优先级影响谁在空间不足时先被压缩。列表复用让离屏单元格为新数据服务，因此配置必须完整覆盖旧状态；异步图片回来时还要核对单元格当前代表哪条记录。Diffable Data Source 使用稳定标识描述变化，标识与展示内容不要混为一谈。
02 / 掌握要点
把关键概念连起来
1
约束
约束描述位置和尺寸关系，使用 anchors 可以代码定义。关注约束冲突和布局不完整。
2
列表
UITableView/UICollectionView 复用 cell；使用稳定 item ID，Diffable Data Source 帮助应用数据快照。
3
事件
delegate 负责回调约定；数据源提供内容。复用时重置旧状态，异步图片应防止显示到已复用的行。
03 / 案例推演
排查滚动后封面串图
- 单元格开始配置时设置占位图，记录当前文章 ID，并为复用清理不应保留的临时状态。
- 图片异步返回时确认文章 ID 仍匹配；必要时取消旧请求，缓存则放到图片服务中。
- 测试快速滚动、反复进入列表和图片失败，确认不会把旧封面显示给新文章。
这里需要你亲自判断
手写约束时通常要关闭对应 view 的 translatesAutoresizingMaskIntoConstraints；别把复用 cell 当永久绑定某条数据。
04 / 动手验证
做一个小练习
解释快速滚动后图片串行的原因，并设计“取消旧任务 + 校验 item ID”的修复。
- 为一行标题与右侧按钮设置约束，缩窄容器验证谁先换行或压缩。
- 说明单元格复用与 React key 分别解决什么问题。
展开参考思路与验收标准
稳定 ID 表示数据身份，复用表示视图对象再利用，两者相关但不相同。正确列表需要布局约束可解、配置完整，以及异步结果不会写入错误目标。
05 / 检查理解
复用 Cell 时为什么可能显示上一条数据的图片？
答对理解题后即可标记完成