LESSON 15 / 575 分钟
布局、列表与自适应
先理解父子尺寸协商，再考虑像素。系统文字大小、窗口尺寸和安全区都会改变布局。
用你的前端经验理解
HStack/VStack 接近横纵 flex 布局，ZStack 类似叠放；但 SwiftUI 使用尺寸提议与响应，不是 CSS 布局算法。
01 / 理解问题
为什么需要它
SwiftUI 布局不是浏览器 CSS 盒模型的直接翻译。父视图向子视图提出尺寸建议，子视图返回自己的尺寸，父视图安排位置。HStack 和 VStack 适合线性组织，Spacer 分配可扩展空白；frame 是布局参与者，不是总能强制把所有子内容压进固定矩形的命令。
它是怎样工作的
固定宽高在一台模拟器上可能很好看，却容易在动态字体、分屏和长文本下截断。优先表达关系与优先级，再添加必要约束。列表元素需要稳定身份，排序和删除不应改变记录本身 ID；用数组下标作为变化列表的身份，可能让行内状态跟错记录。
02 / 掌握要点
把关键概念连起来
1
基础
Stack、Spacer、alignment 组织内容；frame 是布局约束/包装，不保证等于屏幕绝对尺寸。
2
列表
List 提供系统列表行为；ScrollView + LazyVStack 更自由。ForEach 需要稳定且唯一的身份。
3
适配
使用语义字体、安全区、弹性尺寸，必要时 ViewThatFits 或自适应 Grid；测试大字体、长文本与窄窗口。
03 / 案例推演
让文章行适应长标题
- 用 VStack 排列标题与作者，再用 HStack 放置收藏按钮。让标题可以换行，按钮保留清晰的点击区域。
- 在窄窗口和大字号下观察作者、时间是否挤占正文；降低次要信息优先级，而不是把所有字体缩小。
- 重新排序后检查被收藏的记录还是同一篇文章，确认 ForEach 使用稳定数据 ID。
这里需要你亲自判断
不要使用每次生成的 UUID 当列表 id，也不要到处写死屏幕宽度。
04 / 动手验证
做一个小练习
把两列卡片在窄窗口变成一列，开启最大辅助功能文字大小再看是否可用。
- 准备短标题、三行标题和超长作者名三组数据。
- 把字号放大并缩窄窗口，记录哪些信息可以省略、哪些必须完整保留。
展开参考思路与验收标准
主要内容仍应可读，按钮仍可操作，行高可以自然增加。滚动列表中复杂内容按需加载，但不要把所有 VStack 机械替换成 LazyVStack；应由数据规模和实际性能决定。
05 / 检查理解
列表 id 应如何选择？
答对理解题后即可标记完成