了解Unity编辑器之组件篇UI（一）

UI组件：提供了用户交互，信息展示，用户导航等功能

一、Button：用于响应用户的点击事件

1.Interactable（可交互）：该属性控制按钮是否可以与用户交互，如果禁用则按钮无法被点击。可以通过脚本动态修改该属性。

2.Transition（过渡效果）：该属性定义了按钮状态切换时的过渡效果。常见的过渡效果包括

（1）Color Tint（颜色着色）：

Target Graphic（目标图形）：该属性指定了按钮的渲染图形，通常为一个Image组件，可以设置按钮的背景图或其他显示效果。

Normal Color：按钮默认显示的颜色

Highlighted Color：鼠标覆盖时的颜色

Pressed Color：鼠标按下后的颜色

Selected Color：鼠标点击过后的颜色

Disabled Color：按钮不可交互时的颜色，即取消勾选Interactable

Color Multiplier：颜色倍数，增大数值可以突出颜色效果

Fade Duration：增大数值可以实现按钮不同状态颜色的淡入淡出，表示颜色切换的时间间隔

（2）Sprite Swap（图片替换）：所有图片都需要是精灵图（图片Texture Type属性是：Sprite（2D and UI））

Target Graphic（目标图形）：该属性指定了按钮的渲染图形，通常为一个Image组件，可以设置按钮的背景图或其他显示效果。按钮默认以该图形显示

Highlighted Sprite：鼠标覆盖时的图片

Pressed Sprite：鼠标按下后的图片

Selected Sprite：鼠标点击过后的图片

Disabled Sprite：按钮不可交互时的图片，即取消勾选Interactable

（3）Animation（动画）：需要点击Auto Generate Animation创建动画控制器Animator，然后在Animator窗口中看到Normal，Highlighted，Pressed，Selected，Disabled等动画状态，只需为不同状态制作动画即可（选中按钮按Ctrl+6可以弹出动画窗口）

Normal Color：按钮默认显示的动画

Highlighted Color：鼠标覆盖时的动画

Pressed Color：鼠标按下后的动画

Selected Color：鼠标点击过后的动画

Disabled Color：按钮不可交互时的动画，即取消勾选Interactable

3.Navigation（导航）：该属性用于定义按钮通过键盘或游戏手柄进行导航时的行为。可以设置按钮在不同方向上的导航目标，实现键盘/游戏手柄导航时的焦点转移。

4.Visualize：打开后会在Scene中显示出每个UI控件之间的焦点顺序

5.On Click（点击事件）：通过这个属性，可以将需要执行的函数或方法绑定到按钮的点击事件上。当按钮被点击时，绑定的函数将被调用。

参考

Unity技术手册之Button按钮使用实例详解_C#教程_脚本之家

 二、Image：用于显示2D图像或Sprite（显示的图片必须是精灵图）

1.Source Image（精灵）：用于指定要显示在Image上的Sprite。你可以从项目资源中选择一个Sprite，或者将Texture2D转换为Sprite并赋值给Sprite属性。

2.Color（颜色）：通过设置Color属性，你可以更改Image的颜色。这可以用于改变图像的外观，例如调整透明度、修改颜色饱和度等（设置了Material后失效）。

3.Material（材质）：这是一个可选的属性，允许你为Image指定一个自定义的材质。材质可以实现一些特殊的效果，例如添加着色器效果、变换外观等。

4.Raycast Target（射线检测目标）：通过启用Raycast Target属性，你可以控制图像是否接收鼠标或触摸射线的检测。如果禁用此属性，图像将不会成为交互的目标，鼠标或触摸事件将会穿透该图像。（对LineRenderer和摄像机射线没有）

5.RayCast Padding：为了防止射线在Image边缘附近的空白区域（透明区域）击中Image组件，而进行的一个边距设置

6.Maskable：当Maskable属性设置为true时，Image组件将被遮罩（Mask）所影响，遮罩将限制图像的显示范围，使其仅在遮罩区域内可见。这通常用于实现裁剪或遮罩效果（注：仅对使用了Mask（遮罩）组件的情况有效）

7.Image Type（类型）：用于确定如何渲染图像。常见的类型包括：Simple（简单）、Sliced（九宫格）、Tiled（平铺）、Filled（填充）等。每个类型都有不同的渲染方式和功能。（设置Source Image才会出现该属性）

（1）Simple（简单模式）

Use Sprite Mesh（使用精灵网格）：控制是否在渲染图像时使用精灵网格，精灵网格允许图像进行扭曲变形或九宫格（9-slice）缩放，以适应不同大小的区域

Preserve Aspect（保持纵横比）：用于控制图像是否保持其原始纵横比。当启用此属性时，图像将根据宽高比自动调整大小，以确保图像不会被拉伸或压缩变形

Set Native Size（设置原始尺寸）：用于将Image组件的大小设置为与其关联的图像素材的原始尺寸相匹配。点击Set Native Size按钮后，Image将自动调整大小以适应图像的实际尺寸，忽略任何布局组件或父级容器的约束

（2）Sliced（切片模式）

Pixels Per Unit Multiplier（像素密度倍数）：可以突出图像的像素密度，从而影响图像的绘制和显示效果

（3）Tiled（平铺模式）

Pixels Per Unit Multiplier：同Sliced

（4）Filled（填充模式）

Fill Method（填充方式）：可以选择不同的填充方式，例如水平、垂直、径向等。填充方式决定了图像在Image区域内的填充方式。

Fill Origin（填充起点）：用于指定填充效果的起始点，可以决定填充效果是从底部、顶部、左侧、右侧还是中心开始

Fill Amount（填充量）：控制填充的数量，填充量的范围是0到1之间

Clockwise（径向填充才有的属性）：控制径向填充的顺逆方向，勾选，以顺时针方式填充，不勾选，以逆时针方式填充

三、RawImage：直接显示原始图片的像素数据。可以将2D纹理（Texture2D）或RenderTexture显示在UI界面上。直接显示从资源导入的图片，也可以显示在运行时生成的动态纹理

注：其他属性可参考Image组件

1.Texture（纹理）：可以直接使用原始图片（png，jpg等），也可以使用在Project中右键创建的RenderTexture，并将该RenderTexture赋值给Camera的Target Texture属性，实现将Camera所观察和渲染的场景信息在RawImage上进行单独显示

2.UV Rect：用于指定图片在纹理中的位置和大小（下面是修改UV Rect参数后实现的效果）

                             

参考

Unity UGUI的RawImage（原始图片）组件的介绍及使用_AlianBlank的博客-CSDN博客

四、Text：可以在UI界面中显示静态或动态的文本内容

1.Text：用于显示的文本内容。可以直接在Inspector面板中输入文本，也可以通过脚本动态修改。

2.Character

（1）Font：用于改变文本的字体。可以选择Unity内置的字体，也可以导入自定义的字体，通过选择不同的字体，可以改变文本的样式。

（2）Font Style：用于改变文本的风格，如Bold（字体加粗），ltalic（字体倾斜），Bold And ltalic（字体加粗并且倾斜）

（3）Font Size：文本的字体大小。可以通过调整该属性来改变文本的大小。

（4）Line Spacing：增加或减小文本行之间的间距。通过调整该属性，可以改变行间距以适应不同的布局需求。

（5）Rich Text：指示是否启用富文本标记。如果勾选了该属性，可以在文本中使用富文本标记（如颜色、字体样式、链接等）来实现高级的文本渲染效果。

参考：https://blog.csdn.net/falsedewuxin/article/details/129904042?spm=1001.2014.3001.5501

3.Paragraph

（1）Alignment：文本对齐方式。可以设置文本的水平对齐（左、中、右）和垂直对齐（顶部、中间、底部）

（2）Align By Geometry：使文本在文本框内对齐方式更加精确和准确（即在数学几何的形式更加精确的对齐）

（3）Horizontal Overflow：水平溢出处理方式。可以选择适应不同的需求，如自动换行、截断等。（Wrap表示水平方向溢出后自动换行，Overflow表示水平方向直接溢出，也会显示文本）

（4）Vertical Overflow：垂直溢出处理方式。可以选择适应不同的需求，如自动换行、截断等。（Truncate表示垂直方向溢出后截断，Overflow表示垂直方向直接溢出，也会显示文本）

（5）Best Fit：指示是否启用最佳适应。如果勾选了该属性，文本内容会根据Text组件的大小自动调整字体的大小，以适应给定的容器大小。

注：其他属性可以参考Image

五、Slider：用于设置一个范围内的数值，用户可以通过拖动来调整数值。例如，制作进度条

1.其他属性可以参考Button组件
2.Fill Rect：属性定义了滑动条上当前值的填充区域。通过设置 Fill Rect 属性，你可以控制填充区域的样式、位置和大小。你可以指定一个 RectTransform 对象，它用于定义填充区域的位置和尺寸。也可以使用图片或材质来渲染填充区域，通过设置图片的拉伸方式或材质的纹理坐标来控制填充区域的样式。
3.Handle Rect：属性定义了滑块的矩形区域。滑块是用户用于拖动滑动条并改变值的可交互元素。与 Fill Rect 类似，你可以通过设置 Handle Rect 属性来指定滑块的位置和尺寸。也可以使用图片或材质来渲染滑块，通过设置图片的拉伸方式或材质的纹理坐标来控制滑块的样式

 六、Input Field组件：是一个可编辑的文本框，允许用户在游戏中输入和编辑文本

1.Interactable，Transition，Navigation属性可参考Button组件
2.Text Component：需要赋值一个对象的Text组件（这样才能编辑后面的属性）。从输入框输入的内容会出现在该Text组件的Text属性中，也会出现在Input Field组件本身的Text属性中
3.Text：这是Input Field中显示的文本内容。可以通过代码访问和修改这个属性，或者通过Inspector窗口在编辑器中设置初始文本。（在非运行状态下输入内容会提示报错，可以不用管报错的问题，运行Unity后，Input Field仍然会显示非运行状态下输入的内容，而运行状态下输入的内容也会在这里显示）
4.Character Limit：限制用户输入的字符数量。可以将其设置为一个非0正整数来限制用户输入的文本长度。（值为0表示不限字符数量）
5.Content Type：确定Input Field可以接受的文本类型。例如，可以限制它输入的内容只能为整数、小数、密码等形式，不同的类型具有不同的验证和输入规则。
（1）Standard：表示可以输入任意形式的字符
（2）Autocorrected：表示会自动帮你更正输入单词
注：将Content Type属性设置为Autocorrected时，默认情况下自动更正功能是禁用的。这是因为Unity默认情况下不支持在Autocorrected模式下进行自动更正，如果你想要在Autocorrected模式下启用自动更正功能，你需要编写自定义脚本来处理输入的文本，例如通过OnValueChanged事件来监听Input Field的文本变化，从而在事件回调中编写自己的自动更正逻辑
（3）lnteger Number：表示只能输入整数
（4）Decimal Number：表示只能输入整数和小数
（5）Alphanumeric：表示只能输入字母和数字
（6）Name：会自动将每个单词的第一个字母大写，可以输入字母和中文，但是不能输入数字和特殊字符（可以在通过Backspace和Delete建删除大写字母后，在非单词首字母的位置继续输入可以规避大写规则）
（7）Email Address：可以输入数字，字母和特殊字符，不能输入中文
（8）Password：可以输入数字，字母，中文和特殊字符，不过所有输入的内容都以 * 号显示
（9）Pin：只能输入数字，而且都是以 * 号显示
（10）Custom：可以自定义输入规则。它会多提供Input Type（输入类型），Keyboard Type（指定输入内容时移动设备上弹出的虚拟键盘类型），Character Validation（字符验证）三种属性实现你想要定义的输入规则
（10-2）Keyboard Type
    Default：默认键盘，适用于一般的文本输入。
    ASCII Capable：仅接受ASCII字符的键盘，不包括特殊字符和符号。
    Numbers and Punctuation：包括数字和标点符号的键盘。
    URL：适用于在输入URL时，包括.com等常用网址后缀的键盘。
    Number Pad：数字键盘，仅包含数字和基本的算术符号。
    Phone Pad：电话键盘，包含数字键和电话相关的符号。
    Name Phone Pad：适用于输入姓名和电话号码的键盘，包含字母和数字键。
    Email Address：适用于输入电子邮件地址的键盘。
6.Line Type：确定文本的排列方式。可以选择单行（Single Line）或多行（Multi Line）。当需要输入框偏大，而字体偏小时可以采用多行来显示输入的内容
7.Placeholder：在Input Field没有获得焦点并且没有输入内容时显示的占位符文本或图片。（可以赋值一个对象的Image组件或Text）
8.Caret Blink Rate：设置光标闪烁的速率
9.Caret Width：设置光标的宽度。
10.Custom Caret Color：勾选之后，可以自定义光标的颜色
11.Selection Color：文本被选中时的底部高亮颜色。
12.Hide Mobile Input：适用于移动设备的属性。设置为true时，在移动设备上点击Input Field时，不会自动弹出虚拟键盘。
13.Read Only：这个属性用来指定输入框是否为只读状态。如果设置为true，用户将无法在该输入框中编辑文本。
14.Should Active On Select：当用户选中（聚焦）输入框时，这个属性指定输入框是否自动变为激活状态。设置为true时，当用户点击输入框时，输入框会自动获得焦点并准备接收文本输入。设置为false时，用户需要额外的动作（例如点击一个按钮）来将输入框置为激活状态
15.OnValueChange（string）：这是一个Unity事件，在输入框的文本内容发生改变时触发。可以通过Inspector窗口进行设置，或者在代码中订阅监听该事件，以便在文本改变时执行自定义逻辑。事件回调函数的参数是输入框的新文本
16.OnEndEdit（string）：这也是一个Unity事件，在用户结束编辑并提交文本后触发。它可以用来处理用户完成输入后的操作，比如按下回车键或切换焦点。与OnValueChange类似，可以通过Inspector窗口或代码进行设置，并编写回调函数来处理输入结束事件。事件回调函数的参数是输入框的最终文本

 七、Toggle组件：用于创建一个可以切换开关状态的控件，通常用于表示开关选项、勾选框等

1.Interactable，Transition，Navigation属性可参考Button组件
2.Is On（勾选状态）：表示显示或隐藏下方Graphic属性中指定的图片组件（Image或RawImage）
3.Toggle Transition（过渡效果）：有两个值None和Fade，表示显示和隐藏Graphic属性中指定图片组件（Image或RawImage）的过程中是否有渐变效果
4.Graphic（图像组件）：一个 Image 或 RawImage 组件，用于显示 Toggle被勾选后出现的 图片。可以通过拖拽选择或在代码中动态设置。
5.Group：需要赋值一个Toggle Group组件，允许将多个 Toggle 放置在同一个组内，以实现互斥的勾选效果，即同一时间只能选择一个 Toggle。也能实现多选或都不选的效果，关键看Toggle Group的属性设置
6.On Value Changed（勾选状态变化事件）：一个 UnityEvent，可以添加回调方法，在 Toggle 的勾选状态发生变化时触发。可以通过脚本控制 Toggle 的行为。
参考
https://juejin.cn/post/7149164569221398536

 八、Toggle Group组件：用于控制多个 Toggle 的单选效果，多选效果，都不选的效果

1.Allow Switch Off：不勾选，实现多个Toggle的单选效果；勾选，实现多选效果或都不选的效果

 九、Mask组件：用于限制子对象的可见区域。可以在 UI 中创建裁剪区域，只保留裁剪区域内的内容可见，而裁剪区域外的内容则被遮蔽。常见的应用场景包括创建圆形头像、边框或其他不规则形状的 UI 元素（使用形式：给一个Image对象加上Mask组件，给这个Image对象添加一个Image子对象）

1.Show Mask Graphic：是否显示遮罩的图形。当该属性勾选时，遮罩的形状将以图形的形式显示出来，方便在编辑模式下调试和可视化。
参考
https://blog.csdn.net/alianhome/article/details/131642327

 十、Scroll Rect组件：用于实现可滚动的 UI 布局的组件。 可以在有限的区域内显示大量内容，并且可以通过滚动条来查看不可见的部分。

1.Content：设置 Scroll Rect 中的可滚动或拖动的内容，通常是一个包含 UI 对象或组件的面板元素，例如Image，Text。
2.Horizontal：设置是否允许水平拖动。这里是控制Content属性中的对象能否被左右拖动，不是控制水平滚动条是否能滚动
3.Vertical：设置是否允许垂直拖动。控制Content属性中的对象能否被上下拖动，不是控制垂直滚动条是否能滚动，
4.Movement Type（移动类型）：设置对Content属性中对象在Horizontal和Vertical上的拖动类型。
（1）Unrestricted（不受限制）：可以自由拖动，没有边界限制。
（2）Elastic（弹性）：拖动超过边界后会产生弹性效果。
    Elasticity（弹性）：调整 Elasticity 的值，可以使滚动到边界时出现“拉伸弹回”        效果，让内容超出边界一段距离后会自动弹回。值越大弹回的速度越慢。
（3）Clamped（受限）：拖动将受到边界的限制，内容不会超出边界。
5.Inertia（惯性）：启用后，滚动会具有惯性效果，就像对内容施加了一定的力量，滚动会自动减速到停止。
6.Deceleration Rate：控制惯性滚动的减速率
7.Scroll Sensitivity（滚动灵敏度）：控制滚动的灵敏度。较大的值表示滚动速度更快，较小的值表示滚动速度更慢。（效果不大）
8.Viewport：用于定义 Scroll Rect 可见内容的矩形区域，是用于显示和裁剪 Scroll Rect 内容的。通常是一个包含Image组件和Mask组件的对象
9.Horizontal Scrollbar（水平滚动条）：需要设置一个Scrollbar组件。如果启用，Unity将自动为Scroll Rect组件创建一个水平滚动条，并将其显示在Scroll Rect的右侧或下方（取决于滚动方向）
（1）Visibility（可见性）：该属性确定水平滚动条何时可见。它有三个选项：
    Permanent（永久）：水平滚动条始终可见。
    Auto Hide（自动隐藏）：水平滚动条在内容不超过Scroll Rect的尺寸（Viewport    ）时隐藏。
    Auto Hide And Expand Viewport（自动隐藏并扩展视口）：水平滚动条在内容超        出Scroll Rect的尺寸时显示，并自动调整视口的宽度以适应内容。
（2）Spacing（间距）：该属性确定水平滚动条与Scroll Rect（Viewport）之间的间距。可以使用正数或负数来调整间距的大小。正数将增加间距，负数将减小间距
10.Vertical Scrollbar（垂直滚动条）：设置一个Scrollbar组件作为垂直滚动条
（1）Visibility：同上
（2）Spacing：同上
11.OnValueChanged（Vector2）：是一个事件，它在滚动视图的值发生变化时触发。具体来说，当Scroll Rect组件的内容（Viewport）在水平或垂直方向上滚动时，该事件将被调用
参考
https://blog.csdn.net/alianhome/article/details/131637403

 十一、ScrollBar组件：它通常与Scroll Rect组件一起使用，用于控制滚动视图的滚动位置。

1.Interactable，Transition，Navigation属性可参考Button组件
2.Handle Rect（滑块矩形）：该属性确定滚动条的滑块矩形，即滑块形状。可以指定一个RectTransform组件来作为滑块的矩形区域，用于用户拖动滑块来改变滚动条的值。滑块矩形的位置和大小决定了滑块在滚动条上的显示方式。
3.Direction（方向）：该属性确定滚动条的方向。可以选择垂直（Vertical）或水平（Horizontal）。
4.Value（值）：该属性确定滚动条的当前值。它表示滑块的位置相对于滚动条起始点的偏移量。0表示滑块在滚动条的最左端或顶部（最右端端或底部），1表示滑块在滚动条的最右端或底部（最左端或顶部）。这取决与Direction属性的设置
5.Size（尺寸）：该属性确定滚动条的滑块大小。它表示滑块在整个滚动条长度中的比例。例如，0.5表示滑块的长度是滚动条长度的一半。
6.Number Of Steps（步数）：该属性确定滚动条滑块滑动的步数。当设置了步数时，滚动条的值将被离散化为一系列固定的步长值。例如，如果设置了步数为5，滚动条的值（Value）将只能在0、0.25、0.5、0.75和1这几个值之间进行选择。这对于需要精确控制滚动位置的场景非常有用
7.OnValueChanged（Single）：是一个事件，当滚动条的值（Value）发生变化时触发。你可以添加一个响应函数来处理值变化事件。这个事件的参数是一个单精度浮点数，表示滚动条的当前值（Value）。

十二、Dropdown组件：制作下拉菜单

 1.Interactable，Transition，Navigation属性可参考Button组件
2.Template：需要Rect Transform组件，表示下拉列表的模板区域
3.Caption Text：需要Text组件，设置当前所选选项的文本
4.Caption Image（标题图像）：该属性确定下拉菜单主按钮的图像显示。你可以将一个Image组件指定为标题图像，用于自定义下拉菜单的按钮外观。通过该属性，你可以为下拉菜单按钮添加背景图、图标、箭头等自定义图像（试了但是没用）
5.Item Text（选项文本）：该属性是一个Text组件，用于显示下拉菜单中每个选项的文本。可以使用该属性定制选项的文本样式
6.Item Image（选项图像）：该属性是一个Image组件，用于显示下拉菜单中每个选项的图像。你可以将一个Sprite或Texture赋值给该属性，用于为选项添加图像（试了但是没用）
7.Value：该属性确定了当前选中项的索引。索引从0开始，表示第一个选项，依此类推。你可以使用脚本获取或设置该属性，以便动态控制下拉菜单的选中项
8.Alpha Fade Speed（透明度淡入淡出速度）：该属性确定下拉菜单的透明度在淡入和淡出时的速度。你可以通过调整该属性的值来控制下拉菜单的渐变效果速度
9.Options（选项）：该属性是一个字符串列表，用于定义下拉菜单中的选项。可以在Unity编辑器中添加选项，或通过脚本动态添加选项
10.OnValueChange（Int32）：是一个事件，在下拉菜单的选中项发生变化时触发。你可以添加一个以整数为参数的响应函数来处理值变化事件。参数将为选中选项的索引，你可以根据需要编写自定义的逻辑来响应值的变化
Dropdown - TextMeshPro组件：Dropdown组件是使用Unity的UGUI进行渲染的，而Dropdown - TextMeshPro则使用TextMeshPro进行文本渲染。Dropdown - TextMeshPro组件适用于需要更高级文本渲染功能的场景，如富文本、超链接、自动换行等。

十三、Effects：对其他UI组件进行一些修饰
    1.Outline组件：用于在对象的边缘绘制轮廓线，以突出显示对象

（1）Effect Color：设置轮廓线的颜色
（2）Effect Distance：设置左右和上下轮廓线的粗细
（3）Use Graphic Alpha：是否将UI元素的透明度与轮廓线的透明度相关联，即设置UI元素的不透明度为0时，轮廓线的不透明度也会进行相应的变化

2.Position As UV1组件：用于解决UV重叠问题而提供的一个辅助组件。该组件的目的是使用对象的世界坐标来生成UV坐标，并将其存储在UV1通道中，以便在材质中使用。它没有可调整的属性，只需将其添加到对象的渲染器组件中即可。

3.Shadow组件：用于在2D或UI元素上添加阴影效果。它可以添加在Canvas中的任何图形元素上。

（1）Effect Color：设置阴影的颜色
（2）Effect Distance：确定阴影的偏移量，设置阴影的位置
（3）Use Graphic Alpha：是否将UI元素的透明度与阴影的透明度相关联，即设置UI元素的不透明度为0时，阴影的不透明度也会进行相应的变化 

十四、Rect Mask 2D组件：Rect Mask 2D和Mask组件是Unity中用于限制UI元素可见性的两个不同的组件。Rect Mask 2D组件仅支持矩形形状的遮罩。而Mask组件可以用各种形状的遮罩限制UI元素的显示。

1.Padding：可以控制UI元素在可见区域内的显示
2.Softness：用于控制遮罩边缘的柔化程度。它允许在遮罩的边缘创建一种平滑过渡效果，以使遮罩形状不那么生硬

十五、Selectable组件：用于UI元素的交互和选中状态管理的组件。Selectable组件和Button组件是Unity中用于UI元素交互的两个不同的组件。（属性参考Button）

（1）Selectable组件提供了基本的交互控制，而Button组件是Selectable的子类，专注于创建可点击的按钮，并提供了额外的按钮交互功能和事件支持。
（2）Selectable组件可以用于创建各种类型的交互式UI元素，如复选框、滑块和文本输入框等文章来源地址https://www.toymoban.com/news/detail-603783.html

到了这里，关于了解Unity编辑器之组件篇UI（一）的文章就介绍完了。如果您还想了解更多内容，请在右上角搜索TOY模板网以前的文章或继续浏览下面的相关文章，希望大家以后多多支持TOY模板网！