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"
}
}
}
分享到:
相关推荐
BB10终端本机 BB10 Cascades 终端仿真器。
知乎日报 BB10(已停止维护此版本,继续更新 Cascades 版本。)暂时测试的机器是 passport, 其他bb10机器没有测试完成功能首页, 置顶新闻(轮播图部分), 每日新闻栏目以及查看栏目内容主题以及查看主题内容查看评论...
节点-bb10 轻松向 BlackBerry 10 应用程序发送推送通知。 安装 $ npm install node-bb10 要求 BlackBerry 10 设备和您在时从 BlackBerry 获得的相应密钥。 用法 var bb10 = require ( 'node-bb10' ) ; // create a...
科尔多瓦-ua-bb10 BlackBerry 10 推送插件。 注意:Urban Airship 在开发模式下推送消息有问题。 消息没有被传递。 他们知道这个问题,这将在今年晚些时候修复。 如果您想在开发模式下测试您的推送消息,您可以...
gulp-cordova-build-bb10 为 BlackBerry 10 平台构建cordova 项目。 安装 npm install --save-dev gulp-cordova-build-bb10 用法 确保将的位置添加到您的路径中。 var path = require ( 'path' ) , gulp = ...
phonegap-ua-bb10(已弃用) 已弃用此插件已弃用,以支持 用于在令人敬畏的 BlackBerry 10 平台上使用 Urban Airship 的 PhoneGap 插件。 配置文件 您应该将以下首选项和调用目标添加到 config.xml 文件中。 &...
黑莓10平台开发教程,Cascades教程,适合于初学者,可以了解整个BB10的开发流程。
将著名的改编为 BB10 平台,该平台使用替代的 Cascades UI 框架。 可以浏览预构建的 HTML 文档。 它位于 prebuilt-docs-html/ 目录中。
bb10world for 黑莓 很好用,是zip文件,解压即可
廉价亲民黑鸟单车BB10 GPS码表评测.pdf
无标签播放器 BB10 音频播放不使用 MP3 标签,而是使用目录树
黑莓手机中一些应用的简化
BB10安装BAR软件详细教程.黑莓Q10 Z10 详细软件安装转制教程
TurboBerry(黑莓来电通)是一款多功能黑莓手机软件,具有以下主要功能: ◆ 来电,去电归属地显示:支持 203 个国家和地区,国内 342 个地区、324 个电话区号、36 万个手机号段(采用最新数据库,支持所有新号段...
BB10基于webworks下的HTML5应用开发
BB10-WebWorks-SDK_2.2 最新的SDK下载
BlackBerry手机,Sony定制微信流畅版,之前可以用,不知道以后还可不可以用
BB10 的 Pouch DB 示例应用程序 这个应用程序的目的是演示在 BB10 设备上运行 PouchDB 作为本地数据库的可能应用程序,以及利用它通过同步网关连接到 Couchbase 服务器。 为了进行测试,该应用程序已部署到 ...
Phonegap基于bb10的环境搭建和app的创建
黑莓bb10桌面管理器,包含BlackBerry Link,BlackBerry Blend