CheckBox

简介

checkBox是复选框控件,类似于开关,只有两种状态,选中 及 未选中 状态。当控件被按下时,将切换为另一种状态。

Sample

Sample实现了一个文本大小写控制器。

控件布局

layout

在Page中加入一个lablecheckbox控件,其中checkboxbindchange属性设置为 onChage。

JS代码

onChange:function(event){
    //设置文本
    var text = "hello rtt !!!"

    //根据checkbox的状态,设置文本的大小写
    if(event.detail.value)
        text = text.toUpperCase();
    else
        text = text.toLowerCase();

    this.setData({label1 : {value : text , refresh : true}});
},

效果

sample

CheckBox属性

公共属性

  • 控件类型

    默认 checkBox,且不可改动

  • 透明度

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

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

名称

  • 控件名称

    设定控件的名称。

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

设计

  • 控件锁定

    选项:True/False

    设定该控件是否锁定。

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

  • 是否隐藏控件

    选项:True/False

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

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

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

调用属性

  • bindchange

    绑定change事件,如果设定值为onChange时,当checkBox被按下时,将调用JS脚本中的Page对象中的onChange函数。

图片

  • 背景图片

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

外观

  • 背景颜色

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

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

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

  • 未选中显示图片

    设定当控件处于 未选中 状态时,显示的图片

  • 选中显示图片

    设定当控件处于 选中 状态时,显示的图片

  • 选中值

    选项:True/False

    设定checkbox的初始选中状态

位置属性

  • x坐标点

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

  • y坐标点

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

  • 高度

    设定控件的高度

  • 宽度

    设定控件的宽度

setData

  • 控件自有属性

    属性名 类型 描述 注解
    select Bool Checkbox控件状态 true 为选中,false 为非选中
    auto Bool Checkbox控件状态变化自动绘图刷新 true 为状态变化自动绘图刷新,false 为状态变化不自动绘图刷新
  • setData 设置更改属性示例

    示例代码 注解
    this.setData({checkbox1 : true}) idcheckbox1 的 Checkbox 控件置为选中状态
    this.setData({checkbox1 : {value : true}}) idcheckbox1 的 Checkbox 控件置为选中状态
    this.setData({ checkbox1 : {auto : false}}) idcheckbox1 的 Checkbox 控件置为状态变换时不自己绘图刷新