列表控件

1. 属性

属性	说明
Id	只读属性只在编辑工程可改变
Global	全局属性，勾选时控件可作用于全局，全局调用时在前加页名称
Name	控件名称，只在工程编辑时可更改
x	控件x坐标，脚本可读写
y	控件y坐标，脚本可读写
width	控件宽，脚本可读写
height	控件高，脚本可读写
Locked	位置和大小锁定，只在编辑时有效，工程运行时无效
Visible	控件可视性，脚本可读写。Visible=0控件不可见 visible=控件可见
opacity	控件透明度，脚本可读写（仅s系列支持透明度）
enable	控件使能，脚本可读写，enable=0使能关闭 enable=1使能打开
Items	列表条目，脚本可读写，编辑工程时在此处编辑列表内容
itemcount	条目数量，脚本可读写。
maxitem	最大条目数量，运行时不可读写
sel	选中的序号，从0开始，脚本可读写
Selex	勾选之后在选中项未改变时仍会触发“值改变事件”的脚本
Selel	勾选之后仅在触摸时会触发“值改变事件”的脚本
ori	控件方向，脚本可读写。Ori=0横向，ori=1纵向
itemspc	列表条目的间距，脚本可读写
bgtype	控件背景类型，脚本只读，bgtype=1颜色切换 bgtype=3图片切换
bgcolor	控件背景颜色，脚本可读写，十六进制颜色格式
selbgcolor	选中项背景颜色，脚本可读写
font	控件内容选择的字库，脚本可读写，读写值为字库序号
fontcolor	控件本文的颜色，脚本可读写
selfontcolor	选中项字体颜色，脚本可读写
charspc	字符间距，脚本可读写
txthoragn	文本的水平对齐方式，脚本可读写 0左 1中 2右
txtveragn	文本的垂直对齐方式，脚本可读写 0上 1中 2下
bdwidth	边框宽度，脚本只读，编辑工程时可更改
bdcolor	边框颜色，脚本只读，编辑工程时可更改
Bdwith1	内边框宽度，脚本只读，编辑工程时可更改
Bdcolor1	内边框颜色，脚本只读，编辑工程时可更改

2. 方法

2.1. getItem

获取对应项的文本

string getItem(int index)

参数

index:

项的索引，从 0 开始

返回值

对应项的文本

---

2.2. setItem

设置对应项的文本

void setItem(int index, string item)

参数

index:

项的索引，从 0 开始

item:

项的文本

返回值

无

---

3. 事件

3.1. 值改变事件

用户可以在值改变事件写下脚本，执行脚本的条件可以属性栏选择勾选（是否在选中项未改变时触发值改变事件）这样只要有动作，脚本都会触发，如果没有勾选则只有在选项改变时才会触发脚本

示例 当选项sel为0背景颜色为绿色，1红色 2蓝色

if(list1.sel==0)
    Page0.bgColor=0xff00ff00;
else if(list1.sel==1)
    Page0.bgColor=0xffff0000;
else if(list1.sel==2)
    Page0.bgColor=0xff0000ff;

4. 示例

4.1. 在脚本中访问属性

以列表名称list1为例

4.1.1. 设置列表控件背景颜色（list1.bgColor）

例如 设置列表控件背景颜色为绿色

list1.bgColr=0xff00ff00;

4.1.2. 设置列表控件选中项背景颜色（list1.SelbgColor）

例如 设置列表控件选中项背景颜色为蓝色

list1.SelbgColr=0xff0000ff;

4.1.3. 设置列表控件背景图片（list1.bgImg）

例如 设置列表控件背景图片为图片素材库第一张图片

list1.bgImg=1;

4.1.4. 设置列表控件选中项背景图片（list1.SelbgImg）

例如 设置列表控件选中项背景图片为图片素材库第二张图片

list1.SelbgImg=2;

应用技巧：利用控件不同状态下的背景图片可以设计不同风格的ui，vp提供非常自由的图片选择，图片尽量选用JPG格式，系统解码更快，运行更流畅，控件背景图片的对齐方式可以选择页面对齐，这样可以与页面背景用同一张图片，这样会最大程度的减少素材所占空间，系统运行也会更快，G系列暂时不支持带透明格式的png图片，但是S系列则支持这一选项

4.1.5. 设置列表控件条目内容字体颜色（list1.fontcolor）

例如 设置列表控件条目内容字体颜色为绿色

list1.fontColor=0xff00ff00;

应用技巧：颜色多用来区分选中项与未选中项，简单直接

4.1.6. 设置列表控件选种条目内容字体颜色（list1.fontColor）

例如 设置列表控件选中条目内容字体颜色为红色

list1.SelfontColor=0xffff0000;

应用技巧：利用控件不同状态下的背景颜色是设计UI是最方便有效的方法，vp提供控件在不同操作状态下的背景颜色供客户使用

4.1.7. 设置列表控件条目内容字体（list1.font）

例如 设置列表控件条目字体为素材库第一个字库

list1.font=1;

应用技巧：不同的字库，大小字体，清晰度，包含的字符都可以不同，通过改变字库，可以让文本内容变换不同风格，显示效果丰富多姿

4.1.8. 设置列表控件的透明度(list1.opacity)

例如 设置列表控件的透明度为50，透明度范围0-100，0完全透明，100完全不透明

list1.opacity=50;

应用技巧：透明度在UI上的用处就是能透过控件看到背景，特定风格之下的UI大有用处，但是透明度会增加系统工作量，非必要时刻不建议使用，如果背景素材希望设置成带透明的，目前网络上很多制图P图软件都可以做到这一点，将素材做成图片图片很多时候都是一个不错的选择。

4.1.9. 设置列表控件的可视性(list1.visible)

例如 设置列表不可见，0不可见，1可见

list1.visible=0;

应用技巧：vp工程中控件并非时时必须显示，可视性这个属性实现了控件视觉效果的可编辑性，用户自定义可视性，可配合其他控件在脚本中编辑，也可以配合协议解析器，在通讯过程中控制控件的显示和隐藏，简单直接且行之有效。

4.1.10. 设置列表控件的使能(list1.enable)

例如 设置列表控件失能，0失能，1使能

list1.enable=0;

应用技巧：使能为0时控件处于禁用状态，当列表控件用来设置参数时，某些环境下不允许参数改变时，就可以设置控件的使能属性使其禁用。

4.1.11. 设置列表控件选项字符间距（list1.charSpc）

例如 设置列表控件字符间距为30

list1.charSpc=30;

4.1.12. 设置列表控件条目数量（list1.itemCount）

例如 设置列表控件条目数量为28

list1.itemCount=28;//当条目数量小于实际数量是，最下面的条目不会显示

应用技巧：在一些选项需要被限制的应用场景，例如设置日期时，每个月的天数不一样，此时可以把日期顺序排列，大月设置显示条目数量为31，小月30，二月单独设置。这样设置列表的条目数量属性比较方便且严谨。

4.1.13. 设置列表控件选项字符间距（list1.charSpc）

例如 设置列表控件字符间距为30

list1.charSpc=30;

4.1.14. 设置列表控件的显示方向（list1.ori）

例如 设置列表控件显示方向为垂直

list1.ori=0;//0垂直 1水平

4.1.15. 设置列表控件选项文本的水平对齐方式（list1.txtHorAgn）

例如 设置列表控件文本水平对齐方式为中间对齐

list1.txtHorAhn=1;//0左  1中  2右

4.1.16. 设置列表控件选项文本的垂直对齐方式（list1.txtVerAgn）

例如 设置列表控件文本水平对齐方式为中间对齐

list1.txtVerAhn=1;//0上  1中  2下

应用技巧：作为一个显示字符的控件，间距和对齐方式是必不可少的，vp提供字符在文本控件内的各种对齐方式选择和间距的编辑，能应对字符显示的各种需求

4.1.17. 设置列表控件选中的选项（list1.sel）

例如 设置列表控件选中的选项为1，选项的序号从0开始

list1.sel=1;//选中第二个选项

应用技巧：选中项的改变主要有两种方式。

1. 被动改变，这种情况多数是跟通讯协议相关，通过接收到的不同数据，选中列表不同的条目，

2. 主动控制，通过列表控件的值改变事件执行对应脚本，实现控制的效果。

4.2. 在脚本中调用方法

4.2.1. 获取列表选中项txt内容函数list1.getItem()

函数参数:list1.sel

例如 列表总共有三个条目，分容分别是111 222 333，当你选中第0条，在按钮button0的弹起事件中获取中项内容并赋值给按钮的文本内容

button0.txt=list1.getItem(list1.sel);  

4.2.2. 设置列表选中项txt内容函数list1.setItem()

函数参数:list1.sel,字符串内容

例如 列表总共有三个条目，分容分别是111 222 333，当你选中第0条，设置其条目内容为“sanyscreen”

list1.setItem(list1.sel, "sanyscreen");

5. 应用

列表控件可用来做单选下拉框、菜单等。

// 设置第 3 个项的文本
list0.setItem(2, "item2");

// 读取第 3 个项的文本
txt0.txt = list0.getItem(2);

更多详细用法，可参考简易示例【 简易串口助手_list控件用法.pix】