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

目标

在 示例3基础上，将播放按钮改成可播放/暂停的切换按钮。通过本示例，可以了解UIOTOS中独创的组件扩展的方式——嵌套封装。效果如下：

步骤

分为内嵌页（做带切换功能的按钮），被主页面嵌套过去使用。步骤分别如下：

内嵌页

用连线和工具函数，改造普通按钮，让默认点击变成可切换，并能设置切换文字。大致逻辑如下：

• 按钮点击，触发0-1取反，数值作为索引给下一步。
• “播放”、“暂停”数组文字，按照索引，取其一给按钮。

新建

略。参见 1新建。命名为“播放暂停”。

拖放组件

拖入两个 输入框、 透明传递函数、 基本数学计算函数、 按钮组件，并进行属性设置。

• **步骤1：**拖入输入框（面板中组件-表单）。
• **步骤2：**拖入基本数学计算（面板中组件-函数）。功能属性设置：

•  输入组设置数字0。
•  选择公式（_method）属性中选择减去（-）。
•  操作数（_value）设置数字1，勾选 反操作（_reverse），相当于用1减去 输入组传入的值，这样配置能实现0-1取反（即输入0时输出1；输入1时输出0）。

• ** 步骤3：**拖入透明传递（面板中组件-函数）。

•  输入组设置固定字符串数组，索引0、1分别对应"确定"和"取消"。

• **步骤4：**拖入普通按钮（面板中组件-表单）。

连线操作

步骤1：按钮点击，触发函数执行。点击事件（ 按钮）→执行（ 基本数学计算）。每次点击都触发，并且不传入任何参数。如下所示：

步骤2：函数取反，回写给输入。 基本数学计算做数值取反（0-1翻转），输出（ 基本数学计算）→值内容（ 输入框）→输入（ 基本数学计算），如下所示：

结合步骤1，按钮每次点击，函数输入的1变为0输出，0又经过输入框回写到函数输入；回到步骤1，再次点击时，函数的0变为1输出。以此往复，实现1、0、1切换输出。**步骤3：**取设置文字，给到按钮。该函数输入前面有配置两个文字，连线将输入属性指向步骤1中按钮的文字（ 连线弹窗面板中属性不存在？），如下所示：

注意，连线后不能直接输出，特别说明如下：

• 函数的输入为数组，按钮的文字为字符串，直接输出肯定有问题。需要对解析赋值设置索引数字，来取输入数组中某项文字再输出，规则参见 解析赋值。
• 该索引值，不应该是手动设置。由步骤2可知，步骤1按钮连续点击时，数学计算函数自动取反，输出1、0、1，可以作为赋值解析值，对应输入数组的索引值，0：播放；1：停止。

**步骤4：**步骤2输出给步骤3，触发执行。 数学计算函数的 输出，给到步骤3 透明传递函数的 解析赋值，作为连线配置。具体连线如下：

索引1： 输出（ 基本数学计算）→ 解析赋值（ 透明传递）

索引2：： 输出（ 本数学计算）→ 执行（ 透明传递）

注意，不能直接执行输出，序号1操作的解析赋值属性是数组类型，而要输出为为0、1这样的数字。

需要在输出前，在连线的解析赋值对应位置设置0，才能将要输出的值给到目标解析赋值数组索引0的位置，用法参见 解析赋值，如下所示：

为什么设置为0而不是其他？

因为透明传递指向步骤1中按钮的连线，序号就是0，对应的连线配置，在透明传递的解析赋值属性组中，为索引0的位置。所以，传入的数字，应该放到这个位置。

按照上面4个步骤，就可以完成目标效果。上述步骤中，赋值解析的 数组操作，分别用到了取索引值和向索引赋值两方面，初学者需重点关注。完整操作效果如下：

布局

这里必须使用 （底板）布局，实现嵌套后仅按钮可见，工具函数等其他组件不可见。上层嵌套使用时，就像使用常规按钮一样，但此时功能已得到了扩展。具体步骤如下：

• **步骤1：**确保当前按钮为底板布局 （参见 布局）
• **步骤2：**选中底板拖放按钮大小一致。选中按钮，右键-自动布局。（横向左右，纵向上下）

（或者右键设置按钮为底板，再删除原底板）``

主页面

新建

略。参见 1新建。命名为“视频列表选择播放/暂停”。

拖放组件

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

可参见示例3中的 拖放组件 的步骤1、2、3，拖入视频、输入框``、下拉框并设置属性。

• **步骤4：**拖入嵌套容器（面板中组件-容器-嵌套容器）。

页面嵌套

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

属性继承

参见 连线-高级篇属性继承。本示例只用到按钮的点击事件、用户数据、输入框的值内容属性，筛选指定继承这些即可。此外，如果要当前页配置按钮切换显示的文字（默认“暂停”、播放）显示名称，可以把该属性继承上来。

连线操作

与 示例3类似。这里主要介绍按钮嵌套封装后，连线对继承属性的使用。逻辑关系如下：

•  选择ID（ 下拉框）→值内容（ 输入框）→ 用户数据（内嵌页按钮）→路径（ 视频）
•  点击事件(内嵌页按钮)→自动播放（ 视频），并 解析赋值。

这些逻辑关系，都分别对应连线操作，具体步骤如下：**步骤1：**选择ID（下拉框）→值内容（输入框）。

**步骤2：**值内容（输入框）→用户数据（内嵌页按钮）。

**步骤3：**用户数据（内嵌页按钮）→路径（视频）。

**步骤4：**点击事件（内嵌页按钮）→自动播放（视频）。（再解析赋值"a:播放暂停>0>input1>a:value"。可参见 解析赋值。）

注意事项：

• 步骤3、4的顺序，必需先由步骤3给视频的路径传递值，再由步骤4的连线使视频播放。
• 连线样式可以调整，参考 线条样式设置。其他相关注意事项，可参考 示例2的连线操作。

附加布局设置

• 步骤1：选中视频组件，右键-自动布局（或快捷键shift+回车），然后手动设置横纵反向中心。
• **步骤2：**其他组件的布局也同样横纵方向中心设置。可参见 布局。
• **步骤3：**保存、预览。

小结

本示例是在 示例3：视频列表选择播放基础上的延伸。对初学者有一定难度，主要是 解析赋值对数组的 索引取值和写值用途上。在复杂的业务场景中，这项特性非常有用，而且很灵活。比如API接口动态修改传参，对返回的任意结果提取解析。
学会了本示例，相当于了解了UIOTOS中常规操作的大半，剩下更多是结合组件手册，用的时候去了解相关功能和属性使用。如下所示：

• [x] 连线
• [x] 嵌套
• [x] 继承
• [x] 函数
• [x] 解析
• [ ] 表单
• [ ] 绘图
• [ ] 接口
• [ ] 收发器（消息总线“无线”通信）

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