目标
在 示例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操作的解析赋值
属性是数组类型,而要输出为为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中常规操作的大半,剩下更多是结合组件手册,用的时候去了解相关功能和属性使用。如下所示:
- [x] 连线
- [x] 嵌套
- [x] 继承
- [x] 函数
- [x] 解析
- [ ] 表单
- [ ] 绘图
- [ ] 接口
- [ ] 收发器(消息总线“无线”通信)