ScrollView 滚动视图

🎯本节学习目标

• 理解 ScrollView 结构
• 掌握内容滚动
• 实现可滚动列表

🚀课程导读

背包几十件物品一屏放不下——ScrollView 让它“能滑”。本课掌握滚动列表。

◆ScrollView 结构

认识“卷轴”。

1. Hierarchy 右键 → UI → Scroll View，创建滚动视图。
2. 结构：Scroll View（根）→ Viewport（可视窗口）→ Content（内容区，可滚动范围）+ Scrollbar Horizontal/Vertical（滚动条）。
3. 【ScrollRect 组件】核心：控制滚动。
4. Viewport 引用、Content 引用、滚动方向（Horizontal/Vertical）、惯性等。
5. 【原理】Content 比 Viewport 大，滚动 = 移动 Content 在 Viewport 内显示位置。
6. 【Content 大小】决定能滚多远（高度/宽度）。
7. 【注意】Content 需要有 Layout 或手动设置大小，否则滚不动。

◆实战：物品列表

做出可滚动的物品栏。

1. 创建 ScrollView，确认 Content 是 Viewport 的子物体。
2. 【Content 配置】给 Content 添加 Vertical Layout Group（第 156 课）让它自动排列子项。
3. 【布局参数】Padding（内边距）、Spacing（间距）、Child Alignment（对齐）。
4. 【Content Size Fitter】加 Content Size Fitter，Vertical Fit 选 Preferred Size：让 Content 高度随内容自动撑开。
5. 【添加物品项】在 Content 下创建几个子物体（每项一个 Image+文字，可做成预制体）。
6. 【滚动】播放后拖动/滚轮滑动，列表上下滚动。
7. 【代码填充】用第 150 课的批量实例化把物品预制体填进 Content（设置父物体为 Content）。
8. 【Mask 裁剪】Viewport 自带的 Mask/Image 保证超出窗口的部分被裁剪。
9. 【注意】Content 没有 Content Size Fitter 时，手动设置高度决定滚动范围。
10. 【优化】几千条列表用“虚拟列表”（进阶），普通游戏直接填即可。

⚠常见错误与排查

★动手练习

✓本节小结

ScrollView 已掌握。下一课学布局组件。