目标

继续上一个示例，现在选择另一个组件封装，继续熟悉扩展组件功能的新方法。

UIOTOS的表单组件中，缺少可自定义图标的开关按钮，即分别任意设置开、关两种状态的图标。已有的是这些：

• 普通按钮：

  

  可点击。文字/图标+文字外观。
• 开关按钮：

  

  ​可切换。滑动开关外观。
• 图片按钮：

  

  贴图可点击。图片外观。
• 按钮组：

  

  多项切换。文字和颜色外观。

本示例对图片按钮封装为图标可设置的开关按钮，与示例4中普通按钮封装文字切换稍有区别，效果如下：

步骤

内嵌页封装图片按钮组件，主页面测试使用。步骤分别如下：

内嵌页

与示例4的1内嵌页类似。这里是图片按钮点击切换，而不是普通按钮。组件的摆放位置略有区别，实现方式和逻辑与前者一致。

新建

略。参见1新建。内嵌页命名为"自行实现的切换开关"。

拖放组件

拖入相关组件并设置。

• 步骤1：拖入输入框组件和基本数学计算、透明传递函数。

• 设置透明传递的输入组如下所示：

• 数学计算的设置可参考示例4中的步骤2。

• 步骤2：拖入图片按钮（面板中组件-表单）。

设置外观-图标路径为表单属性。（什么是表单属性，有什么用处？）

完整步骤：

连线操作

布局

实现经嵌套后，仅图片按钮可见。参见示例4中的布局。

主页面

新建

略。参见1新建。命名为"自行实现的切换开关"。

拖放组件

依次拖入输入框、嵌套容器、按钮组件，并进行属性设置。步骤如下：

• 步骤1：拖入嵌套容器（面板中组件-容器），设置外观-去掉勾选开启阴影。
• 步骤2：拖入输入框（面板中组件-表单）。
• 步骤3：拖入两个普通按钮V2（面板中组件-表单），分别设置：外观-文字（开、关）。

页面嵌套

将内嵌页嵌套在上一步拖放的容器组件（操作参见容器嵌套），如下所示：

属性继承

参见连线-高级篇属性继承。本示例只用到内嵌页输入框的值内容筛选指定继承这些即可。如下所示：

连线操作

小结：

• 与示例4类似，这里作为巩固。
• 示例4是对普通按钮的文字作切换配置，这里是对图片按钮的图标路径。实际上，任何组件的任何属性，都可以进行类似改造。