# 控件和控件属性

# 控件简介

  • 画布:画布是一个完整的界面,画布下可以挂除了画布以外的子控件。一个界面工程文件中可以有多个画布。新建的界面工程文件会自带一个名字为main的画布。例如下图,这些都是画布。

image-20220420175415323

  • 面板:面板本身并没有可视元素,把归属一个模块的控件挂在一个面板下,能够让界面结构更加清晰,调整起来也更加方便。

  • 图片:图片控件用于显示图片。图片会在不变形的情况下尽量撑满控件的尺寸。

  • 按钮:按钮是重要的交互控件。可设置按钮上的文本、文本颜色、文本字号、文本偏移。按钮的贴图分为普通、按下、悬浮三种情况。“普通”即为正常状态下的贴图,“按下”为按钮被按下时的贴图,“悬浮”为在PC中,鼠标移动到按钮上时的按钮贴图。设置贴图的方式:在资源管理窗口中,左键按住贴图拖动到贴图框中,待鼠标变为带“+”号的样式时,松开鼠标,即可完成贴图设置。

    image-20220420175657985

  • 文本:文本控件用于显示文本,可设置字号和颜色。

  • 滚动列表:滚动的内容可在属性面板的变量区的“滚动内容”配置项中选择。“滚动内容”的下拉列表中,会出现你的自定义控件可供选择。下图中,mailUI是界面文件名称,buttonMail、panelMailBody、gridMailList等是自定义控件名称。如果你想了解更多,可以查看自定义控件。如果你想深入了解“滚动内容”的原理,可以查看万用控件,当然我们建议您按顺序查看文档。

    image-20220420210028579

    并不是所有控件都能够作为滚动列表的内容,目前仅限于面板、按钮、网格三种类型可作为滚动列表的内容。如果想在滚动面板里显示文本控件,可将文本控件放在面板下,然后将面板作为滚动列表内容。不过并不支持将滚动列表挂在面板下,再将面板作为另外一个滚动列表的内容。

  • 网格:网格用于需要规律排布的界面,如背包界面。其中内容的配置方式类似滚动列表中的内容。网格规模用于配置网格的行列数。网格会自动将内容均匀的显示在各个格子内。

    image-20220420220758742

    需要注意的是,我的世界游戏引擎中,对网格的尺寸和内容的尺寸有一定要求,否则显示会不符合预期。具体的要求为:

    • 内容的尺寸为固定像素时:
      • 网格的宽度应大于等于内容的宽度乘以列数,小于内容的宽度乘以(列数+1);
      • 网格的高度应大于等于内容的高度乘以行数;
    • 内容的尺寸为百分比时:
      • 内容的宽度乘以列数需小于等于100%,内容的宽度乘以(列数+1)需大于100%;
      • 内容的高度乘以行数需大于等于100%。

    集合名在代码中绑定UI控件时会用到,具体可参考UI说明文档

  • 轮盘:轮盘主要用于内容列表中进行选择的场景,比如选择某个表情展示或者抽奖等。在编辑器中创建轮盘控件后,需要填好想设定的切片数量、内直径、外直径系数,然后通过生成模板按钮,生成出对应预览的模板控件样式。 轮盘的本质是引用自定义控件,其中的内容配置主要通过选择各索引对应的控件,这里选择的控件其实就是引用的自定义控件的各个子控件(生成了模板后,开发者可以自行在对应引用的自定义控件中修改样式和属性等)。另外,轮盘也可以通过content变量来切换引用的自定义控件。更多内容可参考UI说明文档

    selection-gif

    selection-inspector

# 控件属性的结构/分组

这里主要介绍控件的属性在编辑器里的分组。

由于控件的属性较多,并且可以自己增加减少,我们将控件的属性进行了默认分组。

以文本(Label)为例:

image-20220420215715454

可以看到总共有4个分组,分别为

  • 通用:所有控件都有的属性
  • 文本:文本控件特有的属性,如果是其他控件,可能也会有自己特有的属性。
  • 变量区:作为变量使用的属性,详见变量引用和万用控件
  • 变量默认值:指已为某个属性分配了变量名,但是该属性/变量没有被引用,详见变量引用和万用控件

我们以另一个控件滚动列表(Scroll View)为例:

image-20220420220430655

可以看到还有一个不常用变量区,这个分组与变量区的含义是一样的,区别在于这个分组里的属性很少被用到,所以我们将其划分到这个分组中。

# 通用控件属性

下面这些是每种控件都有的属性。

  • 锚点:每个控件有9个定位点,包括四个角、四边的中点、中心点,锚点可以设定子控件的哪个定位点和父控件的哪个定位点重合,下图中左侧对应父控件、右侧对应子控件。

    image-20220419230102172

    下图为子控件中心和父控件上边中点重合的情况。

    img

    下图为子控件右下角和父控件左上角重合的情况。

    img
  • 名称:控件的名字,只能是字母和数字的组合。

  • 隐藏控件:勾选后会隐藏控件。在控件列表中,点击控件右侧的眼睛也能够实现类似效果。

    image-20220419230217724

  • 层级:层级用于控制控件的上下关系。层级高的显示在上面。

  • 位移XY:控制控件相对于锚点位置的偏移,在下面的红框中,可以直接填写数值,单位是像素。除了直接填像素外,还有更高级的用法,详见位移尺寸高级用法

image-20220419231014027

  • 尺寸XY:尺寸XY,最大尺寸XY,最小尺寸XY,3组数据的含义类似,都是对控件尺寸(宽高)的描述。与位移XY相似,也支持直接填写像素和更高级的用法。如果最大尺寸XY,最小尺寸XY,填写0,那么默认不启用这几个属性。如果勾选了适应,比如尺寸X,那么尺寸X的实际数值会保持为父控件的尺寸X的100%。

image-20220419232944230

界面编辑器提供了众多属性,学习这些属性的最好方式就是调整他,并观察效果。

# 位移尺寸属性的高级用法

以位移X为例。

位移用于控制该控件相对于锚点位置的偏移。形式为Px+%。Px表示像素,%表示跟随某个尺寸的百分比。

如位移X配置(如下图)为:跟随父控件尺寸X的10Px+10%,如果父控件的宽度(尺寸X)为100像素,那么子控件的偏移X就为10Px + 10% * 100Px = 20Px。

image-20220419231852955

除了跟随父控件尺寸X之外,我们还提供了其他的跟随方式。如果想知道其他跟随项的效果,除了通过字面含义理解之外,我们非常建议你实地尝试一下这些跟随项的用法,这会大幅加深你对这个选项的用法。

image-20220419232143387

如果你直接在vscode等文本编辑器中打开这个界面文件时,可以发现,offset字段的第一个值就与编辑器中的配置非常类似。

image-20220419234407449

%和Px是按钮,可点击,点击后会按照目前的设置,将位移X的设置由Px+%的形式转为Px,或者%形式。

image-20220419232345317

  • 点击Px,如下图所示,转为20Px

image-20220419232612384

  • 点击%,如下图所示,转为20%,因为父控件的尺寸X是100Px,20% × 100Px = 20Px

image-20220419232736983

# 位移尺寸高级用法的实际应用

下图是一个弹窗,有一个content用作万用控件(如果你感兴趣,可以参考万用控件,但是我们建议你按顺序阅读文档)。

image-20220421205402951

messageBoxPanel是一个panel,然后下面挂接了一个background图片,图片的尺寸XY均勾选了适应,这样可以保证图片始终填满父控件panel。

image-20220421210518082

我们希望实现的效果是,无论外层控件(messageBoxPanel)怎么放大缩小,content都能占满红框内的区域。

按照下图调整content的位移和尺寸即可:

  • 位移X,因为content始终是在X方向(水平方向)的中心,所以填0即可
  • 位移Y,因为content会偏下一点(标题栏有一定的高度),所以我们在这里填7
  • 尺寸X,因为content的宽度是跟随父控件的宽度发生变化的,父控件宽,他也宽,所以这里我们选择跟随100%的父控件尺寸X。又因为这个弹窗左右边框也有宽度,所以我们需要减去这个宽度(-10)
  • 尺寸Y,因为content的高度是跟随父控件的高度发生变化的,父控件高,他也高,所以这里我们选择跟随100%的父控件尺寸Y。又因为这个弹窗的底部边框和标题栏也有高度,所以我们需要减去这个高度(-25)

image-20220421210102110