ActionScript
TypeScript
JavaScript

List 组件参考

发布时间:2016-12-30

 

        List 组件可显示项目列表。默认为垂直方向列表。可通过UI编辑器自定义列表。List 列表的每一个列表通常是一样的,也可以使用编辑器自定义不同样式的列表内容项。
        List 通常由两个部分组成:列表渲染项(单元格)、滚动条。
        List 组件的脚本接口请参考 List API。

 

创建 List 组件

  1. 编辑列表项。
    列表项可以是 Box 对象或 View(页面) 或其它自定义页面对象。此处以Box 对象为例。
    a.从资源面板里选择拖入一个 Label 组件,到编辑区的界面里,设置 Label 属性 name 的值为 m_label。另外再设置一下 Label 的显示相关属性使它更好看一些。
    b.选中 Label 对象,使用快捷键 Ctrl +B 或选择 菜单栏->编辑->转换为容器 选项,打开转换为容器设置面板,选择容器类型为 Box ,点击确定按钮完成 Box 容器的添加。 

     图片1.png

     

  2. 转化为 List 容器。
    选择列表渲染项对象,使用快捷键 Ctrl +B 或选择 菜单栏->编辑->转换为容器 选项,打开转换为容器设置面板,选择容器类型为 List,点击确定按钮完成容器 List 的添加。 

    图片2.png

  3. 指定 List 的列表渲染项。
    双击List 对象,进入List 内部,设置List 列表渲染项的属性 name 的值为 render。

    注意:此处列表渲染项属性 name 的值必须为 render。
    图片3.png

  4. 为 List 添加滚动条组件。
    从资源面板里选择并拖拽一个 VScrollBar 组件到 List 组件的内部,并设置 VScrollBar 组件对象的属性 name 的值为 scrollBar。
    注意:此处滚动条的属性 name 的值必须为 scrollBar。
    图片4.png

  5. 拖动设置 List 的宽高,设置属性 repeatX 的值为 1,设置 repeatY 的值为6。设置 List 对象的全局引用名,即设置属性 var 的值为 m_list。
    图片5.png

  6. 在代码里给 List 对象赋值。

    var data:Array =[];
    for(var m:int =0;m<20;m++){
         data.push({m_label:"No."+m});
     }
    m_list.array = data;

  7. 在程序里运行查看效果。
    GIF_list_show.gif

  8. 在代码里添加脚本,隐藏滚动条,设置拖拽的橡皮筋效果。

    m_list.scrollBar.hide = true;//隐藏列表的滚动条。
    m_list.scrollBar.elasticBackTime = 200;//设置橡皮筋回弹时间。单位为毫秒。
    m_list.scrollBar.elasticDistance = 50;//设置橡皮筋极限距离。

  9. 在程序里运行查看效果。
    GIF_list_show_2.gif

  

List 组件常用属性

图片10.png

  

属性

功能说明

repeatX

水平方向显示的单元格数量。

repeatY

垂直方向显示的单元格数量。

spaceX

水平方向显示的单元格之间的间距(以像素为单位)。

spaceY

垂直方向显示的单元格之间的间距(以像素为单位)。

vScrollBarSkin

垂直方向滚动条皮肤。

hScrollBarSkin

水平方向滚动条皮肤。

  

 Tips:

  1. 给 List 添加滚动条有两种方式:一种是直接在List 内部拖放一个 滚动条,并设置滚动条的名字为 scrollBar,另一种方式是设置 List 的属性vScrollBarSkin、hScrollBarSkin 的值为滚动条的资源地址。

  2. List 的列表渲染项既可以是 Box 对象,也可以是页面对象。