feat:上传mcguide-开发指南部份

mcguide/18-界面与交互/15-变量引用和万用控件.md

@@ -0,0 +1,201 @@
+---
+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)