单选按钮控件
1. 属性
属性 |
说明 |
|---|---|
id |
控件ID号，不可更改 |
global |
勾选：作用于全局，不勾选：作用于所在页； 不可脚本读写 |
name |
控件名称，可改，默认名称，redio+序号 |
x |
控件起始点x坐标 |
y |
控件起始点y坐标 |
width |
控件宽度，可读写 |
height |
控件高度，可读写 |
locked |
勾选后锁定控件位置，但不影响脚本操作控件属性 |
visible |
控件是否可见，脚本：visible=1，可见，visible=0，不可见 |
opacity |
不透明度，opacity=0，完全透明，opacity=100，完全不透明。值介于0~100之间。默认100，非必要不建议修改此项。 |
enable |
使能，复选框控件是否起作用，有些情况下，不满足条件时，客户可以设置这个控件不起作用。勾选为可用 |
optionCount |
设置一组单选，具体多少个选项 |
sel |
当前选择的是哪个选项，sel = 8，第8项选中。 |
ori |
选项的排列方向：Vertical ->垂直排列，Horizont-> 水平排列， |
HorSpc |
选择Horizont时：水平排列的选项间的间距 |
verSpc |
选择Vertical 时：垂直排列的选项间的间距 |
checkBoxSize |
设置选择框大小 |
checkboxColor |
设置选择框颜色 |
bgType |
背景类型，颜色或者图片 |
bgColor |
如果设置为颜色，设定具体颜色 |
bgImg |
背景类型是图片时，选择背景图片。根据图片资源名称和顺序号选择。 |
bgImgMd |
背景类型是图片时，默认背景图片的对齐模式。 |
dbgColor |
如果不可用状态，而且是背景选择为颜色，则在这里选择不可用时的背景颜色。 |
dbgImg |
如果不可用状态，而且是背景选择为图片，则在这里选择不可用时的背景图片。 |
dbgImgMd |
背景类型是图片时，不可用状态的背景图片的对齐模式。 |
2. 示例
2.1 在脚本中访问属性（以控件名为radio4为例）
2.1.1. 获取单选按钮背景类型(radio4.bgType)只读属性
例如 获取单选按钮背景类型
int type;
type=radio4.bgType;//返回值为0表示背景为颜色，返回值2表示背景为图片
2.1.2. 设置单选按钮背景颜色(radio4.bgColor)
例如 设置单选按钮背景颜色为红色
radio4.bgColor=0xffff0000;//十六进制颜色格式
2.1.3. 设置单选按钮禁用时背景颜色(radio4.dbgColor)
例如 设置单选按钮禁用时背景颜色为蓝色
radio4.bgColor=0xff0000ff;//十六进制颜色格式
应用技巧**：利用控件不同状态下的背景颜色是设计UI是最方便有效的方法，vp提供控件在不同操作状态下的背景颜色供客户使用**
2.1.4. 设置单选按钮背景图片(radio4.bgImg)
例如 设置单选按钮背景图片为图片素材库图片1
radio4.bgColor=1;
2.1.5. 设置单选按钮禁用时背景图片(radio4.dbgImg)
例如 设置单选按钮禁用时背景图片为图片素材库图片2
radio4.dbgImg=2;
应用技巧**：利用控件不同状态下的背景图片可以设计不同风格的ui，vp提供非常自由的图片选择，图片尽量选用JPG格式，系统解码更快，运行更流畅，控件背景图片的对齐方式可以选择页面对齐，这样可以与页面背景用同一张图片，这样会最大程度的减少素材所占空间，系统运行也会更快，G系列暂时不支持带透明格式的png图片，但是S系列则支持这一选项**
2.1.6. 设置单选按钮的使能(radio4.enable)
例如 设置单选按钮使能为禁用
radio4.enable=0;//0为禁用 1为使能
应用技巧**：失能数值为0则控件禁用，在一些需要控件互锁的场景，或者仅仅用来显示而不需要控件使能的场景大有可为**
2.1.7. 设置单选按钮的透明度(radio4.opacity)仅S系列支持透明度
例如 设置单选按钮透明度为50
radio4.opacity=50;//0-100，0为完全透明控件不可见，100完全不透明
应用技巧**：透明度在UI上的用处就是能透过控件看到背景，特定风格之下的UI大有用处，但是透明度会增加系统工作量，非必要时刻不建议使用，如果背景素材希望设置成带透明的，目前网络上很多制图P图软件都可以做到这一点，将素材做成图片图片很多时候都是一个不错的选择。**
2.1.8. 设置单选按钮的可视性(radio4.visible)
例如 设置单选按钮可视性为0
radio4.visible=0;//0可见 1不可见
应用技巧**：vp工程中控件并非时时必须显示，可视性这个属性实现了控件视觉效果的可编辑性，用户自定义可视性，可配合其他控件在脚本中编辑，也可以配合协议解析器，在通讯过程中控制控件的显示和隐藏，简单直接且行之有效。**
2.1.9. 设置单选按钮的排列方向(radio4.ori)
例如 设置单选按钮排列方向为垂直
radio4.ori=0;//1垂直 0水平
2.1.10. 设置单选按钮的水平方向间距(radio4.horspc)
例如 设置单选按钮水平方向间距30
radio4.horspc=30;
2.1.11. 设置单选按钮的垂直方向间距(radio4.verspc)
例如 设置单选按钮垂直方向间距30
radio4.hverspc=30;
应用技巧**：控件显示选项的间距和排列方向的可编辑性，提供了客户在ui设计时更多的风格选择。工程运行时可根据不同的显示选项和内容显示出不同UI。**
2.1.12. 设置单选按钮的选中序号(radio4.sel)
例如 设置单选按钮选中序号为8，单选按钮序号从0开始最多20个选项
radio4.sel=8;
应用技巧**：这一属性更多的体现在通讯或者控制的应用之中，选中序号可以触发控件的值改变事件从而执行脚本。**
2.1.13. 设置单选按钮的x坐标(radio4.x)
例如 设置单选按钮x坐标为100
radio.x=100;//坐标原点x=0，为页面左上角顶点
2.1.14. 设置单选按钮的y坐标(radio.y)
例如 设置单选按钮y坐标为100
radio4.y=100;//坐标原点y=0，为页面左上角顶点
2.1.15. 设置单选按钮的高度(radio4.height)
例如 设置单选按钮高度为100
radio.height=100;
2.1.16. 设置单选按钮的宽度(radio4.width)
例如 设置单选按钮宽度为100
radio.width=100;
应用技巧**：控件的宽高和坐标，表示控件在工程中的大小和位置，数值都是以像素为单位，编辑此属性首先要了解工程对应串口屏的像素大小，利用对宽高和坐标的编辑，可以实现控件UI丰富多彩的变换。**
3. 事件编辑器
事件编辑器中的值改变事件写下脚本，当单选按钮的值发生改变会触发值改变事件，执行相应的代码。
例如，单项按钮总选项为三，当选第一个选项时，设置页面背景为红色，第二个选项设置页面背景绿色，第三个选项设置页面背景为蓝色。
脚本，值改变事件中
if(radio1.sel==0)//判断单选按钮选项为0，即第一个选项
page0.bgColor=0xffff0000;//设置页面背景颜色红色
else if(radio1.sel==1)//判断单选按钮选项为2，即第二个选项
page0.bgColor=0xff00ff00;//设置页面背景颜色为绿色
else
page0.bgColor=0xff0000ff;//设置页面背景为蓝色
4. 常见问题
单选按钮只能同时选择一个选项，选项不可滚动显示，用户排列时要考虑页面空间是否足够。
单选按钮的值改变事件只有在sel变化时才会触发脚本，当选项值没有改变时不会触发脚本，所以如果利用单选按钮来改变某个状态，需要初始状态和单选按钮的初始选项一致。