当前位置：首页 > news >正文

Unity UGUI实战：从官方案例拆解到性能优化全链路

news 2026/7/26 21:53:05

1. 项目概述：为什么UGUI案例实战是Unity开发者的必修课？

如果你是一名Unity开发者，无论你是刚入门的新手，还是已经做过几个小项目的“准熟手”，我相信你一定对UGUI（Unity GUI）这个名字既熟悉又陌生。熟悉是因为几乎每个Unity项目都离不开它——从开始界面的“Start”按钮，到游戏内的血条、背包、设置面板，UGUI无处不在。陌生则是因为，很多人对它的使用还停留在“拖拖拽拽”的层面，一旦遇到复杂的交互逻辑、性能瓶颈或者需要高度自定义的UI效果时，就感到束手无策，只能四处搜索零散的代码片段，结果往往是“知其然，而不知其所以然”。

这正是我决定深入拆解Unity官方UGUI完整案例的初衷。市面上关于UGUI的教程很多，但大多要么是基础控件的简单介绍，要么是某个炫酷特效的孤立实现。而Unity官方提供的那些看似简单的案例项目，实际上是一个被严重低估的宝藏。它们不仅仅是功能的演示，更是一套由Unity引擎团队亲自编写的、符合最佳实践的设计范本。通过实战解析这些案例，我们不仅能学会“怎么做”，更能透彻理解“为什么这么做”，从而建立起一套属于自己的、扎实的UI开发知识体系。无论是应对复杂的业务逻辑，还是优化UI性能，都能做到心中有数，手中有策。

2. UGUI核心架构与官方案例设计思路拆解

2.1 UGUI的底层渲染逻辑：从Canvas到屏幕

在开始动手之前，我们必须先理解UGUI是如何工作的。很多开发者抱怨UGUI“卡”，其实问题往往出在对底层机制的不了解上。UGUI的核心是Canvas组件，它决定了UI元素的渲染方式。这里有一个关键概念：Canvas的渲染模式。

Screen Space - Overlay：这是最常用的模式，UI渲染在场景中所有3D对象之上。它的优点是简单高效，但所有UI元素都在一个“层”里，由Unity的UI系统统一管理绘制命令（Draw Call）。如果你在一个Canvas下放了100个Image，并且它们使用的不是同一张图集（Atlas），那么就可能产生100个Draw Call，性能灾难就此埋下伏笔。

Screen Space - Camera：UI被渲染在一个指定摄像机前方的平面上。这种模式可以让UI与3D场景产生交互，比如让UI作为世界空间中的公告板。它的性能开销通常比Overlay模式稍大。

World Space：将UI完全当作3D对象来处理，可以任意旋转、缩放，并与其他3D物体交互。常用于游戏内的3D血条、VR/AR应用的界面。

官方案例通常会清晰地展示不同Canvas的划分。例如，一个复杂的UI界面，可能会被拆分成多个Canvas：

静态Canvas：用于存放几乎不变化的UI，如背景图。可以设置为Static，让Unity进行合批优化。
动态Canvas：用于存放频繁更新的UI，如分数文本、滚动列表。需要单独管理，避免污染静态UI的合批。

实操心得：不要把所有UI元素都扔进一个巨大的Canvas里。根据更新频率和功能模块进行拆分，是优化UI性能的第一步。官方案例中，对于列表（Scroll View）这类动态元素，几乎总是为其单独创建一个Canvas，甚至为列表中的每个可交互项再嵌套子Canvas（通过Canvas Group或Sub-canvas）来精细控制重绘区域。

2.2 官方案例的模块化与数据驱动设计

打开一个高质量的官方UGUI案例（例如Unity官方的“UI Samples”项目），你会发现它的代码组织非常清晰。这背后体现的是模块化和数据驱动的设计思想。

1. 视图（View）与逻辑分离：官方案例很少会在Button的OnClick()事件监听器里直接写一大堆业务逻辑。相反，你会看到大量的MonoBehaviour脚本扮演着“视图控制器”的角色。例如，一个InventoryPanel.cs脚本负责管理整个背包UI的显示，它内部会引用所有的Image、Text、Button组件，但具体的物品数据来源、点击后的逻辑（是使用还是丢弃），则会通过事件（UnityEvent）或接口（Interface）传递给更上层的游戏逻辑管理器（如GameManager或InventoryManager）。

2. 数据驱动的UI更新：这是现代UI开发的核心。官方案例中常见一种模式：当底层数据（如玩家血量、金币数、任务列表）发生变化时，不是直接去查找并修改对应的Text组件，而是触发一个事件。UI控制器订阅这个事件，在事件回调中统一更新所有相关的UI元素。这样做的好处是解耦，数据层完全不用关心UI的存在，而UI层只需要对数据变化做出响应。

// 一个简化的数据驱动示例 public class PlayerData : MonoBehaviour { public int Coins; public UnityEvent<int> OnCoinsChanged; // 定义事件 public void AddCoins(int amount) { Coins += amount; OnCoinsChanged?.Invoke(Coins); // 数据变更时触发事件 } } public class CoinUI : MonoBehaviour { public Text coinText; public PlayerData playerData; void Start() { playerData.OnCoinsChanged.AddListener(UpdateCoinUI); // 订阅事件 UpdateCoinUI(playerData.Coins); // 初始化 } void UpdateCoinUI(int newCoinValue) { coinText.text = newCoinValue.ToString(); } }

3. 可复用的UI组件：官方案例里充满了可复用的设计。比如一个标准的ListItem预制体（Prefab），包含图标、名称、描述和按钮。一个ScrollView的控制器脚本，只需要接收一个数据列表，然后动态实例化这些ListItem预制体并赋值即可。这种模式在背包、商店、排行榜等场景中应用极其广泛。

3. 核心控件深度解析与实战技巧

3.1 RectTransform：UI布局的基石

RectTransform是UGUI中所有UI元素的变换组件，它继承自Transform，但增加了专为矩形界面设计的锚点（Anchors）、轴心点（Pivot）和偏移量（Pos/Size）。理解它，是精准控制UI位置和大小的关键。

锚点（Anchors）：决定了UI元素相对于父矩形的位置关系。官方案例大量使用了锚点的预设（如拉伸Stretch、居中Center）。但高级用法在于自定义锚点。

场景：你需要一个始终位于屏幕右侧1/4宽度，并且高度与父对象相同的面板。
操作：将锚点的四个小三角形，水平方向拖到父矩形的75%和100%位置，垂直方向拖到0%和100%位置。然后将Left和Right的偏移都设为0，这样该UI就会完美地贴合在你定义的锚点区域内，无论屏幕分辨率如何变化。

轴心点（Pivot）：决定了UI元素旋转和缩放的基准点。比如，你要做一个从中心向外放大的动画，就需要把Pivot设置为(0.5, 0.5)。如果要让一个按钮的点击效果是从底部伸展，则可能需要将Pivot设为(0.5, 0)。

常见问题：为什么我的UI在屏幕缩放时位置乱了？99%的原因是锚点设置错误。永远不要只通过修改Pos X/Y和Width/Height来定位UI，而应该先想好它和父物体的相对关系，用锚点来定义这个关系，再用偏移量做微调。

3.2 ScrollView：高性能列表的实现奥秘

ScrollView是UGUI中最复杂也最常用的复合控件之一。官方案例展示了其完整用法，但其中隐藏着许多性能陷阱和优化技巧。

1. 视口（Viewport）与内容（Content）：ScrollView本质上是一个“摄像机”（Viewport）在滚动一个更大的“画布”（Content）。Content下挂载着Vertical/Horizontal Layout Group和Content Size Fitter来自动排列子项并计算总大小。

2. 动态加载与对象池：这是ScrollView性能优化的核心。如果列表有1000项，一次性实例化1000个UI对象将是灾难性的。官方方案虽未直接给出，但最佳实践是使用对象池（Object Pooling）。

原理：只创建足够填满视口（比如10个）的列表项预制体。
滚动时：当一项滚动出视口，不销毁它，而是将其数据更新为即将进入视口的新项，并重置其位置，实现“循环利用”。
实现：你需要编写一个RecyclingScrollRect或使用Asset Store的成熟插件。核心是重写ScrollRect组件，并监听Content的位置变化，动态计算需要显示哪些数据索引，并更新对应的列表项。

3. 避免在ScrollView中使用过多Layout Group：Layout Group在每次布局变化时都会遍历所有子物体重新计算，在动态增删项时开销很大。对于超长列表，一种优化策略是：使用固定尺寸的列表项，并通过脚本手动计算和设置每个项的位置。这样可以完全避免Layout Group的计算开销。

3.3 InputField与事件交互：打造流畅的输入体验

InputField是用户交互的关键。官方案例展示了基础用法，但要做出好体验，还需注意：

1. 移动端虚拟键盘适配：在移动设备上，当InputField被激活时，虚拟键盘会弹出，可能会遮挡输入框。UGUI的InputField组件有一个RectTransform类型的Text Viewport属性和一个Scroll Rect组件，可以配合实现当输入文本超出视口时自动滚动。但对于键盘遮挡，需要额外处理：

// 一种简单的适配方法：将整个UI画布上移 public class InputFieldKeyboardAdjuster : MonoBehaviour { public RectTransform canvasRectTransform; public float offset = 300f; // 上移距离 private Vector2 originalPosition; void Start() { originalPosition = canvasRectTransform.anchoredPosition; } public void OnInputFieldSelected() { // 当输入框被选中时，将画布上移 canvasRectTransform.anchoredPosition = originalPosition + Vector2.up * offset; } public void OnInputFieldDeselected() { // 当输入框失去焦点时，恢复画布位置 canvasRectTransform.anchoredPosition = originalPosition; } }

将这段脚本挂载到Canvas上，并将InputField的OnSelect和OnDeselect事件关联到对应方法。

2. 自定义验证与格式：InputField的Content Type提供了基础验证，但更复杂的规则（如自定义密码强度、实时格式化电话号码）需要用到OnValueChanged事件和字符验证回调OnValidateInput。

public class PhoneNumberInputField : MonoBehaviour { public InputField inputField; void Start() { inputField.onValueChanged.AddListener(FormatPhoneNumber); } void FormatPhoneNumber(string text) { // 移除所有非数字字符 string digits = new string(text.Where(char.IsDigit).ToArray()); // 格式化为 XXX-XXXX-XXXX if (digits.Length <= 3) inputField.text = digits; else if (digits.Length <= 7) inputField.text = $"{digits.Substring(0, 3)}-{digits.Substring(3)}"; else inputField.text = $"{digits.Substring(0, 3)}-{digits.Substring(3, 4)}-{digits.Substring(7)}"; // 将光标移动到末尾 inputField.caretPosition = inputField.text.Length; } }

4. 动画与视觉效果：超越静态UI

UGUI的强大之处在于它能与Unity的动画系统（Animator）和粒子系统无缝结合。官方案例中通常包含一些基础的UI动画，但我们可以做得更深入。

4.1 使用Animator控制UI状态机

不要只把UI动画理解为简单的渐入渐出。一个复杂的按钮可能有多种状态：Normal, Highlighted, Pressed, Selected, Disabled。我们可以为每个状态制作动画片段（Animation Clip），然后用一个Animator控制器来管理它们之间的过渡。

实战步骤：

为UI元素（如Button）添加Animator组件。
创建Animator Controller，并定义状态（States）：Idle, Highlight, Press, Disable。
为每个状态创建动画片段。例如，“Highlight”状态可以包含一个Scale从1到1.1的缩放动画。
设置过渡条件（Parameters）。通常使用Bool类型的参数，如IsHighlighted、IsPressed。
编写脚本，根据UI的实际交互情况（如EventTrigger组件捕获的PointerEnter、PointerExit、PointerDown事件）来修改Animator的参数，从而触发状态切换。

这种方式的优点是高度可控且性能优于Update中每帧修改属性，因为动画是由原生动画系统驱动的。

4.2 Mask与RectMask2D：实现裁切效果

Image组件的Image Type设置为Filled，可以实现血条、进度条、圆形填充等效果。但更复杂的裁切，需要用到Mask或RectMask2D。

Mask：基于Alpha通道进行裁切。子物体只有落在Mask物体图像不透明区域内的部分才会被显示。常用于制作圆形头像、不规则形状的UI窗口。注意：Mask会为每个被遮罩的子物体增加一个Draw Call，并可能禁用GPU Instancing，有性能开销。
RectMask2D：只进行矩形裁切，性能远优于Mask。它直接丢弃矩形区域外的像素，不产生额外的Draw Call。只要是矩形裁切需求，应优先使用RectMask2D。

官方案例中，ScrollView的Viewport默认就使用了RectMask2D，这正是为了高性能地裁切滚动区域外的内容。

4.3 自定义Shader与材质：打造独特UI风格

UGUI的Image和Text默认使用UI/Default Shader。但有时我们需要特殊效果，比如灰度图、外发光、溶解效果。这时就需要自定义Shader和材质。

一个简单的灰度化效果示例：

创建一个新的Unlit Shader，修改片段着色器，将颜色转换为灰度。

// 在片元着色器中 fixed4 frag (v2f i) : SV_Target { fixed4 col = tex2D(_MainTex, i.uv); // 计算灰度值（人眼感知亮度公式） fixed luminance = 0.2126 * col.r + 0.7152 * col.g + 0.0722 * col.b; col.rgb = fixed3(luminance, luminance, luminance); col.a *= _Alpha; // 可以控制整体透明度 return col; }

将Shader编译，在Unity中创建对应的材质球。
将材质球赋给Image组件的Material属性。

注意事项：为UI使用自定义Shader时，务必确保Shader支持UI所需的特性，如透明度混合（Blend SrcAlpha OneMinusSrcAlpha）、测试关闭（ZTest Always）等。最好从Unity内置的UI Shader（如UI/Default）开始修改。过度使用自定义材质会打断UI的合批，需要权衡效果与性能。

5. 性能优化全链路实战

UGUI性能优化是一个系统工程，官方案例往往运行流畅，是因为它们遵循了最佳实践。我们可以从以下几个层面进行优化：

5.1 绘制调用（Draw Call）优化

这是UI性能最直观的指标。一个Draw Call是CPU命令GPU绘制一批具有相同状态（材质、纹理）的图元。UGUI的合批（Batching）系统会自动尝试将使用相同材质和纹理的UI元素合并到一个Draw Call中。

优化策略：

使用图集（Atlas）：这是最重要的优化手段。将多个小图片打包到一张大图（图集）中，这样所有使用这张大图的UI元素就可以被合批。Unity自带了Sprite Atlas功能（2017.1后），在Window -> 2D -> Sprite Atlas中创建和管理。
减少材质种类：尽量避免为UI元素使用不同的材质，即使它们引用同一图集的不同部分。自定义字体（Font）也会生成独立的材质，注意控制字体种类。
层级顺序：UGUI的合批依赖于UI元素在Hierarchy中的渲染顺序。使用相同材质的UI元素，在Hierarchy中连续排列，才能被合批。如果中间插入了一个使用不同材质的元素，合批就会被打断。因此，需要合理规划UI的层级结构。

5.2 网格重建（Rebuild）优化

当UI元素的属性（如Text的字符串、Image的Sprite、布局变化）发生改变时，UGUI需要重新计算其几何形状（网格），这个过程称为重建。频繁重建是导致UI卡顿的元凶。

优化策略：

分离动态与静态UI：将频繁变化的UI（如计时器、飘字）放在独立的Canvas下。因为Canvas重建是以Canvas为单位的，分离可以避免牵连静态UI。
谨慎使用ContentSizeFitter和LayoutGroup：这两个组件在自身或子物体尺寸变化时，会触发昂贵的布局计算。对于尺寸固定的元素，应直接设置RectTransform的尺寸，而不是依赖它们。
对Text的优化：
- 避免每帧修改Text.text。如果必须（如显示帧率），可以限制更新频率，比如每0.1秒更新一次。
- 使用TextMeshPro替代传统的Text组件。TextMeshPro在文本渲染质量和性能上都有巨大优势，它生成的网格更高效，且提供了丰富的性能选项。
启用Canvas的“Optimize”选项：在Canvas组件的Additional Shader Channels中，只勾选实际需要的通道（如TexCoord1, Normal），可以减少顶点数据量。

5.3 内存与资源管理

Sprite的Read/Write Enabled：在导入Sprite设置中，默认勾选了“Read/Write Enabled”，这会使纹理在内存中保留一份CPU可访问的副本，内存占用翻倍。如果不需要在运行时通过代码修改像素（如动态图集），务必取消勾选此选项。
字体文件大小：中文字体文件通常很大。使用Font Asset Creator（TextMeshPro功能）可以创建字体子集（Font Subset），只包含你项目中实际用到的字符，能显著减小字体资源体积。
隐藏与禁用：将UI设置为SetActive(false)会使其停止渲染和更新。但如果是暂时隐藏，可以考虑使用CanvasGroup组件，将其Alpha设为0，Interactable和Blocks Raycasts设为false。这样UI对象仍然存在，但不可见且不交互，重新显示时无需重新初始化，速度更快。

6. 官方案例实战：拆解一个完整的设置界面

让我们以一个典型的游戏“设置界面”为例，综合运用以上所有知识。这个界面通常包含：窗口弹出动画、标签页切换、滑动条控制音量、下拉菜单选择分辨率、复选框控制选项等。

6.1 结构与动画实现

窗口管理：创建一个SettingsWindow预制体。为其添加Animator，制作一个从屏幕外滑入（或淡入缩放）的入场动画。使用一个单例或事件总线来管理窗口的打开与关闭，确保同一时间只有一个设置窗口存在。
标签页切换：使用Toggle Group来实现。创建多个Toggle作为标签头，将它们放在同一个Toggle Group下。每个Toggle下挂载一个对应的面板（Panel）。通过监听Toggle的onValueChanged事件，来显示/隐藏对应的面板，并可以配合动画实现平滑切换。

public class TabManager : MonoBehaviour { public ToggleGroup tabToggleGroup; public GameObject[] tabPanels; // 顺序与Toggle对应 void Start() { var toggles = tabToggleGroup.GetComponentsInChildren<Toggle>(); for (int i = 0; i < toggles.Length; i++) { int index = i; // 闭包捕获 toggles[i].onValueChanged.AddListener((isOn) => { if (isOn) ShowTab(index); }); } // 默认显示第一个 ShowTab(0); } void ShowTab(int index) { for (int i = 0; i < tabPanels.Length; i++) { tabPanels[i].SetActive(i == index); } } }

6.2 数据绑定与持久化

设置选项的值需要保存到本地，并在下次启动时加载。

数据模型：创建一个SettingsData类，用[System.Serializable]标记，包含所有设置项（如float musicVolume,bool isFullscreen等）。
UI绑定：为每个UI控件编写简单的绑定脚本。例如VolumeSliderBinder：

public class VolumeSliderBinder : MonoBehaviour { public Slider slider; public string prefsKey = "MusicVolume"; // PlayerPrefs存储键 public UnityEvent<float> onValueChanged; // 供其他模块监听 void Start() { slider.value = PlayerPrefs.GetFloat(prefsKey, 0.8f); slider.onValueChanged.AddListener(OnSliderValueChanged); } void OnSliderValueChanged(float value) { PlayerPrefs.SetFloat(prefsKey, value); onValueChanged?.Invoke(value); // 通知音频管理器等 } }

统一管理：创建一个SettingsManager单例，在游戏启动时从PlayerPrefs（或更安全的Json文件）加载SettingsData，并应用到所有绑定的UI控件和游戏系统（如AudioListener.volume）上。

6.3 高级交互：分辨率下拉菜单

分辨率下拉菜单（Dropdown）需要动态填充当前显示器支持的分辨率列表。

public class ResolutionDropdownPopulator : MonoBehaviour { public Dropdown dropdown; private List<Resolution> resolutions; private int currentResolutionIndex = 0; void Start() { dropdown.ClearOptions(); resolutions = Screen.resolutions.ToList(); // 过滤掉重复的刷新率不同的分辨率（可选） resolutions = resolutions.Distinct(new ResolutionComparer()).ToList(); List<string> options = new List<string>(); for (int i = 0; i < resolutions.Count; i++) { string option = $"{resolutions[i].width} x {resolutions[i].height}"; options.Add(option); // 检查是否为当前设置的分辨率 if (resolutions[i].width == Screen.currentResolution.width && resolutions[i].height == Screen.currentResolution.height) { currentResolutionIndex = i; } } dropdown.AddOptions(options); dropdown.value = currentResolutionIndex; dropdown.RefreshShownValue(); dropdown.onValueChanged.AddListener(SetResolution); } void SetResolution(int index) { Resolution resolution = resolutions[index]; Screen.SetResolution(resolution.width, resolution.height, Screen.fullScreen); } // 自定义比较器，只比较宽高 class ResolutionComparer : IEqualityComparer<Resolution> { public bool Equals(Resolution x, Resolution y) { return x.width == y.width && x.height == y.height; } public int GetHashCode(Resolution obj) { return obj.width.GetHashCode() ^ obj.height.GetHashCode(); } } }

7. 调试与问题排查实战手册

即使遵循了所有最佳实践，开发中仍会遇到各种奇怪的UI问题。这里记录一些我踩过的坑和解决方法。

7.1 UI点击无响应或穿透

现象：点击按钮没反应，或者点击了UI却触发了后面3D物体的事件。

排查步骤：

检查Raycast Target：确保可点击的UI元素（Image, Text, RawImage）其Raycast Target属性是勾选的。同时，确保作为背景的、不需要交互的大面积Image，其Raycast Target是取消勾选的，否则它会阻挡后面按钮的点击。
检查EventSystem：场景中必须有且仅有一个EventSystem对象。检查其Input Module是否正常（通常是Standalone Input Module）。
检查层级与遮挡：确认按钮在Hierarchy中的顺序，确保它没有被其他完全覆盖它的、且Raycast Target为true的UI元素挡住。
检查Canvas Group：如果按钮或其父物体上有CanvasGroup，确保Interactable为true且Alpha不为0。
Graphics Raycaster：确保按钮所在的Canvas上有Graphics Raycaster组件。

7.2 文字显示模糊或锯齿严重

现象：Text组件中的文字看起来模糊不清。

解决方案：

使用TextMeshPro：这是终极解决方案。TextMeshPro使用有向距离场（SDF）渲染文字，在任何分辨率下都清晰锐利，且功能强大。
调整传统Text：如果坚持使用传统Text：
- 检查字体纹理的导入设置，确保Rendering Mode是Smooth，并适当增加Font Size。
- 在Canvas的Canvas Scaler组件中，将UI Scale Mode设置为Scale With Screen Size，并设定一个合适的Reference Resolution（如1920x1080），这样UI会在不同分辨率下按比例缩放，减少因缩放导致的模糊。
- 尝试启用Best Fit（谨慎使用，可能导致布局问题）。

7.3 ScrollView滚动卡顿或跳动

现象：滚动列表时感觉不跟手，或者快速滚动后内容跳动。

优化方法：

禁用惯性：如果不需要惯性滚动效果，将ScrollRect组件的Inertia取消勾选，可以立即停止滚动，避免多余的滑动。
调整滚动灵敏度：Scroll Sensitivity参数控制鼠标滚轮滚动的速度，调低它可以让滚动更平滑。
检查布局计算：如果Content下的子物体频繁改变尺寸（如包含自适应文本），会引发持续的布局重建。考虑固定列表项的高度，或者使用Content Size Fitter的Layout Group的Child Controls Size属性，而不是每帧通过代码计算。
使用Canvas.willRenderCanvases事件：如果你必须在每帧更新大量UI元素，可以将更新逻辑放入Canvas.willRenderCanvases事件的监听中。这个事件在UI系统即将开始渲染当前帧的所有Canvas前触发，在此处更新可以确保所有修改在同一帧的渲染中生效，避免因跨帧更新导致的视觉跳动。

7.4 在VR/AR中UI的交互问题

现象：在VR中，激光指针无法与UI交互。

解决方案：

确保Canvas渲染模式为World Space。
添加Tracked Device Graphic Raycaster：这是XR交互工具包（XR Interaction Toolkit）或OpenXR提供的组件，用于处理XR控制器发出的射线与World Space UI的交互。用它替换掉或与标准的Graphic Raycaster共存。
调整碰撞体：World Space UI需要一个Box Collider（或Mesh Collider）来接收物理射线检测。确保Collider的大小覆盖了整个UI区域。
事件系统：需要使用XR Input Module来替换标准的Standalone Input Module。

UGUI的深度就像一座冰山，官方案例展示了水面上规整的部分，而水下的庞大体系——包括渲染管线集成、输入事件流、合批算法等——则需要我们在不断的实战和排查中去领悟。掌握它没有捷径，就是从一个完整的案例出发，理解每一行代码、每一个组件设置背后的意图，然后在自己的项目中大胆实践、踩坑、总结。当你能够随心所欲地构建出既美观又高效的UI系统时，你会发现，从前端交互到后端数据绑定的整套思维模式，已经成为了你开发者工具箱中最坚实的一部分。

查看全文

http://www.jsqmd.com/news/1269992/