BB10 Cascades: CheckBox的使用

 在BB10 Cascades中，如果我们希望向QML页面添加一个多选框，使用的是CheckBox组件。

 

在QML编辑界面中，开发人员可以直接从右下角的组件栏中将CheckBox组件拖拽到QML页面中的Container中。

CheckBox有两个主要的属性，一个是text，是CheckBox旁边显示的文字，一个是checked，用于指定该选择项是否被选中 

 如下面的代码创建了一个CheckBox组件，文字是"is important"，状态是选中状态：

CheckBox {
                id: isImportantCheckBox
                text: "is important"
                checked: true
          }

 

然后CheckBox有CheckedChanged事件，通过onCheckedChanged方法响应，当该CheckBox的选中状态改变时会触发CheckedChanged事件。

在onCheckedChanged方法中有参数checked，可以用于判断当前是否为选中状态，checked的值为true则当前为选中状态，如果checked的值为false则当前状态为未选中。

像下面的代码创建了一个文字为"is new"的CheckBox，当选中状态改变时会根据checked的值修该组件isNewLabel的text属性：

CheckBox {
                text: "is new"
                horizontalAlignment: HorizontalAlignment.Fill
                onCheckedChanged: {
                    if (checked) {
                        isNewLabel.text = "it is new";
                    } else {
                        isNewLabel.text = "it is old";
                    }
                }
            }
  

此外，如果我们尝试在QML中加入以上的CheckBox，会发现文字太长时，CheckBox组件会自动隐藏部分文字。

为了显示所有文字，我们需要根据需要调整CheckBox的大小。

 

同时，因为CheckBox经常多个一块使用，用于组成多选框，所以我们也可以将多个CheckBox放入一个Container中，将CheckBox的horizongtalAlignment属性设置成HorizontalAligment.Fill，然后通过调整Container的大小统一调整Container内所有CheckBox的大小。

 

还有，CheckBox的checked属性是可以通过方法setChecked来设置的，setChecked(false)将CheckBox设置为未选中状态，setChecked(true)将CheckBox设置为选中状态。

如下面的代码创建了一个按钮，点击时根据isImportantCheckBox组件的check状态对它进行修改，选中的就改为未选中，未选中就改为选中：

Button {
            horizontalAlignment: HorizontalAlignment.Center
            onClicked: {
                if (isImportantCheckBox.checked)
                {
                    isImportantCheckBox.setChecked(false);
                    }
                    else
                    {
                        isImportantCheckBox.setChecked(true);
                        }
            }
            text: "change Value"
        }

 

 

 

 下面是一个使用CheckBox的完整样例： 

// Default empty project template
import bb.cascades 1.0

// creates one page with a label

Page {
    Container {
        Container {
            preferredWidth: 400.0
            horizontalAlignment: HorizontalAlignment.Center
            CheckBox {
                id: isImportantCheckBox
                text: "is important"
                checked: true
                onCheckedChanged: {
                    if (checked) {
                        isImportantLabel.text = "it is important";
                    } else {
                        isImportantLabel.text = "it is NOT important";
                    }
                }
                horizontalAlignment: HorizontalAlignment.Fill
            }
            CheckBox {
                text: "is new"
                horizontalAlignment: HorizontalAlignment.Fill
                onCheckedChanged: {
                    if (checked) {
                        isNewLabel.text = "it is new";
                    } else {
                        isNewLabel.text = "it is old";
                    }
                }
            }
        }
        Label {
            id: isImportantLabel
            horizontalAlignment: HorizontalAlignment.Center
            text: "it is important"
        }
        Label {
            id: isNewLabel
            horizontalAlignment: HorizontalAlignment.Center
            text: "it is old"
        }
        Button {
            horizontalAlignment: HorizontalAlignment.Center
            onClicked: {
                if (isImportantCheckBox.checked)
                {
                    isImportantCheckBox.setChecked(false);
                    }
                    else
                    {
                        isImportantCheckBox.setChecked(true);
                        }
            }
            text: "change Value"
        }
    }
}

 下面是以上代码执行的效果。