UI 组件速查指南-TapMaker大学习
05/12218 浏览开发心得
在设计游戏UI的过程中，你是否存在和ai讨论UI设计时AI出现指东打西的红温时刻。本文致力于介绍常见的UI组件，让你在开发过程中可以做到精确制导！
这是一份UI 组件的速查手册。
新手用 AI 做游戏 UI 最大的卡点，不是"AI 写不出来"，而是——你说不出那个东西叫什么。
为了让你能准确的说出你需要的组件的名字，我整理出了这篇UI组件指南。
每个组件我都写了三件事：它是什么、它长什么样、它在游戏里能拿来干什么。
这篇文章就干一件事：让你记住这些与ai对话的术语暗号。
本文将制造中的所有可以直接在api文档中有参考的UI组件分成八个部分。分别是：
布局控件、输入控件、选择控件、展示控件、导航控件、容器控件、浮层控件、游戏组件。
布局组件（6 个）
布局组件是界面的骨架，决定了"东西放在哪里"。
1. Panel — 万能容器
最基础也最重要的组件。支持背景色、渐变、圆角、边框、阴影，以及完整的 Flexbox 布局能力。几乎所有复杂界面都是由 Panel 嵌套组合而成。
能用来做什么：卡片容器、页面背景、分组区域、工具栏、状态栏……一切需要"装东西"的地方都用 Panel。
Panel
2. Label — 文本标签
文本显示控件，支持字号、颜色、粗体、描边、阴影、下划线、多行换行、行数限制等。
能用来做什么：标题、段落文字、分数显示、倒计时数字、带特效的游戏文字（描边、阴影）。
Label
3. Divider — 分割线
水平或垂直的分隔线，可带标签文字。支持实线、虚线、点线样式。
能用来做什么：设置页的分组线、登录页的"或"分割线、列表项之间的分隔。
Divider
4. SimpleGrid — 网格布局
等宽列网格，自动排列子元素。
能用来做什么：背包格子排列、技能快捷栏、图片画廊、卡牌手牌区。
SimpleGrid
5. SafeAreaView — 安全区域
自动检测设备的异形屏区域（刘海、底部指示条、圆角），为内容添加对应的安全内边距。
能用来做什么：作为页面最外层容器，确保内容不会被刘海遮挡。手机游戏上架必备。
SafeAreaView
6. ScrollView — 滚动视图
可滚动容器，支持惯性滚动、弹性回弹、滚动条、滚动吸附。
能用来做什么：长列表页面、设置页面、商店物品浏览、聊天记录滚动。
ScrollView
输入控件（9 个）
输入控件负责接收用户操作，是交互的核心。
7. Button — 按钮
交互按钮，内置多种样式变体，支持悬停、按压状态变化。
能用来做什么：开始游戏、确认购买、技能释放、菜单选项……游戏中出现频率最高的交互元素。
Button
8. TextField — 文本输入框
支持光标、选中、占位文字、密码模式、长度限制。
能用来做什么：玩家昵称输入、聊天消息输入、搜索框、密码输入、兑换码输入。
TextField
9. Checkbox — 复选框
勾选框，带标签文字。
能用来做什么：设置页的开关选项（音效开/关、记住密码）、多选筛选、用户协议勾选。
Checkbox
10. Toggle — 开关
iOS 风格的滑动开关。
能用来做什么：与 Checkbox 类似，但视觉上更适合"开/关"的二元设置，如推送通知、自动保存。
Toggle
11. Slider — 滑块
数值滑动选择器，支持最小值、最大值、步长、渐变轨道。
能用来做什么：音量调节、亮度调节、灵敏度设置、角色属性加点。
Slider
12. Stepper — 步骤指示器
向导式步骤进度条，显示当前处于哪一步。支持默认、圆点、简约三种样式。
能用来做什么：新手引导流程、角色创建步骤、任务进度展示、教程步骤指引。
Stepper
13. Rating — 评分
星级评分组件，支持半星、自定义图标（星星、爱心）。
能用来做什么：关卡评分（1~3 星）、游戏评价、难度选择、满意度反馈。
Rating
14. FileUpload — 文件上传
文件选择组件，支持拖放区域和按钮两种样式。（无法做到从玩家手机或PC处上传，只能用来模拟交互）
能用来做什么：玩家头像上传、自定义地图导入、Mod 文件加载、截图分享。
FileUpload
15. ButtonGroup — 按钮组
将多个按钮紧密排列，自动换行。
能用来做什么：工具栏操作组（保存/取消/删除）、视图切换（日/周/月）、筛选条件组合。
ButtonGroup
选择控件（7 个）
选择控件用于从一组选项中挑选值。
16. Dropdown — 下拉选择
经典下拉菜单，点击展开选项列表。
能用来做什么：语言切换、难度选择、服务器选择、排序方式切换。
Dropdown
17. DatePicker — 日期选择器
弹出日历面板选择日期，支持单选、范围选、多选。
能用来做什么：活动日期选择、签到日历、预约系统、日志查询。
DatePicker
18. TimePicker — 时间选择器
弹出面板选择小时/分钟/秒。
能用来做什么：闹钟设置、定时任务、活动开始时间、倒计时目标设置。
TimePicker
19. ColorPicker — 颜色选择器
HSV 色盘 + 预设色板，可选透明度通道。
能用来做什么：角色染色、聊天文字颜色、地图编辑器画笔颜色、UI 主题定制。
ColorPicker
20. Calendar — 日历
完整的月历视图，可标记事件。
能用来做什么：签到系统、活动日程、赛季日历、更新日志时间线。
21. Menu — 菜单
上下文菜单 / 右键菜单，支持嵌套子菜单、图标、快捷键、分隔线。
能用来做什么：右键操作菜单（复制/粘贴/删除）、头像点击弹出操作列表、长按物品弹出操作。
Menu
22. Tree — 树形视图
层级结构的可展开树，支持勾选、多选、连接线。
能用来做什么：文件管理器目录树、技能分类浏览、组织架构图、嵌套设置分组。
Tree
展示控件（9 个）
展示控件负责信息的呈现，让数据更美观、更直观。
23. Card — 卡片
带头部、内容、底部区域的卡片容器，支持阴影和边框样式。
能用来做什么：物品详情卡、角色信息卡、商店商品卡、成就卡片、关卡选择卡。
Card
24. Badge — 徽标
附着在其他元素上的小标记，用于显示数字或状态点。（支持动画！）
能用来做什么：未读消息数、邮件提醒红点、在线状态指示、商品折扣标签。
Badge
25. Chip — 标签
紧凑的标签元素，可选中、可删除。
能用来做什么：技能标签、物品属性词条、筛选标签、队伍成员标签。
Chip
26. Avatar — 头像
圆形/方形头像，支持图片、文字首字母、状态指示。
能用来做什么：玩家头像、好友列表头像、聊天消息发送者头像、排行榜头像。
Avatar
27. Alert — 提示横幅
彩色消息条，用于显示信息/成功/警告/错误提示。
能用来做什么：系统公告、维护通知、操作成功反馈、错误提示、新版本提醒。
Alert
28. Tooltip — 悬浮提示
鼠标悬停时显示的小提示框。
能用来做什么：按钮功能说明、图标含义解释、属性数值详情、快捷键提示。
Tooltip
29. Skeleton — 骨架屏
加载中的占位动画，有脉冲和波浪两种动效。
能用来做什么：页面加载中的占位、列表数据请求中的骨架、图片加载前的占位。
Skeleton
30. ProgressBar — 进度条
线性进度条，支持确定进度和不确定（加载中）模式。（支持动画！）
能用来做什么：下载进度、经验条、血量条、加载进度、任务完成进度。
ProgressBar
31. RichText — 富文本
支持 HTML 风格标签的富文本，可嵌入颜色、粗体、斜体、链接、物品引用。
能用来做什么：聊天消息渲染、任务描述（高亮关键词）、物品说明文本、公告内容。
RichText
导航控件（3 个）
导航控件帮助用户在不同页面或区域之间切换。
32. Tabs — 标签页
选项卡导航，点击切换内容面板。支持线条、封闭、药丸三种外观。
能用来做什么：商店分类（武器/防具/道具）、角色面板切换（属性/技能/背包）、设置分页。
Tabs
33. Breadcrumb — 面包屑
层级路径导航，展示当前位置的路径链。
能用来做什么：文件管理器路径、多级菜单导航、任务详情返回路径。
Breadcrumb
34. Pagination — 分页
页码导航，用于分页内容的翻页。
能用来做什么：排行榜翻页、商店商品分页、搜索结果翻页、日志记录分页。
Pagination
容器控件（6 个）
容器控件用于组织和展示结构化的内容。
35. Accordion — 折叠面板
可展开/折叠的内容区域，一次只展开一个或多个。
能用来做什么：FAQ 列表、分组设置面板、任务详情展开、技能说明折叠。
Accordion
36. Carousel — 轮播
内容轮播，支持自动播放、指示点、左右箭头导航。
能用来做什么：首页活动横幅、新闻公告轮播、角色展示切换、教程步骤幻灯片。
Carousel
37. Timeline — 时间轴
垂直时间线，展示流程或历史事件。
能用来做什么：版本更新日志、任务进度链、角色成长历程、战斗回放时间线。
Timeline
38. Table — 数据表格
结构化表格，支持列定义、排序、行点击。
能用来做什么：排行榜、属性对比、战斗统计、物品数据一览表。
Table
39. List — 列表
通用列表组件，支持分组、嵌套、选择。
能用来做什么：设置选项列表、聊天联系人列表、任务列表、物品清单。
List
40. VirtualList — 虚拟列表
高性能列表，使用对象池 + 视图回收，只渲染可见区域。万级数据流畅滚动。
能用来做什么：大型背包（几百上千件物品）、排行榜（前 10000 名）、聊天记录、日志查看器。这是普通 ScrollView 无法胜任的场景。
VirtualList
浮层控件（4 个）
浮层控件覆盖在页面之上，用于临时交互或信息展示。
41. Modal — 模态弹窗
全屏遮罩弹窗，带标题、内容、底部按钮区域。可以通过 Modal.Confirm 和 Modal.Alert 快捷调用。
能用来做什么：确认对话框（删除确认、退出确认）、物品详情弹窗、成就解锁弹窗、系统公告。
Modal
42. Drawer — 侧边抽屉
从屏幕边缘滑出的面板，支持上下左右四个方向。
能用来做什么：设置面板、物品详情侧栏、筛选面板、导航菜单。lua
Drawer
43. Popover — 气泡浮层
锚定到某个元素的小浮层，点击或悬停触发。
能用来做什么：按钮操作确认气泡、更多信息展示、快捷操作面板、物品小提示。
Popover
44. Toast — 临时通知
屏幕边缘弹出的短暂消息，自动消失。
能用来做什么：操作成功反馈、错误提示、获得物品通知、成就达成提示。
Toast
游戏专用组件（6 个）
这些组件是为游戏场景专门设计的高级组件，在通用 UI 库中很少见，但在游戏开发中非常实用。
45. ChatWindow — 聊天窗口
MMO 风格的聊天窗口，支持消息气泡、发送者区分（自己/他人/系统）、RichText 标签渲染、自动滚动到底部。
能用来做什么：多人游戏聊天、NPC 对话窗口、系统消息日志、战斗记录显示。
ChatWindow
46. SkillTree — 技能树
可缩放、可平移的技能树可视化组件。节点有已解锁/可解锁/锁定三种状态，父子节点间自动绘制连线。
能用来做什么：RPG 技能树、科技树、天赋系统、成就解锁路线图。
SkillTree
（以下四个为背包管理模块多种功能）
47. ItemSlot — 物品格子
RPG 风格的单个物品槽，显示物品图标，支持拖放交互。可区分装备栏和背包栏，空槽显示类型图标。
能用来做什么：背包格子、装备栏位、快捷栏、合成槽、交易格子。
48. DragDropContext — 拖放上下文
拖放管理器，维护拖拽状态，在最高层渲染拖拽中的物品图标。与 ItemSlot 配合使用实现物品拖放交换。
能用来做什么：背包物品拖放、装备穿戴卸下、快捷栏自定义排列、卡组编辑拖放。
49. ItemTooltip — 物品提示
全局单例的物品详情悬浮窗，根据品质自动着色，显示名称、图标、描述、属性数值。
能用来做什么：鼠标悬停物品时显示详情、长按物品弹出信息卡、装备对比悬浮窗。
50. InventoryManager — 背包管理器
纯数据模型（无 UI），管理背包和装备数据、处理物品移动逻辑。与 ItemSlot 配合使用。
能用来做什么：背包系统的数据后端——物品增删查移、装备穿戴卸下逻辑、物品类型校验。
背包管理
总结：
50 个组件，8 大分类。你不需要记住每个组件的用法细节——那是 AI 的事。
你只需要做到一件事：知道有这么个东西，记住它的名字。
当你下次对 AI 说"帮我用 Drawer 做一个从右边滑出来的设置面板"的时候，AI 就不会再给你手搓一百行代码了。
把这篇文章收藏起来，下次开发的时候翻一翻，找到你要的组件名字，然后告诉 AI——就这么简单。