BB10 Cascades:QML中的布局管理方式

在界面设计中,开发人员除了考虑除了组件自身的外观以外,另一个考虑的因素就是组件的位置。

在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的效果:

 

BB10 Cascades:QML中的布局管理方式_第1张图片

指定了容器的“布局方式”后就可以指定组件的“布局属性”了,比如指定上图中的“Control1”按钮的“布局属性”。首先在QML编辑器里将光标定位到“Control1”那个按钮那里,然后在“QML Properties”页面进行设置。因为父容器使用了StackLayout,我们首先在组件的“QML Properties->Layout->LayoutProperties”中选择StackLayout,接着在“Horizontal Alignment”一栏选择“靠左”,“居中”或者“靠右”,上图的效果是选择“居中”的效果。注意,在上面的例子中组件是从上往下排列的,这时为一个组件选择“Vertical Alignment”,也就是垂直对齐方式,是没有意义的。

 

 

DockLayout表示容器中的组件不按QML文件中组件的次序摆放,而是完全按照“上,中,下”,“左,中,右”的组合进行摆放。下面是一个DockLayout的效果,

其中Control 1组件选择的“布局属性”是“垂直方向居中”,“水平方向靠左”

Control 2组件选择的“布局属性”是“垂直方向靠上”,“水平方向靠右”

Control 3组件选择的“布局属性”是“垂直方向靠下”,“水平方向居中”

BB10 Cascades:QML中的布局管理方式_第2张图片

 

 AbsoulteLayout表示容器不按QML文件中组件的次序摆放,而是完全按照组件“布局属性”中的x y 坐标值进行摆放。这个大家应该比较熟悉了,就是可以自由指定组件的x, y 坐标,自由摆放组件。不过开发人员工作量大一些,需要计算好组件的大小和位置。

下面是一个AbsoulteLayout的效果:

BB10 Cascades:QML中的布局管理方式_第3张图片

 

 了解QML布局管理方式的最简单方法就是启动BB10 Cascades环境中的QML预览功能,一边设置不同的属性,一边观察效果。

这里还有一个小技巧,在使用嵌套容器时,可以给容器一个临时的背景色,这样你在调整设置的时候可以清晰地看到容器的大小,调整起来就比较方便。

你可能感兴趣的:(BB10 Cascades:QML中的布局管理方式)