背包与物品栏 UI

🎯本节学习目标

• 搭建网格物品栏
• 用数据驱动显示物品
• 实现物品交互

🚀课程导读

背包几十个格子、不同物品不同图标——本课用“数据驱动”思路做出可扩展的物品栏。

◆搭建物品栏 UI

格子 + 图标。

1. 创建物品栏面板：Panel（半透明）+ 标题“背包”。
2. 【网格容器】Panel 下建空对象 Grid，加 Grid Layout Group（第 156 课）：Cell Size（如 90x90）、Spacing、Padding。
3. 【格子背景】创建 Image 作为“格子底”（深色、九宫格边框），做成预制体 SlotPrefab。
4. 【图标】格子内再放一个 Image（物品图标，默认空）。
5. 【数量】可选：格子右下角 TMP 数量文字。
6. 【批量生成格子】用代码实例化 20 个 SlotPrefab 填进 Grid（第 150 课批量技巧）。
7. 【完成】20 个整齐格子出现。
8. 【命名】Slot、SlotIcon、SlotCount。
9. 【物品格数据】每个格子关联“物品数据”（ItemData，第 85 课 ScriptableObject）。

◆数据驱动显示物品

让物品“进格子”。

1. 【数据结构】定义简单物品类（或复用第 85 课 ItemData）：
2. [System.Serializable] public class Item { public string name; public Sprite icon; public int count; }
3. 【背包数据】public List<Item> inventory = new List<Item>();
4. 【显示逻辑】遍历格子与物品，把物品图标填进格子：
5. for (int i = 0; i < slots.Count; i++) {
6. if (i < inventory.Count) {
7. slots[i].icon.sprite = inventory[i].icon;
8. slots[i].icon.gameObject.SetActive(true);
9. slots[i].count.text = "x" + inventory[i].count;
10. } else { slots[i].icon.gameObject.SetActive(false); }
11. }
12. 【添加物品】inventory.Add(new Item{...}); RefreshUI();
13. 【移除物品】inventory.RemoveAt(index); RefreshUI();
14. 【实战】按 G 键随机加一件物品，背包实时刷新。
15. 【点击查看】格子加 Button/接口：点击显示物品详情（名字/描述）在侧边信息栏。
16. 【注意】刷新 UI 要在数据变化后调用，保持“数据→UI”单向流动。
17. 【优化】物品多时用对象池/虚拟列表（进阶）。

⚠常见错误与排查

★动手练习

✓本节小结

背包系统完成。下一课学 UI 拖拽。