在界面设计中,开发人员除了考虑除了组件自身的外观以外,另一个考虑的因素就是组件的位置。
在QML中,组件摆放是通过布局管理方式实现的,其中包括两个部分,一个是“布局方式”,用于指定一个容器内各个子组件的布局方式,第二个是“布局属性”,用于指定本组件在容器中的摆放方式。
在使用QML摆放组件的时候,对以上两个概念,就是“布局方式”和“布局属性”,一定要有清楚的认识,调整组件位置时才能做到心中有数。如果觉的以上的概念有点混淆,可以通过以下比喻来理解。
我们用古代战争的步兵方阵作比喻:
“布局方式”就相当于一个兵团使用的“阵型”,比如矩形的前进阵型,还有圆形的防御阵型。不同的阵型对士兵有不同的要求,矩形的前进阵型要求士兵一排跟着一排面向同一个方向,而圆形防御阵型要求士兵围成一圈,面向不同方向进行防守。
而“布局属性”就相当于一个士兵在兵团中的位置,比如在矩形的前进阵型中,要求刀盾兵第一排,剑兵第二排,矛兵第三排,那么,我们给刀盾兵指定的“布局属性”就是“第一排”;而在圆形防御阵型中,可能要求甲队朝东,乙队朝西,丙队朝南,丁队朝北,那么,我们给甲队指定的布局属性就是“朝东”。
很明显,一个士兵的“布局属性”的取值范围首先取决于兵团的阵型,也就是兵团的“布局方式”,让一个士兵在矩形前进方阵中朝东站立显然是有问题的。所以,给士兵下达站位命令应该先说明兵团的阵型,比如这样告诉士兵“现在是圆形防御阵型,你朝东站立,防守东边”。
另外,在大部队作战的时候,一个大兵团有可能包括几个小兵团。小兵团作为大兵团的一部分,需要指定它的“布局属性”,就是它在大兵团中的位置。同时,小兵团自己作为一个兵团,也有自己的阵型,就是自己的“布局方式”。
回到我们的QML组件摆放,首先我们要确定容器的“布局方式”,然后根据容器的“布局方式”指定一个组件的“布局属性”。
一个容器的“布局方式”在“QML Properties”页面的“General”区段进行设置,在QML编辑器中将光标定位到容器那行,然后在通过“QML Properties->General->Layout”字段的选择指定一个容器的“布局方式”。
一个组件的“布局属性”在“QML Properties”页面的“Layout”区段进行设置,在QML编辑器中将光标定位到组件那行,然后在通过“QML Properties->Layout->LayoutProperties”字段的选择父容器的“布局方式”,然后该字段的下方会出现不同的“布局属性”供选择,如“靠左”,“靠右”,“居中”等。
因为QML中组件可以嵌套,比如在一个容器中加入另一个容器,所以和上面提到的大兵团嵌套小兵团一样,一个嵌入到其它容器中的容器会有自己的“布局方式”,也会有“布局属性”。这里是最容易混淆的地方。
QML中经常使用的“布局方式”有三种,分别是StackLaylout,DockLayout和AbsoulteLayout。
StackLayout表示容器中的组件按一个方向一个接一个摆放,摆放的次序和QML文件中组件的次序相同。当我们为一个容器选择了StackLayout作为布局方式的时候,还可以指定StackLayout的方向是由上到下,还是右左到右。下面是一个由上到下的StackLayout的效果:
指定了容器的“布局方式”后就可以指定组件的“布局属性”了,比如指定上图中的“Control1”按钮的“布局属性”。首先在QML编辑器里将光标定位到“Control1”那个按钮那里,然后在“QML Properties”页面进行设置。因为父容器使用了StackLayout,我们首先在组件的“QML Properties->Layout->LayoutProperties”中选择StackLayout,接着在“Horizontal Alignment”一栏选择“靠左”,“居中”或者“靠右”,上图的效果是选择“居中”的效果。注意,在上面的例子中组件是从上往下排列的,这时为一个组件选择“Vertical Alignment”,也就是垂直对齐方式,是没有意义的。
DockLayout表示容器中的组件不按QML文件中组件的次序摆放,而是完全按照“上,中,下”,“左,中,右”的组合进行摆放。下面是一个DockLayout的效果,
其中Control 1组件选择的“布局属性”是“垂直方向居中”,“水平方向靠左”
Control 2组件选择的“布局属性”是“垂直方向靠上”,“水平方向靠右”
Control 3组件选择的“布局属性”是“垂直方向靠下”,“水平方向居中”
AbsoulteLayout表示容器不按QML文件中组件的次序摆放,而是完全按照组件“布局属性”中的x y 坐标值进行摆放。这个大家应该比较熟悉了,就是可以自由指定组件的x, y 坐标,自由摆放组件。不过开发人员工作量大一些,需要计算好组件的大小和位置。
下面是一个AbsoulteLayout的效果:
了解QML布局管理方式的最简单方法就是启动BB10 Cascades环境中的QML预览功能,一边设置不同的属性,一边观察效果。
这里还有一个小技巧,在使用嵌套容器时,可以给容器一个临时的背景色,这样你在调整设置的时候可以清晰地看到容器的大小,调整起来就比较方便。
分享到:
相关推荐
BB10终端本机 BB10 Cascades 终端仿真器。
知乎日报 BB10(已停止维护此版本,继续更新 Cascades 版本。)暂时测试的机器是 passport, 其他bb10机器没有测试完成功能首页, 置顶新闻(轮播图部分), 每日新闻栏目以及查看栏目内容主题以及查看主题内容查看评论...
黑莓10平台开发教程,Cascades教程,适合于初学者,可以了解整个BB10的开发流程。
节点-bb10 轻松向 BlackBerry 10 应用程序发送推送通知。 安装 $ npm install node-bb10 要求 BlackBerry 10 设备和您在时从 BlackBerry 获得的相应密钥。 用法 var bb10 = require ( 'node-bb10' ) ; // create a...
bb10world for 黑莓 很好用,是zip文件,解压即可
gulp-cordova-build-bb10 为 BlackBerry 10 平台构建cordova 项目。 安装 npm install --save-dev gulp-cordova-build-bb10 用法 确保将的位置添加到您的路径中。 var path = require ( 'path' ) , gulp = ...
科尔多瓦-ua-bb10 BlackBerry 10 推送插件。 注意:Urban Airship 在开发模式下推送消息有问题。 消息没有被传递。 他们知道这个问题,这将在今年晚些时候修复。 如果您想在开发模式下测试您的推送消息,您可以...
黑莓bb10桌面管理器,包含BlackBerry Link,BlackBerry Blend
廉价亲民黑鸟单车BB10 GPS码表评测.pdf
phonegap-ua-bb10(已弃用) 已弃用此插件已弃用,以支持 用于在令人敬畏的 BlackBerry 10 平台上使用 Urban Airship 的 PhoneGap 插件。 配置文件 您应该将以下首选项和调用目标添加到 config.xml 文件中。 &...
BB10安装BAR软件详细教程.黑莓Q10 Z10 详细软件安装转制教程
黑莓手机中一些应用的简化
◆ 未接来电,新短信提醒:可选用 LED、振动、语音、消息框四种方式定时提醒。LED 可设置颜色、亮度、闪烁时间、亮度递减时间。 ◆ 语音报号:可在来电或提醒时用语音播报归属地、号码类型、名字和号码的任意组合。...
BB10基于webworks下的HTML5应用开发
将著名的改编为 BB10 平台,该平台使用替代的 Cascades UI 框架。 可以浏览预构建的 HTML 文档。 它位于 prebuilt-docs-html/ 目录中。
无标签播放器 BB10 音频播放不使用 MP3 标签,而是使用目录树
本软件是一套针对电话的管理软件,可以解决日常繁杂商务电话来往中的一些问题,并帮我们管理好我们的客户或者联系人。让我们的日常工作更加轻松。 本软件的主要功能有: 1、客户管理,让你像管理QQ/MSN好友那样轻松...
BlackBerry手机,Sony定制微信流畅版,之前可以用,不知道以后还可不可以用
BB10-WebWorks-SDK_2.2 最新的SDK下载
黑莓桌面管理器,俗称手机管家电脑版。。