BB10 Cascades: ToggleButton的使用

Toggle就是开关的意思，ToggleButton就是一个开关按钮组件，在BB10 Cascades中可以在QML中直接加入一个ToggleButton来作为开关，该该控件显示出来是这个样子的：

如果是选中状态，或者说是“打开”状态显示出来是这个样子的：

  

如果是中文界面的话，未选中的状态是这个样子的：

     

而选中的状态是这个样子的：

 

需要注意的是ToggleButton的大小是固定的，所以一切设置ToggleButton组件大小的属性都是没有意义的。

ToggleButton的当前状态可以通过checked属性来检查，同时，我们也可以通过setChecked(bool)方法来设置ToggleButton的状态。当然，为了调用ToggleButton的方法，我们需要为ToggleButton指定一个id。假设我们指定一个ToggleButton的id是myToggle，那么，下面的代码就可以检查ToggleButton当前的状态：

myToggle.checked

返回值为true表示myToggle是开的状态，而返回false则表示myToggle是关的状态

而下面的代码就可以设置ToggleButton组件的状态，如果参数是true，则设置ToggleButton的状态为“开”，如果参数是false则设置ToggleButton的状态为“关”：

myToggle.setChecked(true);
myToggle.setChecked(false);

另外，ToggleButton有CheckedChanged事件，在QML中可以通过onCheckedChanged方法响应事件，在该组件状态变化时进行一些处理。

下面的代码在ToggleButton状态变化时根据当前的状态设置标签myLabel的文字：

onCheckedChanged: {
                if (checked) {
                    myLabel.text = "it is ON now";
                } else {
                    myLabel.text = "it is OFF now";
                }
            }

下面是一个完整的ToggleButton的测试QML页面，该页面有一个ToggleButton，一个标签，一个按钮。

用户改变ToggleButton的状态可以修改标签的文字内容。

用户也可以通过“Change Value”按钮修改ToggleButton的状态，测试可以发现，通过代码修改ToggleButton的状态也会触发CheckedChanged事件。

// Default empty project template
import bb.cascades 1.0

// creates one page with a label

Page {
    Container {
        layout: StackLayout {
        }
        Label {
            text: "  "
        }
        ToggleButton {
            id: myToggle
            onCheckedChanged: {
                if (checked) {
                    myLabel.text = "it is ON now";
                } else {
                    myLabel.text = "it is OFF now";
                }
            }
            horizontalAlignment: HorizontalAlignment.Center
        }
        Label {
            id: myLabel
            text: qsTr("no value")
            textStyle.base: SystemDefaults.TextStyles.BigText
            verticalAlignment: VerticalAlignment.Center
            horizontalAlignment: HorizontalAlignment.Center
        }
        Button {
            horizontalAlignment: HorizontalAlignment.Center
            onClicked: {
                if (myToggle.checked) {
                    console.log("it is true");
                    myToggle.setChecked(false);
                } else {
                    console.log("it is false");
                    myToggle.setChecked(true);
                }
            }
            text: "Change Toggle"
        }
    }
}