Clock

简介

Clock 是时钟控件。用于显示由用户自定义的时间。它是一个容器控件,可以在其内部放置其他子控件。

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

  • font:字体属性
  • textAlign:文本对齐方式
  • foreground:前景色属性
  • gesture:手势监听属性

sample

sample演示了利用 clock 显示秒表效果。

控件布局

直接在page上拖放一个 clock

layout

JS代码

var page = {
    timer : 0,//定时器
    time: 0,//时间,秒数
    /* 此方法在第一次显示窗体前发生 */
    onLoad:function(event){
        var that = this;
        that.timer = setInterval(function(){
            that.setData({Clock1 : {value : that.time}});
            that.time++;
        },1000)
    },

    /* 此方法关闭窗体前发生 */
    onExit:function(event){
        clearInterval(this.timer);//清除定时器
    },
};

效果

演示为快进效果。

sample

Clock属性

公共属性

  • 控件类型

    默认 clock,且不可改动

  • 透明度

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

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

名称

  • 控件名称

    设定控件的名称。

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

设计

  • 控件锁定

    选项:True/False

    设定该控件是否锁定。

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

  • 是否隐藏控件

    选项:True/False

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

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

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

图片

  • 背景图片

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

外观

  • 背景颜色

    设定背景颜色,设定背景颜色的 ARGB 值。

    可打开颜色选择器,通过颜色选择器修改 RGB 值。

    Alpha 值(即透明度),可以直接修改设定值 或 修改透明度的值。背景颜色的透明度与属性透明度的值会自动保持一致。

  • 分针图片

    设定显示分针的图片。

  • 秒针图片

    设定显示秒针的图片。

  • 时针图片

    设定显示时针的图片。

  • 时间(秒)

    设定当前显示的时间。

  • 中心图片

    设定钟盘最中心的显示图片。

位置属性

  • x坐标点

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

  • y坐标点

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

  • 高度

    设定控件的高度

  • 宽度

    设定控件的宽度

setData

  • 控件自有属性

    属性名 类型 描述 注解
    value Number Clock控件值 当日 0 点以来的秒数
    hour object/string 时针显示素材 / 旋转中心点 旋转中心点 (x, y) = (素材的宽度/2, 素材高度)
    minute object/string 分针显示素材 / 旋转中心点 旋转中心点 (x, y) = (素材的宽度/2, 素材高度)
    second object/string 秒针显示素材 / 旋转中心点 旋转中心点 (x, y) = (素材的宽度/2, 素材高度)
    center string 中心点显示素材 NA
  • setData 设置更改属性示例

    示例代码 注解
    this.setData({clock1 : 60}) 设置控件的时间值置为 60
    this.setData({clock1 : {value : 60}}) 设置控件的时间值置为 60
    this.setData({clock1 : {hour : "hour.png"}}) 设置控件的时针素材设定为"hour.png"
    this.setData({clock1 : {hour : {x:5, y:120 }}}) 设置时针旋转中心点 (x, y) = (素材的宽度/2, 素材高度)