Panel

简介

Panel 控件,它是一种容器控件,能够添加多个子控件。

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

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

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

属性名 类型 描述
panel Object 包含重载 Panel 或往 Panel 中添加自定义面板所需要的信息
remove String 要从 Panel 中移除的控件 id
empty Bool 清空 Panel,true 有效, false 无效

setData 功能

panel 属性功能

主要重载 Panel 或用于往 Panel 中添加自定义面板。

panel 属性说明:

属性 类型 说明
page Object ListCtrl 所在 page 对象
xml String 自定义面板相对路径名
data Object 属性配置
items Array 数组,多组自定义面板描述

panel 属性中 items 属性说明:

属性 类型 说明
xml String 自定义面板相对路径名
items Array 数组,重复加载自定义面板并配置面板或子控件相关属性

重载:

this.setData({
    panel1: {                           /* panel 控件 id */
        panel: {
            page: this,                 /* page 属性,值为 panel 所在 page 对象 */
            xml: 'Panels/panel1',       /* xml 属性,自定义面板 URL */
            data: { panel1: { size: { width: 400, y: 180 } }, label1: "is label1", button1: "is button1" }  /* data 属性,修改加载后 panel 的属性或其中子控件的属性 */
        }
    }
})

添加:

this.setData({
    panel1: {               /* panel 控件 id */
        panel: {
            page: this,     /* page 属性,值为 panel 所在 page 对象 */
            items: [        /* items 属性,数组 */
                {
                    xml: 'Panels/panel1',       /* xml 属性,自定义面板 URL */
                    items: [                    /* items 属性,数组 */
                        /* 添加自定义面板 panel1 到 panel 中,并修改 id 为 panel01 */
                        { panel1: { id: "panel01", background: 0xFFFF0000, position: { x: 0, y: 0 } }, label1: "panel1 01" },
                        { panel1: { id: "panel02", background: 0xFF00FF00, position: { x: 200, y: 0 } }, label1: "panel1 02" },
                        { panel1: { id: "panel03", background: 0xFF0000FF, position: { x: 400, y: 0 } }, label1: "panel1 03" }
                    ]
                }
            ]
        }
    }
})

remove 属性功能

主要用于从 Panel 中移除子控件。

属性 类型 说明
remove String 要从 Panel 中移除的控件 id
this.setData({ panel1: { remove: "label1" } })  /**移除 panel 中的 label1 控件 */

empty 属性功能

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

属性 类型 说明
empty Bool true 有效, false 无效
this.setData({ panel1: { empty: true } })   /**清空 panel,移除所有子控件 */