调整布局与设计
在为你的空间（Space）设计用户界面（UI）时，你可以将UI元素放入画布（canvas）中，并通过自定义属性进行设计和调整。
设置画布
通过设置画布的宽度和高度来确定其尺寸。你还可以将画布设置为可穿透，这样手指触摸或鼠标点击会穿过画布的空白区域。
调整UI元素
你可以通过自定义属性来调整UI元素。
通用属性
所有UI元素都具有一些通用属性：
| 属性 | 说明 |
|---|---|
| 对齐（Align） | UI元素的对齐方式。可快速将元素左对齐、水平居中、右对齐、顶部对齐、垂直居中和底部对齐。 |
| 位置（Position） | X 轴和 Y 轴的值决定UI元素在屏幕上的位置。 |
| 尺寸（Size） | 指定UI元素的宽度和高度。 |
| 旋转（Rotation） | 指定UI元素的旋转角度。 |
| 可见（Visible） | 决定UI元素是否可见。 |
| 锚点（Pivot） | 变换的锚点，取值范围为 0 到 1。例如 X=0.5，Y=0.5 表示中心点。点击方框内的点可快速设置常用锚点，如中心、左下角、右下角。设置锚点后，UI 元素的原点会变为锚点位置。默认每个UI元素的 (0,0) 在左上角。 |
| 约束（Constraint） | 若未选择上下（Top and bottom）或左右（Left and right），约束定义UI元素锚点与画布约束点的距离，并应用于锚点与屏幕对应点之间的距离。若选择了上下或左右，约束定义元素 盒子顶点与约束点的距离，并应用于顶点与屏幕对应点之间的距离。 |
按钮（Button）
| 属性 | 说明 | |
|---|---|---|
| 按钮文本（Button text） | 可设置按钮上显示的文本，并设置字体大小、颜色和透明度。 | |
| 内容（Content） | 文本内容 | |
| 字体大小（Font size） | 文本字体大小 | |
| 字体颜色（Font color） | 文本颜色及透明度 | |
| 点击效果（Click effect） | 点击按钮时显示的效果 | |
| 按钮图片（Button image） | 按钮填充的图片 |
图片（Image）
| 属性 | 说明 |
|---|---|
| 图片（Image） | 图片文件名 |
| 翻转（Flip） | 图片翻转方式，可选择左右或上下翻转。 |
文本（Text）
| 属性 | 说明 |
|---|---|
| 内容（Content） | 要显示的文本内容 |
| 富文本（Rich text） | 是否显示为富文本 |
| 字体大小（Font size） | 文本字体大小 |
| 对齐（Align） | 文本对齐方式 |
| 字体颜色（Font color） | 文本颜色 |
形状（Shapes）
形状组件（Shapes）提供基础图形，包括矩形、椭圆、三角形和星形。
| 属性 | 说明 |
|---|---|
| 填充（Fill） | 填充颜色及透明度 |
文本输入（Text input）
| 属性 | 说明 |
|---|---|
| 字体大小（Font size） | 文本字体大小 |
| 字体颜色（Font color） | 文本颜色 |
| 类型（Type） | 输入类型，可选数字、字母或两者皆可。 |
| 提示（Hint） | 给玩家的提示信息 |
列表（List）
| 属性 | 说明 |
|---|---|
| 布局（Layout） | 列表布局方式。选择单行（Single row）为横向，选择单列（Single column）为纵向。 |
| 行数（Row） | 行数 |
| 列数（Column） | 列数 |
| 行间距（Row gap） | 相邻行之间的距离 |
| 列间距（Column gap） | 相邻列之间的距离 |
| 画布（Canvas） | 列表填充的画布 |
滑块（Slider）
| 属性 | 说明 |
|---|---|
| 默认值（Default） | 默认值 |
| 最小值（Min） | 最小值 |
| 最大值（Max） | 最大值 |
进度条（Progress bar）
| 属性 | 说明 |
|---|---|
| 默认值（Default） | 默认进度 |
加载器（Loader）
| 属性 | 说明 |
|---|---|
| 画布（Canvas） | 加载器可在其他画布上显示UI元素。你可以在Play模式下通过脚本更换所选画布。 |
