# 变量引用和万用控件

# 属性变量引用

下图的4个控件是同一个自定义控件的实例。如果要实现类似下面这种各不相同的效果,需要用到属性引用功能。

image-20220420225806183

自定义控件的实例,只能修改根节点的属性。所以我们要想办法,在PlayerAttr这个节点直接控制Label节点的内容属性。

即,在PlayerAttr节点增加一个变量,绑定Label节点的内容。

image-20220421140741765

需要执行如下的操作:

  1. 选中自定义控件的根节点(如图,这里是PlayerAttr)
  2. 点击功能区的新建变量
  3. 在菜单中选择:新增属性变量

image-20220504145038934

这将打开一个新的面板——新建属性变量面板。

我们是选中PlayerAttr节点打开的

  • 你在这个面板中可以选择PlayerAttr节点和其子控件的所有属性
  • 并将这些属性作为变量开放到PlayerAttr的变量区

image-20220421141059283

我们选择label,并选中内容属性。

可以看到,当你选中内容时,变量类型也自动选择了文本内容。

这是因为你可以一次性绑定多个类型相同的属性,我们在这里自动帮你做了筛选。

填写好变量命名后(比如AttrText),点击确定。

image-20220421141926913

现在,我们就在PlayerAttr的变量区成功创建了AttrText属性,并且这个属性绑定的label控件的内容属性。

我们在这里把值修改为200,可以看到,预览窗里显示的值也变成了200。

image-20220421154902941

# 属性引用示例

现在让我们使用这一自定义控件快速实现一个货币展示HUD。

由于物品渲染的属性暂时不支持属性变量引用,我们使用一个图片控件来代替,并将这个图片控件命名为icon。

image-20220422231615770

接下来为PlayerAttr添加一个新的变量(icon_texture),并绑定icon控件的贴图属性。

image-20220422231920563

可以看到这个图片“消失”了。

image-20220422232004877

这是因为在PlayerAttr的变量区中,这个新创建的变量(icon_texture)还没有赋值。

image-20220422232032816

接下来,我们通过windows的文件夹在工作台的下载路径中,找到编辑器的下载路径,在这里可以找到物品的贴图文件夹。

然后找到绿宝石和钻石,两张贴图,并将其导入编辑器的贴图中。

image-20220422232339065

准备工作到此为止,接下来我们创建一个新的界面文件。并在main画布下创建2个PlayerAttr的实例。

然后分别设置两个实例的变量区的icon_texture变量为钻石贴图和绿宝石贴图。

image-20220422233027414

效果如下。

image-20220422233853370

感觉icon有点小。我们打开这个自定义控件,调整一下icon控件的尺寸,然后返回界面文件,可以看到这两个自定义控件实例的样式都被正常修改了。

image-20220422233955055

# 控件引用和万用控件

# 简介

下图是两个弹窗,他们的外框非常相似,但是内容不同。

image-20220421175256869

事实上他们使用的是同一个外框,你可以使用控件引用来实现这样的效果。

image-20220421182539714

# 制作内容物

我们先制作两个内容物。

  • 内容1

综合界面编辑器入门控件和控件属性两篇文档,我们可以很轻松的实现这个控件。制作完毕之后,我们需要将其添加到控件库,详见继承和自定义控件,这里我们命名为QuestionContent。

image-20220421182737967

  • 内容2

内容2是一个滚动列表,想要实现上述形式的滚动列表,我们需要先创建一个文本控件,并将其添加到控件库,比如命名为myLbl。

image-20220421183031850

然后,我们创建一个滚动列表,在属性“滚动内容”里选择刚才的自定义控件myLbl。并取消勾选下面的“显示背景”。然后,将这个滚动列表添加到控件库,这里我们将其命名为MessageScrollView。

其实“滚动内容”就是一个万用控件变量。

image-20220421195331414

# 制作外框

接下来我们实现一个外框。

外框非常简单,由下面3个控件组成

  • 一个图片作为背景图(background节点)
  • 一个文本作为标题(title节点)
  • 一个按钮作为关闭按钮(closeBtn节点)

image-20220421175640956

值得一提的是,background图片控件的贴图使用的是原生贴图。

image-20220421180831964

贴图的路径如下,这张贴图在我的世界中自动支持九宫,无需在界面编辑器的属性中填写,是制作弹窗类控件的好资源。

image-20220421180818792

# 添加万用控件变量

接下来,我们要在background节点下添加一个万用控件,并将其作为变量开放到messageBoxPanel节点。这个功能很难理解,我们推荐你跟着做完,然后我们再做解释。

与属性变量的操作步骤类似:

  1. 选中messageBoxPanel节点
  2. 点击新增万用控件变量

image-20220504144856133

在弹出的菜单中

  1. 选中background节点,我们要把万用控件挂接为这个节点的子节点
  2. 填写万用控件命名
  3. 填写变量命名
  4. 可以看到按照上述填写信息之后,编辑器将帮我们实现的操作,点击确定

image-20220421180435644

观察一下结果,可以发现

  1. 在messageBoxPanel节点增加了一个v_content变量
  2. 在background节点下增加了一个content控件

image-20220421181333247

  1. 你可以在v_content中选择一个自定义控件库里的控件

image-20220421181436672

在修改v_content的属性值之前,我们先调整一下content控件的尺寸,使其可以始终填满外框视觉上的内容部分,具体方法请参考控件和控件属性

我们在之前已经做好了两个内容物控件,QuestionContent 和 MessageScrollView。

这里我们选择QuestionContent ,可以看到,我们的万用控件看起来和QuestionContent完全相同。

image-20220421213710121

# 控件引用总结

即,控件引用变量和万用控件可以实现的效果就是:可以在属性面板中通过修改变量的值,将子控件的万用控件转变为某个自定义控件

理解了这些之后,我们再看一下滚动列表这个控件。

image-20220421214153432

我们在编辑器中强行把他展开,你会发现,滚动列表就是使用了一个万用控件(scrolling_content)。

image-20220421214242036

并且这个万用控件的值被开放到了根节点(scroll_view)的属性面板的变量区的“滚动内容”属性。使你可以直接在最外层(scroll_view)修改滚动列表的内容物控件。

image-20220421214546602