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的效果：

 

指定了容器的“布局方式”后就可以指定组件的“布局属性”了，比如指定上图中的“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预览功能，一边设置不同的属性，一边观察效果。

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