Unity 系列 -- UI 引擎之组件

1,967 阅读24分钟

概述

Unity 中的 UI 引擎是一个用于构建用户界面的框架,它提供了一系列的组件和工具,帮助开发者快速构建交互式的用户界面。

Unity 的 UI 引擎是基于CanvasCanvas是一个渲染容器,用于将 UI 元素呈现在屏幕上。Canvas可以包含多个UI元素,如文本、按钮、图像等。UI元素可以通过RectTransform组件进行定位、缩放和旋转,使其适应不同的屏幕尺寸和分辨率。

Unity 的 UI 引擎提供了一系列的交互组件,如按钮(Button)、开关(Toggle)、开关组 (Toggle Group)、滑动条 (Slider)、滚动条 (Scrollbar)、下拉选单 (Dropdown)、输入框 (Input Field)、滚动矩形/滚动视图 (Scroll Rect/Scroll View)。它们具有共享的内置功能,可用于对状态(正常、突出显示、按下、禁用)之间的过渡进行可视化,也可用于通过键盘或控制器导航到其他可选择的组件。

Unity 的 UI 引擎还提供了一系列的布局组件,如HorizontalLayoutGroupVerticalLayoutGroupGridLayoutGroup等,用于自动排列和布局 UI 元素

Canvas 中,UI 元素可以通过事件系统进行交互。事件系统是一个用于处理用户输入和 UI 事件的框架,它可以检测用户的点击、拖拽、滚动等操作,并将其转换为UI事件,以便开发者对其进行处理。

总的来说,Unity的UI引擎提供了一套完整的工具和组件,用于构建交互式的用户界面。开发者可以使用这些工具和组件,快速构建出适应不同屏幕尺寸和分辨率的用户界面。

矩形变换(Rect Transform)

什么是矩形变换

属性功能
Pos(  X,Y and Z)定义矩形的位置,相当于锚的轴心点位置
Width  /  Height定义矩形的大小,相当于定义矩形的宽度和高度
Left,Top,Right,Bottom定义矩形的边缘相对于冒点的位置,锚点分离时会显示在Pos和Width / Height的位置
Anchors定义矩形在左下角和右上角的锚点
Anchors - Min定义矩形左下脚锚点,(0,0)对应父物体的左下角,(1,1)对应父物体的右上角
Anchors - Max定义矩形右上角锚点,(0,0)对应父物体的左下角,(1,1)对应父物体的右上角
Pivot定义矩形旋转时围绕的中心点坐标
Rotation定义矩形围绕旋转中心点的旋转角度
Scale定义该对象的缩放系数

Rect Transform(矩形变换)是一种有别于原有的 Transform 组件的新的变换组件

  • 在原来的场景中 Transform 组件表示的是一个
  • 而 Rect Transform 表示的是一个矩形

Rect Transform 不仅拥有位置旋转缩放,还拥有高度宽度,并且还有锚点和轴心点属性

锚点(Anchors)

image.png

锚点是相当于子物体对于父物体一个定位的标志

通俗来讲,锚点分为 4 个三角形,4 个三角形分别到游戏对象的 4 个顶点之间的偏移量固定

  1. 锚点在中间

  1. 锚点在边角

  1. 锚点被拆分

轴心点(Pivot)

image.png

旋转,缩放,调整大小都是围绕轴心点进行的,轴心点的位置会影响到它们的修改。工具栏 Pivot 按钮设置为轴心模式时,可在 Scene 视图中移动矩形变换的轴心

image.png

接下来演示在不同的 Pivot 值下,UI 的缩放旋转情况:

  1. 在 Pivot 模式下,设置 Pivot 的值为(0.5,0.5):

在这里插入图片描述 

然后改变 UI 大小和旋转:

  1. 接着设置 Pivot 的值为(0,1): 

在这里插入图片描述 

然后改变 UI 大小和旋转:

image.png

画布组件(Canvas)

属性

属性功能
Render ModeUI 在屏幕上或作为 3D 空间对象进行渲染的方式(见下文)。提供的选项包括 Screen Space - OverlayScreen Space - Camera 和 World Space
Pixel Perfect(仅限 Screen Space 模式)是否应该无锯齿精确渲染 UI?
Render Camera(仅限 Screen Space - Camera 模式)应该将 UI 渲染到的摄像机。
Plane Distance(仅限 Screen Space - Camera 模式)UI 平面在摄像机前方的距离。
Event Camera(仅限 World Space 模式)用于处理 UI 事件的摄像机。
Receives Events此画布是否处理 UI 事件?

三种渲染模式

image.png

Screeb Space-Overlay(屏幕空间,覆盖模式)

  • 该模式下的画布会填满整个屏幕空间,所有 UI 元素会被绘制在所有 3D 对象
  • 画布会自动改变大小以自适应屏幕的大小、分辨率
  • 就算场景中没有相机,UI 也会被渲染出来

image.png

image.png

Screen Space-Camera(屏幕空间,摄影机模式)

  • 在此模式下,画布的渲染效果就好像是在摄像机前面固定一定距离的平面对象上绘制的效果
  • 场景中比 UI 平面更靠近摄像机的所有 3D 对象都将在 UI 前面渲染,而平面后的对象将被遮挡

image.png

image.png

image.png

World-Space(世界空间模式)

  • UI 画布将不会自动面向相机,可以自己摆角度
  • 适用于随角色移动的血条 UI

image.png

三种渲染模式的区别

渲染模式画布对应屏幕摄像机像素对应适应类型适用场景
Screeb Space-Overlay不需要可选2D UI简单 UI
Screeb Space-Camera需要可选2D UI在 UI 上显示 3D 模型
World-Space需要不可选3D UI随角色移动的血条

画布缩放器

画布缩放器组件用于控制画布中 UI 元素的整体缩放和像素密度。此缩放会影响画布下的所有内容,包括字体大小和图像边框。

属性功能
UI Scale Mode确定画布中的 UI 元素的缩放方式。
        Constant Pixel Size无论屏幕大小如何,UI 元素都保持相同的像素大小。
        Scale With Screen Size屏幕越大,UI 元素越大。
        Constant Physical Size无论屏幕大小和分辨率如何,UI 元素都保持相同的物理大小。

画布组

画布组 (Canvas Group) 可集中控制整组 UI 元素的某些方面,而无需单独处理每个元素。画布组的属性会影响所在的游戏对象以及所有子对象。

属性功能
Alpha此组中的 UI 元素的不透明度。该值介于 0 和 1 之间,其中 0 表示完全透明,1 表示完全不透明。请注意,UI 元素也会保留自己的透明度,因此画布组的 Alpha 值将与各个元素的 Alpha 值彼此相乘。
Interactable确定此组件是否接受输入。当设置为 false 时,禁用交互。
Block Raycasts此组件是否作为射线投射的碰撞体?需要在连接到画布的图形射线投射器上调用 RayCast 函数。这_不_适用于 Physics.Raycast
Ignore Parent Groups此组还会受到游戏对象层级视图中更上层的画布组 (Canvas Group) 组件中的设置所影响,还是会忽略并因此覆盖这些设置?

可视组件

文本(Text)

文本组件向用户显示非交互式文本。此控件可用于为其他 GUI 控件提供标题或标签,或显示说明或其他文本。

属性功能
Text控件显示的文本。
Font用于显示文本的字体
Font Style应用于文本的样式。选项包括 NormalBoldItalicBold And Italic
Font Size显示的文本的大小。
Line Spacing文本行之间的垂直间距。
Rich Text文本中的标记元素是否应解释为富文本样式?
Alignment文本的水平和垂直对齐方式。
Align by Geometry使用字形几何形状的范围(而不是字形指标)执行水平对齐。
Horizontal Overflow用于处理文本太宽而无法放入矩形内的情况的方法。提供的选项为 WrapOverflow
Vertical Overflow用于处理换行文本太高而无法放入矩形内的情况的方法。提供的选项为 TruncateOverflow
Best FitUnity 应该忽略大小属性并尝试直接将文本放入控件的矩形?
Color用于渲染文本的颜色。
Material用于渲染文本的材质

默认文本元素如下所示:

文本元素。

有些控件(如按钮开关)内置了文本描述。对于没有隐式文本的控件(如滑动条),可使用通过文本控件创建的标签来指示用途。文本对于列出说明、故事文本、对话和法律免责声明也很有用。

文本控件提供字体大小、样式以及文本对齐方式等常用参数。启用 Rich Text 选项后,文本中的标记元素将视为样式信息,因此可仅让单个单词或短段使用粗体或不同颜色,等等

图像(Image)

图像组件向用户显示非交互式图像。此图像可用于装饰或图标之类的用途,还可以从脚本更改图像以便反映其他控件的更改。该控件类似于原始图像 (Raw Image) 控件,但为动画化图像和准确填充控件矩形提供了更多选项。

但是,图像控件要求其纹理为精灵,而原始图像可以接受任何纹理。

图像控件

属性功能
Source Image表示要显示的图像的纹理(必须作为精灵导入)。
Color要应用于图像的颜色。
Material用于渲染图像的材质
Raycast Target如果希望 Unity 将图像视为射线投射的目标,请启用 Raycast Target
Preserve Aspect确保图像保持其现有尺寸。
Set Native Size将图像框的尺寸设置为纹理的原始像素大小。

必须将要显示的图像作为精灵导入才能用于图像控件

原始图像(Raw Image)

原始图像组件向用户显示非交互式图像。此图像可用于装饰或图标之类的用途,还可以从脚本更改图像以便反映其他控件的更改。

原始图像控件

属性功能
Texture表示要显示的图像的纹理。
Color要应用于图像的颜色。
Material用于渲染图像的材质
Raycast Target如果希望 Unity 将图像视为射线投射的目标,请启用 Raycast Target
UV Rectangle图像在控件矩形内的偏移和大小,以标准化坐标(范围 0.0 到 1.0)表示。图像边缘将进行拉伸来填充 UV 矩形周围的空间。

由于原始图像不需要精灵纹理,因此可以使用这种图像来显示 Unity 播放器可用的任何纹理。例如,可使用 WWW 类显示从 URL 下载的图像,或显示来自游戏对象的纹理。

UV Rectangle 属性允许显示较大图像的一小部分。XY 坐标指定图像的哪个部分与控件的左下角对齐。例如,X 坐标为 0.25 将会截断图像的最左边四分之一。WH(即宽度和高度)属性指示了要进行缩放来适应控件矩形的图像部分的宽度和高度。例如,宽度和高度为 0.5 将会将图像区域放大四分之一来适应控件矩形。通过更改这些属性,即可根据需要缩放图像(另请参阅滚动条 (Scrollbar) 控件)

遮罩(Mask)

遮罩组件不是可见的 UI 控件,遮罩用于显示大型图像的一小部分

属性:功能:
Show Graphic是否应在子对象上使用 Alpha 绘制遮罩(父)对象的图形?

遮罩的常见用法是使用面板 (Panel) 对象(菜单:GameObject > Create UI > Panel)作为“框架”显示大型图像的一小部分。为实现此目的,可先将图像设置为面板对象的子项。应调整图像的位置,使应该可见的区域直接位于面板区域的后面。

面板区域以红色显示,子项图像位于后面

然后,将一个遮罩组件添加到面板。面板外面的子图像区域将变得不可见,因为这些区域被面板的形状所掩盖。

掩盖的区域显得暗淡,但实际是不可见的

如果图像随后移动,则只有面板暴露的部分可见。可通过滚动条来控制移动,从而创建可滚动的地图查看器之类的效果。

应使用 GPU 的模板缓冲区来实现遮罩。

第一个遮罩元素将 1 写入模板缓冲区。 遮罩下面的所有元素在渲染时进行检查,仅渲染到模板缓冲区中有 1 的区域。 *嵌套的遮罩会将增量位掩码写入缓冲区,这意味着可渲染的子项需要具有要渲染的逻辑和模板值。

RectMask2D

RectMask2D 是一个类似于遮罩 (Mask) 控件的遮罩控件。遮罩将子元素限制为父元素的矩形。与标准的遮罩控件不同,这种控件有一些限制,但也有许多性能优势。

RectMask2D 的一个常见用途是显示较大区域的小部分。使用 RectMask2D 可框定此区域。

RectMask2D 控件的局限性包括:

  • 仅在 2D 空间中有效
  • 不能正确掩盖不共面的元素

RectMask2D 的优势包括:

  • 不使用模板缓冲区
  • 无需额外的绘制调用
  • 无需更改材质
  • 高速性能

UI 效果组件 - 阴影

阴影组件为图形组件(如文本或图像)添加简单的轮廓效果。必须与图形组件位于同一游戏对象上。

无效果的文本。 有阴影效果的文本。

属性

属性功能
Effect Color阴影的颜色。
Effect Distance阴影的偏移(表示为矢量)。
Use Graphic Alpha将图形颜色叠加到效果颜色上。

UI 效果组件 - 轮廓

轮廓组件为图形组件(如文本或图像)添加简单的轮廓效果。必须与图形组件位于同一游戏对象上。

无效果的文本。 有轮廓效果的文本。

属性

属性功能
Effect Color轮廓的颜色。
Effect Distance轮廓效果在水平和垂直方向的距离。
Use Graphic Alpha将图形颜色叠加到效果颜色上。

交互组件

所有交互组件共享的内置功能

可选类是所有交互组件的基类,可处理共同的项。

属性:功能:
Interactable此属性确定该组件是否接受输入。此属性设置为 false 时,交互被禁用,过渡状态也将设置为禁用状态。
Transition在可选组件中,有几个过渡选项,具体取决于可选组件的当前状态。不同的状态包括:正常、突出显示、按下和禁用。
Navigation还有许多导航选项可用于控制如何实现控件的键盘导航。

按钮(Button)

按钮组件可响应用户的点击并用于启动或确认操作。熟悉的示例包括 Web 表单上使用的 SubmitCancel 按钮。

按钮。

属性

属性功能
Interactable如果想要此按钮接受输入,请启用 Interactable。请参阅关于 Interactable 的 API 文档以了解更多详细信息。
Transition确定控件以何种方式对用户操作进行可视化响应的属性。请参阅过渡选项
Navigation确定控件顺序的属性。请参阅导航选项

事件

属性功能
On Click用户单击按钮再松开时 Unity 调用的 UnityEvent

按钮用于在用户单击再松开时启动某项操作。如果在松开单击之前将鼠标移开按钮控件,则不会执行操作。

按钮有一个名为 On Click 的事件,当用户完成单击时会响应。典型用例包括:

  • 确认某项决定(例如,开始游戏或保存游戏)
  • 移动到 GUI 中的子菜单
  • 取消正在进行的操作(例如,下载新场景)

开关(Toggle)

开关组件是让用户打开或关闭某个选项的复选框。

开关。

属性

属性功能
Interactable此组件是否接受输入?请参阅 Interactable
Transition确定控件以何种方式对用户操作进行可视化响应的属性。请参阅过渡选项
Navigation确定控件顺序的属性。请参阅导航选项
Is On开关在开始时是否为打开状态?
Toggle Transition开关在其值发生变化时以图形方式作出的反应。提供的选项为 None_(即复选标记直接出现或消失)和 Fade_(即复选标记淡入或淡出)。
Graphic用于复选标记的图像。
Group此开关所属的开关组(如果有)。

事件

属性功能
On Value Changed单击开关时调用的 UnityEvent。该事件可将当前状态作为 bool 类型动态参数发送。

开关控件可让用户打开或关闭某个选项。如果一次只能打开一组选项中的一个选项,还可以将多个开关组合到一个开关组中。

开关有一个名为 On Value Changed 的事件,当用户更改当前值时会响应。新值作为 boolean 参数传递给事件函数。开关的典型用例包括:

  • 打开或关闭选项(例如,在游戏期间播放音乐)。
  • 让用户确认他们已阅读法律免责声明。
  • 以开关组形式使用时,选择一组选项中的一个选项(例如,一周中的某一天)。

请注意,开关是为子项提供可单击区域的父项。如果开关没有子项(或者子项被禁用),则不可单击开关。

开关组(Toggle Group)

开关组不是可见的 UI 控件,而是一种修改一组开关的行为的方法。属于同一组的开关将受到约束,即一次只能打开其中一个开关:通过按下打开其中一个开关便会自动关闭其他开关。

开关组

属性:

属性功能
Allow Switch Off是否允许不打开任何开关?如果启用此设置,则按下当前打开的开关会将其关闭,因此没有任何开关处于打开状态。如果禁用此设置,则按下当前打开的开关将不改变该开关的状态。

通过将开关组对象拖动到组中每个开关的 Group 属性即可设置开关组。

当用户必须从互斥的一组选项进行选择时,便可使用开关组。常见示例包括选择玩家角色类型、速度设置(慢速、中速、快速等)、预设颜色和一周中的日期。在场景中可以同时有多个开关组对象,因此可以根据需要创建多个单独的组。

与其他 UI 元素不同,具有开关组 (Toggle Group) 组件的对象不必是画布对象的子项,但开关本身仍然是其子项。

请注意,如果在加载场景或实例化组时,开关组中的多个开关为打开状态,则开关组不会立即执行其约束。只有当新开关打开时,其他开关才会关闭。这意味着需要由您确保在开始时只打开一个开关。

滑动条(Slider)

滑动条控件允许用户通过拖动鼠标从预定范围中选择数值。请注意,类似的滚动条 (ScrollBar)控件用于滚动而不是选择数值。熟悉的示例包括游戏中的难度设置和图像编辑器中的亮度设置。

滑动条。

属性

属性功能
Interactable此组件是否接受输入?请参阅 Interactable
Transition确定控件以何种方式对用户操作进行可视化响应的属性。请参阅过渡选项
Navigation确定控件顺序的属性。请参阅导航选项
Fill Rect用于控件填充区域的图形。
Handle Rect用于控件滑动“控制柄”部分的图形
Direction拖动控制柄时滑动条值增加的方向。选项包括 Left To RightRight To LeftBottom To TopTop To Bottom
Min Value控制柄处于极下端(由 Direction 属性确定)时的滑动条值。
Max Value控制柄处于极上端(由 Direction 属性确定)时的滑动条值。
Whole Numbers是否应该将滑动条约束为整数值?
Value滑动条的当前数值。如果在 Inspector 中设置了该值,则该值将用作初始值,但是当值变化时,运行时的值也将变化。

事件

属性功能
On Value Changed滑动条的当前值已变化时调用的 UnityEvent。该事件可将当前值作为 float 类型动态参数发送。无论是否已启用 Whole Numbers 属性,该值都将作为 float 类型传递。

滑动条的值由控制柄沿其长度的位置确定。该值从 Min Value 增加到 Max Value_,与拖动控制柄的距离成比例。默认行为是滑动条从左向右增加,但也可以使用 Direction_ 属性反转此行为。通过将 Direction 属性设置为 Bottom To TopTop To Bottom,还可以将滑动条设置为垂直增加。

滑动条有一个名为 On Value Changed 的事件,当用户拖动控制柄时会响应。滑动条的当前数值作为 float 参数传递给函数。典型用例包括:

  • 选择游戏难度、光源亮度等。
  • 设置距离、大小、时间或角度。

滚动条(Scrollbar)

滚动条控件允许用户滚动由于太大而无法完全看到的图像或其他视图。请注意,类似的滑动条 (Slider)控件用于选择数值而不是滚动。熟悉的示例包括文本编辑器侧面的垂直滚动条以及用于查看大型图像或地图某一部分的一对垂直和水平滚动条。

滚动条。

属性

属性:功能:
Interactable此组件是否接受输入?请参阅 Interactable
Transition确定控件以何种方式对用户操作进行可视化响应的属性。请参阅过渡选项
Navigation确定控件顺序的属性。请参阅导航选项
Fill Rect用于控件背景区域的图形。
Handle Rect用于控件滑动“控制柄”部分的图形
Direction拖动控制柄时滚动条值增加的方向。选项包括 Left To RightRight To LeftBottom To TopTop To Bottom
Value滚动条的初始位置值,范围为 0.0 到 1.0。
Size控制柄在滚动条内的比例大小,范围为 0.0 到 1.0。
Number Of Steps滚动条允许的不同滚动位置的数量。

事件

属性:功能:
On Value Changed滚动条的当前值发生变化时调用的 UnityEvent。该事件可将值作为 float 类型动态参数发送。

滚动条的值由控制柄沿其长度的位置确定,该值表示为两个端点之间的分数。例如,默认的从左到右滚动条的左端值为 0.0,右端值为 1.0,0.5 表示中间点。通过将 Direction 属性设置为 Top To BottomBottom To Top,可以垂直定向滚动条。

滚动条和类似的滑动条控件之间的显著区别在于,滚动条可以改变控制柄大小来表示可用的滚动距离;当视图只能在很短距离内滚动时,控制柄将填充大部分滚动条,并仅允许在任一方向轻微移动。

滚动条有一个名为 On Value Changed 的事件,当用户拖动控制柄时会响应。当前值作为 float 参数传递给事件函数。滚动条的典型用例包括:

  • 垂直滚动一段文字。
  • 水平滚动时间轴。
  • 成对使用在水平和垂直方向滚动大型图像以查看缩放的部分。控制柄的大小会发生变化来指示缩放程度,从而表明可滚动的距离。

下拉菜单(Dropdown)

下拉选单可用于让用户从选项列表中选择单个选项。

此控件会显示当前选择的选项。单击后,此控件会打开选项列表,以便选择新选项。选择新选项后,列表再次关闭,而控件将显示新选择的选项。如果用户单击控件本身或画布内的任何其他位置,列表也将关闭。

下拉选单。

已打开选项列表的下拉选单。

属性

属性:功能:
Interactable此组件是否接受输入?请参阅 Interactable
Transition确定控件以何种方式对用户操作进行可视化响应的属性。请参阅过渡选项
Navigation确定控件顺序的属性。请参阅导航选项
Template下拉列表的模板的矩形变换。请参阅以下说明。
Caption Text用于保存当前所选选项的文本的文本 (Text) 组件。(可选)
Caption Image用于保存当前所选选项的图像的图像 (Image) 组件。(可选)
Item Text用于保存列表项的文本的文本组件。(可选)
Item Image用于保存列表项的图像的图像组件。(可选)
Value当前所选选项的索引。0 代表第一个选项,1 代表第二个,依此类推。
Options可能选项的列表。可为每个选项指定一个文本字符串和一个图像。

事件

属性:功能:
On Value Changed用户单击了下拉列表中一个选项时调用的 UnityEvent

输入框(Input Field)

输入字段是一种使文本 (Text) 控件的文本可编辑的方法。与其他交互控件一样,输入字段本身不是可见的 UI 元素,必须与一个或多个可视 UI 元素组合才能显示。

空的输入字段。

在输入字段中输入的文本。

属性

属性功能
Interactable一个用于确定输入字段是否可交互的布尔值。
TransitionTransitions are used to set how the input field transitions when Normal, Highlighted, Pressed or Disabled.
NavigationProperties that determine the sequence of controls. See Navigation Options.
TextComponent对用作输入字段内容的文本元素的引用
Text起始值。开始编辑前置于字段中的初始文本。
Character Limit可在输入字段中输入的最大字符数的值。

事件

属性功能
On Value Change输入字段的文本内容发生变化时调用的 UnityEvent。该事件可将当前文本内容作为 string 类型动态参数发送。
End Edit用户完成文本内容的编辑(通过提交操作或单击某个位置以将焦点移出输入字段)时调用的 UnityEvent。该事件可将当前文本内容作为 string 类型动态参数发送。

可从菜单 (Component > UI > Input Field) 中将输入字段 (Input Field) 脚本添加到任何现有的文本控件对象。完成此操作后,还应将该对象拖动到输入字段的 Text 属性以便启用编辑。

文本控件本身的 Text 属性将随用户输入而变化,并可在编辑后从脚本中检索值。请注意,可编辑的文本控件有意不支持富文本 (Rich Text);该字段将在输入时立即应用富文本标记,但标记基本上会“消失”,并且没有后续方法可更改或删除样式。

要获取输入字段的文本,请使用 InputField 组件本身的 Text 属性,而不是使用显示文本的文本组件的 Text 属性。文本组件的 Text 属性可能会被裁剪,也可能包含隐藏密码的星号。

滚动矩形(Scroll Rect)

当占用大量空间的内容需要在小区域中显示时,可使用滚动矩形。滚动矩形提供了滚动此内容的功能。

通常情况下,滚动矩形与遮罩 (Mask) 相结合来创建滚动视图,在产生的视图中只有滚动矩形内的可滚动内容为可见状态。此外,滚动矩形还可与一个或两个可拖动以便水平或垂直滚动的滚动条 (Scrollbar) 组合使用。

滚动矩形。

属性

属性:功能:
Content这是对需要滚动的 UI 元素(例如大型图像)的矩形变换的引用。
Horizontal启用水平滚动
Vertical启用垂直滚动

事件

属性:功能:
On Value Changed滚动矩形的滚动位置发生变化时调用的 UnityEvent。该事件可将当前滚动位置作为 Vector2 类型动态参数发送。

滚动视图中的重要元素包括视口、滚动内容以及可选的一个或两个滚动条

  • 根游戏对象具有滚动矩形组件。
  • 视口具有遮罩组件。视口可以是根游戏对象,也可以是作为根的子项的单独游戏对象。如果使用自动隐藏的滚动条,则视口必须是子项。需要在滚动矩形的 Viewport 属性中引用视口矩形变换。
  • 所有滚动内容必须是作为视口子项的单个内容游戏对象的子项。需要在滚动矩形的 Content 属性中引用内容矩形变换。
  • 滚动条(如果使用)是根游戏对象的子项。请参阅滚动条页面了解有关滚动条设置的更多详细信息,并参阅下面的滚动条设置部分了解有关滚动视图的滚动条设置的信息。

参考文章