---
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)。