UI系统基础使用
IdeaXR中，UI系统的基类是UI组件（Control）节点，这个节点定义了UI相关节点的锚点、大小、位置等基本的属性和方法，所有用户界面节点都从UI组件继承，因此UI组件中属性、方法和信号是所有用户界面节点通用的。
如何调整UI布局
基础概念
画布
在IdeaXR中创建或选择任意一个2D节点，编辑器会自动进入一个用于编辑2D场景的画布，如下图所示。
- 画布中主要的功能如下：
① 工具栏：可以对控件、画布、动画等进行设置，可以悬停到工具栏按钮上查看对应的功能
② 当前缩放比：表示当前画布的缩放比例，点击左右的按钮可以进行缩放，点击数字可以重置缩放比为100%
③ 窗口矩形：表示项目运行时使用的窗口大小，默认为1080*680，这个值可以在项目设置->显示->窗口->大小中修改
控件矩形
每个UI控件都以一个矩形进行位移、旋转和缩放的变换，这个矩形被称作控件矩形。选中一个控件后，控件矩形会显示在画布中，可用于移动、调整大小和旋转UI元素，如下图所示。
画布中的矩形包含了以下内容：
① 缩放锚点：矩形上有八个缩放锚点，拖拽这些点可以调整控件大小
② 中心点：控件的旋转和缩放都是基于中心的位置进行的，默认位于左上角，可以在属性栏中调整
③ 锚点：用于决定相对与父结点的位置和大小，详情见锚点
在属性栏中可以看到控件矩形的各种属性，常用属性如下图所示，可以通过这些属性精确调整控件矩形的大小、位置、旋转度数等：
锚点
在UI中，当窗口大小（分辨率）发生变化时，界面通常需要重新布局。IdeaXR的UI系统使用锚点来实现布局的自动调整。
锚点决定了当一个控件的父节点发生缩放时，自身如何进行缩放和位移。每个控件都有四个锚点，形成一个锚点矩形。可以直接在画布上拖拽改变不同锚点的位置，也可以通过属性栏调整：
通过属性栏调整锚点时，控件矩形大小也会改变。
锚点的默认值都为0，全部位于父节点的左上角，这表示无论控件的父节点如何变化，该控件都保持大小不变，并始终。有关锚点的更多布局方式，请见下文中的预设布局。
一般使用预设布局或在画布中手动调整锚点即可满足大部分场景的需求，如果想手动进行锚点布局，请参考以下有关锚点工作原理的描述：
UI控件的四个锚点按比例固定在父节点的控件矩形中，窗口矩形可以看作根节点的父节点。位于父节点的最左/上方时比例为0，最右/下方时比例为1。控件矩形的四个顶点会和锚点矩形的顶点一一对应，锚点矩形顶点位置变化时，控件矩形的顶点也会按比例变化，这样就实现了通过锚点控制控件矩形相对于其父节点的变化。
边距
边距表示控件矩形的四个顶点相对于锚点矩形四个顶点的距离，一般用于结合锚点的位置，快速调整控件相对于其父节点的边距。
边距值会在控件矩形发生变化时自动改变，在移动锚点或调整边距后控件矩形大小小于最小尺寸时无法更新为正确的值。
以下步骤实现了将一个纹理图居中，并使上、下、左、右距离父节点各50像素的距离的效果：
- 将纹理图的布局调整为“整个矩形”
- 将四个边距的值分别调整为50，50，-50，-50
画布布局工具
编辑模式
在画布中有四种编辑模式，分别为锚点模式、移动模式、旋转模式和缩放模式，可以通过工具栏进行切换，或者使用快捷键Q、W、E、S快速切换，画布默认使用锚点模式。
锚点仅在锚点模式下可见，如果无法看到锚点，尝试将布局模式切换为锚点模式
预设布局
预设布局提供了几种常用的布局方式。选中一个UI控件后，画布工具栏右侧会出现一个布局按钮和锚点跟随按钮，点击布局按钮，可以快速设置控件及其锚点的位置，或者选择“仅锚点”，单独设置控件锚点的位置。
几种布局的作用如下：
角落/居中：父节点大小改变时，控件大小不变，位置根据锚点改变
全幅：父节点的长或宽改变时，控件的大小和位置根据锚点改变
整个矩形：将控件填充到整个父节点，并随父节点一同缩放和移动
保持长宽比：将锚点调整到控件矩形的顶点上，并启用锚点跟随
锚点跟随
默认情况下，调整控件矩形不会影响锚点矩形，如果需要锚点矩形随控件矩形一起变化，需要选中锚点跟随按钮，或者将布局模式改为“保持长宽比”。
容器
除了通过画布调整UI控件的布局外，IdeaXR中还有专门用于调整布局的容器节点，容器工具可以对子节点进行自动布局，详情见布局容器
如何定义交互事件
使用信号制作交互
信号提供了常用场景下控件行为的监听接口，是最常用的为UI控件添加交互的方式。
每种UI控件都提供了各自常用的事件的信号，通过信号可以方便地完成交互事件的制作。
示例：
以按钮为例，以下步骤通过信号实现了按下按钮输出一行消息的交互：
新建一个2D场景，为根节点创建一个可视化脚本
选中场景中自带的按钮控件，选择”节点“ -> ”pressed()“信号，连接到根节点的可视化脚本中
从脚本左侧拖入一个”输出字符串“节点，将内容修改为”按钮按下“，连接到刚刚新建的方法
运行场景后每次点击按钮，输出栏都会打印一个”按钮按下“
调用方法制作交互
UI控件类中有各种属性和方法，可以通过在脚本中调用方法实现 交互。
对于一些UI控件，需要在脚本中调用控件特定的方法才能实现控件的功能。
示例：
以弹窗为例，弹窗控件默认为隐藏状态，必须调用弹窗的popup()方法，步骤如下：
新建一个2D场景，为根节点创建一个可视化脚本
新建一个”提示对话框“节点，调整大小为300*200，将文本设为”信息提示“
从节点树中将提示对话框节点拖入可视化脚本中
Ctrl+鼠标左键拖动节点上的蓝色原点，在方法列表中选择”Popup Centered(Vector 2)“方法
从脚本左侧拖入一个”初始化“节点，并连接到刚创建的popup方法节点上
运行场景，窗口中间会自动弹出一个面板
UI控件的各种方法可以查阅常用UI元素。
鼠标交互
UI控件可以接收鼠标进入、离开、点击等事件。
IdeaXR封装了常用的鼠标交互，例如：鼠标点击按钮后按钮按下、鼠标指针进入文本编辑框后光标样式改变。
自定义鼠标事件的处理需要在脚本中实现。实现方法可以参考应用教程中的鼠标拖动UI元素案例。
键盘交互
UI控件可以接收键盘输入，前提是控件处于聚焦状态。
和鼠标交互一样，IdeaXR封装了常用的键盘交互，例如：点击一个文本编辑框，输入文字后文本框中显示文字、按下回车时会触发当前聚焦的按钮的点击事件。
自定义键盘按键事件的接收和响应需要在脚本中实现。实现方法可以参考应用教程中的背包系统的实现案例。
如何自定义主题样式
样式属性
属性栏 -> UI组件下包含了各种控件的常用样式属性，包括字体大小、背景贴图等。可以通过直接修改这些属性快速调整样式。以按钮控件为例，样式属性如下图所示：
调节
属性栏 -> 画布 -> 可见性下的”调节“可以快速调整控件的颜色，并影响所有子节点的颜色。下方的“自我颜色调节”可以只改变自身颜色。通过这两种调节得到的颜色都会和控件本身的颜色相叠加。
主题
主题（Theme）可以对控件样式的更多细节进行调整。主题是一种资源类型，可以复用到任何UI控件上。对于复杂的UI系统而言，直接创建一个全局的主题对整体进行定义更易于操作。
可以在属性 -> UI组件 -> 主题中可以为UI控件新建或加载一个主题。主题创建后，会在左下角出现一个预览界面，如下图所示。预览界面中包含所有带有样式的UI组件，修改对应控件的主题后可以在这一界面预览对应的效果。
点击预览界面右上角的”编辑主题“，选择”添加类项目"，可以为主题添加对应类的样式属性，可以为一个主题添加多个类项目，将主题添加到UI控件上时，该控件及其所有子节点都会检索主题中是否添加了自己的类项目，如果有，则会将样式修改应用到自身。
材质
可以为UI控件创建材质来调整控件的纹理。有以下两种材质可以被创建：画布项材质（CanvasItemMaterial）和着色器材质（ShaderMaterial）。
画布项材质主要用于修改纹理混合和照明相关的属性，在UI中不常用。
着色器材质可以为UI控件实现更高级的视觉效果，例如阴影、渐变、模糊等，需要了解着色器（shader）的相关知识，详情见着色器