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

2024-12-23 10:57:59 +08:00
parent 7292166c88
commit 0dc59fa4f0
3297 changed files with 63375 additions and 0 deletions
--- a/mcguide/18-界面与交互/16-示例：开关与标签切换.md
+++ b/mcguide/18-界面与交互/16-示例：开关与标签切换.md
@@ -0,0 +1,198 @@
+---
+front: 
+hard: 入门
+time: 10分钟
+---
+
+# 示例：开关与标签切换
+
+## 开关
+
+这个是编辑器里内置的开关（继承自我的世界原版的开关），开关可以理解为包含两种状态的按钮，每次点击会在两种状态中切换。
+
+![image-20220503183629074](./images/image-20220503183629074.png)
+
+开关可以定义的主要就是这6种状态的贴图：
+
+- 对应开关开启的状态：选中锁定贴图，悬浮贴图，按下悬浮贴图
+- 对应开关关闭的状态（开关默认是关闭的）：普通贴图（即默认的样子），按下贴图，未选中锁定贴图
+
+锁定就是开关不可用的状态，无法点击。
+
+![image-20220503220829857](./images/image-20220503220829857.png)
+
+## 复杂的开关效果
+
+下图也是一种开关的开启/关闭状态，常用于制作页签。两种状态除了贴图不一样之外，还有文字的区别。
+
+这就导致我们需要对编辑器自带的开关做一些改动，以适应我们的需求。
+
+![image-20220503223726371](./images/image-20220503223726371.png)
+
+上图的UI只用到了下面这两张图片，图一为按钮本体图片，图二为按钮右侧的尖角图片。
+
+![tab_share05](./images/tab_share05.png)
+
+![tab_share03_item](./images/tab_share03_item.png)
+
+## 复杂开关的制作步骤
+
+### 控件结构
+
+首先，我们创建一个界面文件，然后创建下图的控件结构。其中，main - panel(0)下的两个panel（面板）分别是
+
+- panel：对应右侧上方的选中（checked）状态的开关，下面的两张贴图分别对应按钮底板和尖角
+- panel(0)：对应右侧下方的未选中（unchecked）状态的开关
+
+![image-20220503224755059](./images/image-20220503224755059.png)
+
+### 贴图设置
+
+上述两个panel（面板）控件的底板图片的图片均使用下图。
+
+![tab_share05](./images/tab_share05.png)
+
+两个控件的颜色看起来有些许差别，是因为我们在panel下的底板图片里调整了颜色属性。属性值见下图。
+
+这个颜色是对原有图片颜色的叠加，能实现的效果受图片原有的色彩影响很大，原有图片的色彩越浅，效果越明显。
+
+![image-20220503230303474](./images/image-20220503230303474.png)
+
+适配设置见下图，这里我们使用旧版九宫，可以实现较为精细的效果。
+
+关于九宫的更多用法参考[图片缩放适配与九宫切图](./11-图片缩放适配与九宫切图.md)。
+
+![image-20220503225931689](./images/image-20220503225931689.png)
+
+尖角图片的设置较为简单，不再赘述。
+
+### 尺寸设置
+
+尖角图片的锚点和尺寸XY的数据如下。
+
+![image-20220503225116888](./images/image-20220503225116888.png)
+
+按钮底板的锚点和尺寸XY的数据如下图。
+
+![image-20220503225312665](./images/image-20220503225312665.png)
+
+这样设置可以保证当父节点的尺寸在一定范围内变化时，控件的视觉效果始终保持一个底板+一个尖角的形状，且相对位置不发生太多变化。
+
+![image-20220503225435683](./images/image-20220503225435683.png)
+
+### 开放属性引用并删除变量
+
+我们对panel新增两个属性引用变量，关于属性引用请参考[属性变量引用](./15-变量引用和万用控件.md#属性变量引用)：
+
+- 开放panel的尺寸属性到panel，命名为my_toggle_size
+- 开放label的内容属性到panel，命名为my_toggle_text
+
+![image-20220503231541292](./images/image-20220503231541292.png)
+
+找到panel的尺寸XY，可以看到这个属性现在处于不可编辑的状态，你只能通过编辑my_toggle_size的值来影响这个值。
+
+在尺寸X的右侧有一个引用按钮，将鼠标放在上面会显示悬浮提示，内容为这个引用这个属性的变量。
+
+![image-20220503232117585](./images/image-20220503232117585.png)
+
+我们在变量区里找到my_toggle_size，然后通过“···”按钮，点击删除，将这个变量删除。
+
+![image-20220503232554068](./images/image-20220503232554068.png)
+
+我们会发现这个变量被删除了，但是在变量默认值的分组中可以找到这个变量（这里我们填写一个80,50的默认值）。
+
+这是因为panel的尺寸仍然绑定了my_toggle_size变量，只是这个变量没有被正式启用。
+
+![image-20220503232830462](./images/image-20220503232830462.png)
+
+接下来我们删除变量区的my_toggle_text变量，可以发现label控件的变量默认值分组内同样出现了my_toggle_text属性（这里我们填写“当前选中”作为默认值）。
+
+![image-20220503233234538](./images/image-20220503233234538.png)
+
+接下来我们对panel(0)如法炮制，请务必保证这里开放的2个属性引用的变量名称和之前的一样，必须还是my_toggle_size和my_toggle_text。
+
+![image-20220503233505419](./images/image-20220503233505419.png)
+
+### 添加到控件库
+
+我们将panel和panel(0)都添加到控件库，并分别命名为：
+
+- panel：MyToggleChecked
+- panel(0)：MyToggleUnchecked
+
+![image-20220503234001458](./images/image-20220503234001458.png)
+
+记得双击打开这两个自定义控件，将这两个控件的根节点的位移XY归零。
+
+完事就绪，我们可以在控件窗口中删除panel和panel(0)了。
+
+### 在开关中应用自定义控件
+
+在控件窗口里新建一个开关。
+
+![image-20220503234220376](./images/image-20220503234220376.png)
+
+如果我们在控件窗口里强行展开开关，可以看到开关就是由8个万用控件组成的，在开关的不同状态，显示不同的控件。
+
+![image-20220503235618091](./images/image-202205032356180911.png)
+
+这里我们不关注变量区，而是打开“不常用变量区”，在这里可以看到大量的控件引用，关于控件引用详情可以参考[这里](./15-变量引用和万用控件.md#控件引用和万用控件)。
+
+我们不制作太精细的效果，暂时将其分为两组：
+
+- 所有的选中……属性：使用MyToggleChecked控件
+- 所有的未选中……属性：使用MyToggleUnchecked控件
+
+![image-20220503234510678](./images/image-20220503234510678.png)
+
+即当开关开启（选中）时，我们的开关将显示MyToggleChecked的样子。
+
+当开关关闭（未选中）时，我们的开关将显示MyToggleUnchecked的样子。
+
+### 在开关中引用自定义控件的属性
+
+我们在“[开放属性引用并删除变量](#开放属性引用并删除变量)”这一步中曾经创建过my_toggle_size和my_toggle_text两个属性，我们将在开关中使用。
+
+我们选择switch_toggle变量区的“+”，选择添加已设变量。
+
+这里可以看到熟悉的my_toggle_size和my_toggle_text两个变量，把他们都添加一下。
+
+![image-20220503235220402](./images/image-20220503235220402.png)
+
+效果如下图，可以看到在开关的变量区增加了这两个变量，并且他们可以控制开关下面所有的万用控件的同名属性。属性引用就是以变量名作为匹配的，即：
+
+- switch_toggle的my_toggle_size变量，控制所有红框的子节点的my_toggle_size属性（面板的尺寸属性）
+- switch_toggle的my_toggle_text变量，控制所有黄框的子节点的my_toggle_text属性（文本的内容属性）
+
+![image-20220504130526895](./images/image-20220504130526895.png)
+
+可以在这里调整数值查看效果。
+
+![image-20220503235511283](./images/image-20220503235511283.png)
+
+如果你想直接在预览窗中通过拖拽switch_toggle的红色外框调整各万用控件的尺寸，你可以勾上my_toggle_size的两个“适应”属性。
+
+![image-20220504130202798](./images/image-20220504130202798.png)
+
+## 测试复杂开关
+
+使用资源管理器的“新建”创建一个界面预设，参考下图。
+
+![image-20220504131005501](./images/image-20220504131005501.png)
+
+在新建文件向导的第二页，我们无需修改，直接点击创建即可。
+
+![image-20220504131111510](./images/image-20220504131111510.png)
+
+编辑器会自动打开我们刚创建好的界面预设，并跳转到预设编辑器，选中界面预设。
+我们在界面预设的属性面板中，勾选预加载，并且保证绑定的界面画布为刚才包含switch_togggle的画布。
+
+![image-20220504131303496](./images/image-20220504131303496.png)
+
+然后点击编辑器右上角的运行按钮，选择当前最新的稳定版开发包，等待开发包打开。
+
+然后按下F11切换为模拟触屏模式，就可以点击这个开关进行切换了。
+
+![image-20220504132257635](./images/image-20220504132257635.png)
+
+以上是一个简单的自定义开关的例子，更复杂使用这种开关来实现一套页签切换的例子可以参考[UI数据绑定](./70-UI数据绑定.md)。