---
front:
hard: 入门
time: 10分钟
---

# 变量引用和万用控件

## 属性变量引用

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

![image-20220420225806183](./images/image-20220420225806183.png)

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

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

![image-20220421140741765](./images/image-20220421140741765.png)

需要执行如下的操作：

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

![image-20220504145038934](./images/image-20220504145038934.png)

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

我们是选中PlayerAttr节点打开的

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

![image-20220421141059283](./images/image-20220421141059283.png)

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

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

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

填写好变量命名后（比如AttrText），点击确定。

![image-20220421141926913](./images/image-20220421141926913.png)

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

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

![image-20220421154902941](./images/image-20220421154902941.png)

### 属性引用示例

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

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

![image-20220422231615770](./images/image-20220422231615770.png)

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

![image-20220422231920563](./images/image-20220422231920563.png)

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

![image-20220422232004877](./images/image-20220422232004877.png)

这是因为在PlayerAttr的变量区中，这个新创建的变量（icon_texture）还没有赋值。

![image-20220422232032816](./images/image-20220422232032816.png)

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

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

![image-20220422232339065](./images/image-20220422232339065.png)

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

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

![image-20220422233027414](./images/image-20220422233027414.png)

效果如下。

![image-20220422233853370](./images/image-20220422233853370.png)

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

![image-20220422233955055](./images/image-20220422233955055.png)

## 控件引用和万用控件

### 简介

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

![image-20220421175256869](./images/image-20220421175256869.png)

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

![image-20220421182539714](./images/image-20220421182539714.png)

### 制作内容物

我们先制作两个内容物。

- 内容1

综合[界面编辑器入门](./1-界面编辑器使用说明.md)，[控件和控件属性](10-控件和控件属性.md)两篇文档，我们可以很轻松的实现这个控件。制作完毕之后，我们需要将其添加到控件库，详见[继承和自定义控件](13-继承和自定义控件.md)，这里我们命名为QuestionContent。

![image-20220421182737967](./images/image-20220421182737967.png)

- 内容2

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

![image-20220421183031850](./images/image-20220421183031850.png)

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

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

![image-20220421195331414](./images/image-20220421195331414.png)

### 制作外框

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

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

- 一个图片作为背景图（background节点）
- 一个文本作为标题（title节点）
- 一个按钮作为关闭按钮（closeBtn节点）

![image-20220421175640956](./images/image-20220421175640956.png)

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

![image-20220421180831964](./images/image-20220421180831964.png)

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

![image-20220421180818792](./images/image-20220421180818792.png)

### 添加万用控件变量

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

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

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

![image-20220504144856133](./images/image-20220504144856133.png)

在弹出的菜单中

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

![image-20220421180435644](./images/image-20220421180435644.png)

观察一下结果，可以发现

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

![image-20220421181333247](./images/image-20220421181333247.png)

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

![image-20220421181436672](./images/image-20220421181436672.png)

在修改v_content的属性值之前，我们先调整一下content控件的尺寸，使其可以始终填满外框视觉上的内容部分，具体方法请参考[控件和控件属性](./10-控件和控件属性.md#位移尺寸高级用法的实际应用)。

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

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

![image-20220421213710121](./images/image-20220421213710121.png)

### 控件引用总结

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

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

![image-20220421214153432](./images/image-20220421214153432.png)

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

![image-20220421214242036](./images/image-20220421214242036.png)

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

![image-20220421214546602](./images/image-20220421214546602.png)