3、基础控件详解(上)：Text、Image、Raw Image 的属性、使用场景与性能优化
好，咱们今天正式开始啃 UI 控件这块硬骨头。说实话，Unity 的 UI 系统里，最常用的就是 Text、Image 和 Raw Image 这三个。你想想看，任何一个界面，不是文字就是图片，对吧？
我刚开始做 UI 的时候，觉得这仨玩意儿太简单了，拖进去改改属性就完事。结果后来项目一复杂，卡顿、内存飙升、文字模糊……各种问题全冒出来了。嗯，今天我就把这几年的踩坑经验，一次性倒给你。
3.1 Text 控件：不只是显示文字
Text 控件，说白了就是把一段字符串渲染到屏幕上。但你别小看它，里面的门道不少。
核心属性一览
| 属性 | 作用 | 我的建议 |
|---|---|---|
| Text | 要显示的字符串内容 | 尽量用 StringBuilder 拼接，别直接 += |
| Font | 字体资源 | 一个项目别超过 3 种字体，否则包体爆炸 |
| Font Style | 加粗、斜体等 | 少用 Bold，性能开销比 Normal 大 |
| Font Size | 字号大小 | 建议用偶数，避免渲染走样 |
| Alignment | 文字对齐方式 | 这个随意，但别频繁动态改 |
| Best Fit | 自动适配字号 | 慎用！性能杀手，后面细说 |
| Rich Text | 支持富文本标签 | 好用，但别嵌套太多层 |
使用场景
Text 控件最常见的场景就是：
- 按钮上的文字——比如「开始游戏」「退出」
- 数值显示——血量、金币、倒计时
- 对话/剧情文本——RPG 里的对话框
- 提示信息——「加载中...」「网络连接失败」
我个人习惯是，所有静态文字（比如标题、标签）直接用 Text 组件，动态文字（比如聊天内容）用 TextMeshPro。为什么？因为 Text 在大量更新时会有 GC 压力，而 TMP 在这方面优化得更好。
避坑指南：Best Fit 的陷阱
我曾经在一个排行榜界面里，给每个排名项都开了 Best Fit。结果列表一滚动，帧率直接掉到 20 帧。查了半天才发现，Best Fit 会在每一帧重新计算字号大小，而且它不会缓存结果。
所以我的建议是：能不用 Best Fit 就别用。如果实在需要自适应，手动写个脚本，在文字长度变化时计算一次字号，然后关掉 Best Fit。
性能优化要点
- 减少重建：Text 组件每次修改内容、颜色、字号都会触发 Canvas 重建。尽量把多次修改合并到一次完成。
- 字体图集：所有 Text 尽量用同一个字体文件，这样 Unity 会把它们打包到同一张图集里，减少 Draw Call。
- 避免空 Text：如果某个 Text 不需要显示内容，直接禁用 GameObject，别留一个空字符串在那。
3.2 Image 控件：UI 的颜值担当
Image 控件是 Unity UI 里最常用的图片显示组件。它和 Raw Image 的区别，说白了就是：Image 用 Sprite，Raw Image 用 Texture。
核心属性详解
| 属性 | 说明 | 实战经验 |
|---|---|---|
| Source Image | 绑定的 Sprite 资源 | 记得把图片类型设为 Sprite(2D and UI) |
| Color | 叠加颜色，可做半透明效果 | 用白色 Sprite + Color 染色，比准备多张彩色图更灵活 |
| Image Type | Simple / Sliced / Tiled / Filled | Sliced 最常用，Filled 做血条很香 |
| Preserve Aspect | 保持原始宽高比 | 建议勾上，否则图片会被拉伸变形 |
| Set Native Size | 恢复为图片原始尺寸 | 适合图标，但别用在动态加载的图片上 |
Image Type 怎么选？
这个我得多说两句。很多新手上来就用 Simple，结果做九宫格边框时发现拉伸得一塌糊涂。
- Simple：普通显示，适合图标、头像。性能最好。
- Sliced：九宫格切片，适合按钮、面板边框。我项目中 80% 的 Image 都用这个。
- Tiled：平铺，适合背景纹理。注意：平铺的图片尺寸最好是 2 的幂次方。
- Filled：填充显示，做血条、冷却转圈、进度条的神器。
小技巧：做血条时，用 Filled 类型的 Image，设置 Fill Method 为 Horizontal，然后动态修改 Fill Amount 从 1 到 0。比用 Slider 控件轻量得多，而且不会触发额外的布局计算。
性能优化：图集与合批
Image 控件的性能瓶颈，90% 出在 Draw Call 上。怎么破？
- 打图集：把所有 UI 小图（按钮、图标、边框）打到一个图集里。Unity 的 Sprite Atlas 工具就挺好用。
- 层级合并：同一个 Canvas 下，相同图集的 Image 会自动合批。但如果你在中间插了一个不同图集的 Image，就会打断合批。
- 少用 Mask：Mask 组件会强制打断合批，而且会增加 2-3 个 Draw Call。能不用就别用。
重点记住：Image 控件的性能优化，核心就是「减少 Draw Call」。而减少 Draw Call 的核心，就是「打图集 + 保持层级连续」。
3.3 Raw Image 控件：什么时候用它？
Raw Image 和 Image 最大的区别是：它直接接受 Texture 作为输入，而不是 Sprite。这意味着你可以显示任何纹理——包括 Render Texture、网络下载的图片、视频帧等。
核心属性
| 属性 | 作用 | 注意点 |
|---|---|---|
| Texture | 绑定的纹理资源 | 可以是任何 Texture2D 或 RenderTexture |
| UV Rect | 纹理的 UV 裁剪区域 | 可以用来做纹理动画，比如翻页效果 |
| Color | 叠加颜色 | 和 Image 一样，可做半透明 |
典型使用场景
- 显示 Render Texture：比如小地图、监控摄像头画面、3D 模型预览。
- 显示网络图片：头像、商品图，用 UnityWebRequest 下载后赋值给 Texture。
- 视频播放：配合 VideoPlayer 组件，把视频纹理显示在 UI 上。
- 动态纹理：程序生成的纹理，比如噪声图、热力图。
我记得有一次做直播项目，需要在 UI 上显示主播的摄像头画面。用 Image 死活搞不定，后来换成 Raw Image + Render Texture，一行代码没改就通了。嗯，选对控件真的很重要。
性能优化：Raw Image 的坑
注意：Raw Image 不会参与图集合批！因为它用的是独立纹理，每次渲染都会产生一个单独的 Draw Call。
所以我的建议是：能用 Image 就别用 Raw Image。只有在需要显示非 Sprite 纹理时，才考虑 Raw Image。
另外，如果你用 Raw Image 显示网络图片，记得做缓存和异步加载。别在主线程里直接赋值大纹理，否则界面会卡死。
3.4 三者对比：什么时候用哪个？
| 场景 | 推荐控件 | 原因 |
|---|---|---|
| 显示文字 | Text / TextMeshPro | 原生支持，性能好 |
| 显示 UI 图标、按钮 | Image (Sliced) | 可合批，支持九宫格 |
| 显示角色头像 | Image (Simple) | 打图集后性能优秀 |
| 显示 3D 渲染结果 | Raw Image | 只能用 RenderTexture |
| 显示网络下载的图片 | Raw Image | 直接赋值 Texture |
| 做血条/进度条 | Image (Filled) | 轻量，无需额外组件 |
3.5 本章小结
Text、Image、Raw Image 这三个控件，是 Unity UI 的基石。你掌握了它们，就等于学会了 UI 系统的 60%。
最后再啰嗦一句：性能优化要从一开始就做。别等到项目卡成 PPT 了，才想起来打图集、关 Best Fit。那时候改起来，成本可就高了。
下一章咱们接着聊 Button、Toggle 和 Slider 这些交互控件。到时候我会分享一个我踩过的巨坑——按钮点击穿透的问题。嗯，保证让你少走弯路。