GUI Designer滑屏控件使用手册

1.滑屏控件和滑屏子控件介绍

“滑屏控件”用于一个窗口，但是窗口大小有限，添加滑屏控件后可分页显示，以达到在同一窗口中可存放更多 的控件。
“滑屏子控件”是为了存放各种控件而存在，依附于“滑屏控件”，在滑屏控件上添加滑屏控件子页，可理解为 一个特殊的可重叠窗口。
可理解为滑屏控件和滑屏子控件在共同作用下回达到同一窗口分页的效果，可在同一窗口中存放更多的控件。


2.如何添加滑屏控件和滑屏控件子页

打开或新建工程，点击工具箱中的容器类控件，点击滑屏控件及滑屏控件子页图标可添加对应控件，需注意 的是滑屏控件子页需添加在滑屏控件上，如图 2.1 所示。

图2.1 添加滑屏控件及滑屏控件子页
注：滑屏控件子页只能放置在滑屏控件上，添加多少个滑屏控件子页即可滑动多少页

3.如何为滑屏控件子页进行图像替换

选中滑屏控件子页，点击右侧属性窗口中的图像，可对滑屏控件子页进行图像替换，设置背景即设置该滑屏 控件子页对应的页面的底图显示，如图 3.1 所示。

图3.1 图片替换
注：滑屏控件子页默认显示为透明，在未进行图形设置前，显示的是窗口中的背景图片
仿真时滑动屏幕，进行图像替换的滑屏控件子页，如图 3.2 所示。

图3.2 图像替换
未进行图像替换的滑屏控件子页，如图 3.3 所示。

图3.3 未进行图像替换


4.如何设置滑屏

1 、如何添加滑屏控件及滑屏控件子页
添加一个滑屏控件及两个滑屏控件子页，如图 4.1 所示。

图4.1 添加控件
2 、如何设置滑屏控件的大小
选中滑屏控件，通过鼠标或右侧属性窗口中的公共设置滑屏控件的大小，设置滑屏控件的大小即设置屏幕滑 动区域的大小，在滑屏控件上才可滑动屏幕，同时滑屏控件子页的大小也会随着改变，在滑屏控件子页上添 加控件只能在设置范围内放置控件，如图 4.2 所示。

图4.2 设置滑屏控件的大小
3 、如何添加和设置图片控件
选中滑屏控件，点击添加图片控件，并对图片控件进行图片替换，此步骤作用为直观地查看滑屏效果，如图 4.3 所示。

仿真时，显示第一个滑屏控件子页即第一页，如图 4.4 所示。

图4.3 添加图片控件
4 、如何仿真运行

，弹出仿真运行窗口，滑动屏幕，查看其滑动效果。
Click仿真运行按钮

图4.4 第一页
在滑屏控件设置的大小内进行滑动，滑动到第二页即第二个滑屏控件子页 (两个页面滑动时循环的) ，如图 4.5 所示。

图4.5 第二页


5.应用案例


5.1 滑屏控件子页事件列表

事件列表，如下表说明：

控件初始化	控件初始化时触发事件
控件销毁	控件销毁时触发事件
发生页面切换	页面切换完成时触发事件

5.2 如何设置页面正确跳转

1 、如何添加窗口控件
Click常用控件模块中的窗口图标，添加两个窗口，并命名为 1 和 2 ，如图 5.1 所示。

图5.1 添加窗口
2 、如何添加按钮控件
在每个滑屏控件子页及新添加的两个窗口中各添加一个按钮控件，以作界面跳转，如图 5.2 所示。

图5.2 添加按钮控件


3 、如何设置窗口切换
选中按钮控件设置其事件为点击，处理方法为窗口切换，具体设置及步骤详看《按钮类控件使用手册》 中的 “窗口切换”。
第一个滑屏控件子页中的按钮控件设置窗口切换至窗口 1 中，如图 5.3 所示。

图5.3 第一个滑屏控件子页按钮控件事件设置参数
第二个我滑屏控件子页中的按钮控件设置窗口切换至窗口 2 中，如图 5.4 所示。

图5.4 第二个滑屏控件子页按钮控件事件设置参数

窗口 1 或 2 中的按钮控件设置窗口切换至窗口 NEW1 (有滑屏控件的窗口) 中，如图 5.5 所示。

图5.5 窗口1/2 按钮控件事件设置参数
注：为了更好地体现窗口切换效果，在窗口 1 和窗口 2 中的按钮控件添加一个文本显示，具体操作方法详看 《按钮类控件使用手册》。
窗口 1 中的按钮控件显示文本“1”，如图 5.6 所示。

图5.6 窗口1 按钮控件文本显示
窗口 2 中的按钮控件显示文本“2”，如图 5.7 所示。

图5.7 窗口2 按钮控件文本显示
4 、如何设置滑屏控件子页的事件
选中滑屏控件子页，点击右侧属性窗口中的事件→点击添加→事件设置为“发生页面切换”→点击处理方法 下“… ”→Choice“变量操作——变量设置”→ 目标变量绑定“Var0”→设置值选择“使用常量”→输入框输 入“0”(第一滑屏控件子页输入 0 ，第二个滑屏控件子页输入 1) ，如图 5.8 所示。

图5.8 滑屏控件子页事件设置
注：Var3 变量为

5 、如何设置滑屏控件的变量绑定
选中滑屏控件，点击右侧属性窗口中的变量绑定→点击添加→被绑定的控件属性为“当前页”→数据源绑定 “Var3”→转换模式为“单向”→转换方法为“默认” ，如图 5.9 所示。

图5.9 变量绑定设置
6 、如何仿真演示
Click仿真运行按钮，弹出仿真运行窗口。
Click第一个滑屏控件子页中的按钮控件跳转到窗口 1 中，点击窗口 1 中的按钮控件跳转到第一个滑屏控件子 页，两个界面相互跳转，如图 5.10 所示。

图5.10 仿真演示
Click第二个滑屏控件子页中的按钮控件跳转到窗口 2 中，点击窗口 2 中的按钮控件跳转到第二个滑屏空控件 子页两个接麦你相互跳转，如图 5.11 所示。

图5.11 仿真演示

5.3 如何设置页数显示

1. 如何添加文本控件
选中窗口 NEW1 点击常用控件模块中的文本图标，添加一个文本控件，如图 5.12 所示。

图5.12 添加文本控件
2. 如何设置文本控件变量绑定
选中文本控件点击右侧属性窗口中的变量绑定→点击添加→被绑定的控件属性为“文本索引”→数据源绑定 “Var3”→转换模式为“单向”→转换方法为“默认” ，如图 5.13 所示。

图5.13 文本控件变量绑定
3. 如何添加文本显示
选中文本控件，点击右侧属性窗口中的属性→点击外观下的文字→点击添加→选中文本 1/2 →Choice“静态文 本”→输入框中输入“1” (Text 1 输入“1” ，Text 2 输入“2”) ，如图 5.14 所示。

图5.14 添加文本显示


4. 如何设置滑屏控件子页的事件
具体设置方法同上《如何设置页面跳转相同》，此处不再做复述。
5. 如何设置滑屏控件的变量绑定
具体设置方法同上《如何设置页面跳转相同》，此处不再做复述。
6. 如何仿真演示
Click仿真运行弹出仿真运行窗口，第一个滑屏控件子页下面显示页数为 1 ，第二个滑屏控件子页下面页数显 示为 2 ，如图 5.15 所示。

图5.15 仿真演示