ListCtrl

简介

ListCtrl 控件,它是一种容器控件,能够添加多个子控件,子控件按加入顺序水平或垂直的方向排列。每一行(列)可存放一个控件(该控件也可以是容器控件)超出区域的内容可通过上下拖拽显示。

方向设定为水平时,各个元素顶部对齐;当方向设定为垂直时,各个元素靠左对齐。

ListCtrl 的基类是 widget , widget 属性及接口详细请查看 widget 控件介绍。基础属性中某些属性在 ListCtrl 控件中无效(可以设置这类接口属性,但并无效果,显示状态上并无任何变化,因此可以忽略此类属性),不可用属性有:

  • font:字体属性
  • textAlign:文本对齐方式
  • foreground:前景色属性

控件属性:包含基础控件所有属性。

属性名 类型 描述
list Object 包含往 ListCtrl 中添加自定义面板所需要的信息
remove String 要从 ListCtrl 中移除的控件 id
empty Bool 清空 ListCtrl,true 有效, false 无效
move Number 列表移动
moveTo Number 列表偏移
inertial Number 惯性动画帧间距
correct Bool 修正列表显示

setData 功能

list 属性功能

主要用于往 ListCtrl 中添加自定义面板。

list 属性说明:

属性 类型 说明
page Object ListCtrl 所在 page 对象
items Array 数组,多组自定义面板描述

list 属性中 items 属性说明:

属性 类型 说明
xml String 自定义面板相对路径名
index Number 插入起始位置
items Array 数组,重复加载自定义面板并配置面板或子控件相关属性
this.setData({
    listctrl1: {            /* ListCtrl 控件 id */
        list: {             /* 添加 list 功能属性名 */
            page: this,     /* page 属性,值为 ListCtrl 所在 page 对象 */
            items: [        /* items 属性,数组 */
                {
                    xml: 'Panels/panel1',       /* xml 属性,自定义面板 URL */
                    items: [                    /* items 属性,数组 */
                        /* 添加自定义面板 panel1 到 ListCtrl 中,并修改 id 为 list01 */
                        { panel1: { id: "list01", background: 0xFFFF0000 }, label1: "panel1 01" },
                        /* 添加自定义面板 panel1 到 ListCtrl 中,并修改 id 为 list02 */
                        { panel1: { id: "list02", background: 0xFF00FF00 }, label1: "panel1 02" }
                    ]
                },
                {
                    xml: 'Panels/panel2',
                    index: 0,   /*从头部添加*/
                    items: [
                        /* 添加自定义面板 panel2 到 ListCtrl 中,并修改 id 为 list03 */
                        { panel2: { id: "list03", background: 0xFFFF0000 }, label1: "panel2 01" },
                        /* 添加自定义面板 panel2 到 ListCtrl 中,并修改 id 为 list04 */
                        { panel2: { id: "list04", background: 0xFF00FF00 }, label1: "panel2 02" }
                    ]
                }
            ]
        }
    }
})

remove 属性功能

主要用于从 ListCtrl 中移除项,即子控件。

属性 类型 说明
remove String 要从 ListCtrl 中移除的控件 id
this.setData({ listctrl1: { remove: "list01" } });  /* 从 listctrl1 中移除 id 为 list01 的项(子控件) */

empty 属性功能

主要用于从 ListCtrl 中清除所有项,即子控件。

属性 类型 说明
empty Bool true 有效, false 无效
this.setData({ listctrl1: { empty: true } });  /* 清空 listctrl1 中的项(子控件) */

move 属性功能

上下移动 list。

属性 类型 说明
move Number 移动像素值
this.setData({ listctrl1: { move: 40 } });  /* listctrl1 上移 40 px */

this.setData({ listctrl1: { move: -40 } });  /* listctrl1 下移 40 px */

moveTo 属性功能

定点偏移 list。

属性 类型 说明
moveTo Number 偏移像素值
this.setData({ listctrl1: { moveTo: 0 } });  /* listctrl1 移动到顶端 */

this.setData({ listctrl1: { moveTo: 10000 } });  /* listctrl1 移动到底端 */

inertial 属性功能

惯性动画帧间距,值越小帧数越多,时间越长。默认 2000。

属性 类型 说明
inertial Number 单位像素值
this.setData({ listctrl1: { inertial: 20000 } });  /* listctrl1 惯性帧间距 */

correct 属性功能

修正列表显示,多用于列表中相关项的 SIZE 变化或隐藏显示后修正。

属性 类型 说明
correct Bool true
this.setData({ listctrl1: { correct: true } });  /* listctrl1 修正显示 */