Panel

简介

panel是一种容器控件,可在指定区域存放任意控件,但超出区域的内容不可见。

Sample

Sample演示了利用PanelListCtrl的每一行中加入多个控件的效果

控件布局

layout

在Page中加入一个listCtrl,然后往listCtrl中加入两个panel,然后就可以在panel中随意添加控件。

效果

为显示效果,修改了ListCtrl,Panel1Panel2的背景颜色

sample

Panel 属性

公共属性

  • 控件类型

    默认 panel,且不可改动。

  • 透明度

    设置背景颜色的透明度,范围: 0 ~ 255。也可以在背景颜色中设定。

    注:当背景图片的设定不为空时,将自动设置为 0。

名称

  • 控件名称

    设定控件的名称。

    在JS脚本中,可根据控件名称来指定控件,并对其进行设定或操作。

设计

  • 控件锁定

    选项:True/False

    设定该控件是否锁定。

    如果设定值为True,则设计器中无法移动该控件。

  • 是否隐藏控件

    选项:True/False

    设定该控件是否需要隐藏。

    如果设定值为True,设计器与实际效果都不会显示该控件及控件中的内容。

    当控件已隐藏时,可通过在工程管理器中点击来选中该控件。

调用属性

  • bindtouch

    绑定touch事件,如果设定值为onTouch时,当panel被触碰时,将调用JS脚本中Page对象中的onTouch函数。

图片

  • 背景图片

    设定控件的背景图片,不支持缩放,且居中显示。

外观

  • 背景颜色

    设定控件的背景图片,不支持缩放。

    当图片的尺寸小于控件的尺寸时,将居中显示。

    当图片的尺寸大于控件的尺寸时,将显示从左上角开始计算的部分图片内容。

位置属性

  • x坐标点

    设定 控件的左上角 相对于 父控件的左上角 的横坐标。

  • y坐标点

    设定 控件的左上角 相对于 父控件的左上角 的纵坐标。

  • 高度

    设定控件的高度

  • 宽度

    设定控件的宽度

自定义面板

  • 自定义面板

    panel中加入已创建的自定义面板。

setData

  • 控件自有属性

    属性名 类型 描述 注解
    custom Object Panel控件 自定义面板
  • setData 设置更改属性示例

    示例代码 注解
    this.setData({panel1 : {page: this, xml: 'Panels/panel1'}}) idpanel1 的 Panel 控件中加载自定义面板
    this.setData({panel1 : {page: this, item: 'Panels/panel1'}}) idpanel1 的 Panel 控件中添加自定义面板