UIOTOS文档：扩展按钮（图标可切换） | 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dat...

目标

继续上一个示例，现在选择另一个组件封装，继续熟悉扩展组件功能的新方法。
UIOTOS的 表单组件中，缺少可自定义图标的 开关按钮，即分别任意设置开、关两种状态的图标。已有的是这些：

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

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

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

•  按钮组：多项切换。文字和颜色外观。

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

步骤

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

内嵌页

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

新建

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

拖放组件

拖入相关组件并设置。

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

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

• 数学计算的设置可参考示例4中的 步骤2。
• **步骤2：**拖入 图片按钮（面板中组件-表单）。

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

完整步骤：

连线操作

步骤1：按钮点击，触发函数执行。参见示例4的 步骤1。

步骤2：函数取反，回写给输入。参见示例4的 步骤2。

**步骤3：**取设置图片，给到按钮。参见示例4的 步骤3（这里设置和传递图片路径，非按钮文字）。

**步骤4：**步骤2输出给步骤3，触发执行。参见示例4的 步骤4。

布局

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

主页面

新建

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

拖放组件

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

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

页面嵌套

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

属性继承

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

连线操作

**步骤1：**按钮开和关，分别传固定的1和0，给到输入框（值内容）。通过 输入框中转一下，只为方便显示过程值，可以省去。主要看 步骤2。（ 参见解析赋值的常数赋值）

**步骤2： **双向关联上层和内嵌两个输入框。值内容（主页面输入框）←→ 值内容（内嵌页输入框）

注意：这里容器对外连线，直接用到内嵌属性，需勾选 用内嵌事件，否则不会触发。也可以通过关联内嵌输入框的事件，解析赋值提取属性值。（参考 解析赋值）

附加布局选中全部组件，横纵方向中心 布局。

小结：

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

原创作者: u_15629616 转载于: https://blog.51cto.com/u_15629616/11860653