UIOTOS 示例4：扩展按钮（文字可切换）| 页面嵌套 零代码 低代码 0代码 无代码 iframe 数据大屏 web组态 前端框架 | 致敬amis codewave 乐吾乐 goview dataRoom等
注意:本文为自动抓取供AI学习!!格式未经调整，点击[查看原文档](https://www.yuque.com/liuhuo-nc809/uiotos/czhpqpsw9ownxg49?singleDoc# 《示例4：扩展按钮（文字可切换）》)!
目标
在示例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类似。这里主要介绍按钮嵌套封装后，连线对继承属性的使用。逻辑关系如下：
这些逻辑关系，都分别对应连线操作，具体步骤如下：
步骤1：选择ID（下拉框）→值内容（输入框）。
步骤2：值内容（输入框）→用户数据（内嵌页按钮）。
步骤3：用户数据（内嵌页按钮）→路径（视频）。
步骤4：点击事件（内嵌页按钮）→自动播放（视频）。（再解析赋值"a:播放暂停>0>input1>a:value"。可参见解析赋值。）
注意事项：
附加布局设置
- 步骤1：选中
视频组件，右键-自动布局（或快捷键shift+回车），然后手动设置横纵反向中心。 - 步骤2：其他组件的布局也同样横纵方向中心设置。可参见布局。
- 步骤3：保存、预览。
小结
本示例是在示例3：视频列表选择播放基础上的延伸。对初学者有一定难度，主要是解析赋值对数组的索引取值和写值用途上。在复杂的业务场景中，这项特性非常有用，而且很灵活。比如API接口动态修改传参，对返回的任意结果提取解析。
学会了本示例，相当于了解了UIOTOS中常规操作的大半，剩下更多是结合组件手册，用的时候去了解相关功能和属性使用。如下所示：
【推荐】国内首个AI IDE，深度理解中文开发场景，立即下载体验Trae
【推荐】编程新体验，更懂你的AI，立即体验豆包MarsCode编程助手
【推荐】抖音旗下AI助手豆包，你的智能百科全书，全免费不限次数
【推荐】轻量又高性能的 SSH 工具 IShell：AI 加持，快人一步
· AI与.NET技术实操系列：向量存储与相似性搜索在 .NET 中的实现
· 基于Microsoft.Extensions.AI核心库实现RAG应用
· Linux系列：如何用heaptrack跟踪.NET程序的非托管内存泄露
· 开发者必知的日志记录最佳实践
· SQL Server 2025 AI相关能力初探
· 震惊！C++程序真的从main开始吗？99%的程序员都答错了
· 【硬核科普】Trae如何「偷看」你的代码？零基础破解AI编程运行原理
· 单元测试从入门到精通
· 上周热点回顾（3.3-3.9）
· winform 绘制太阳，地球，月球 运作规律