Qt Quick布局介绍（转载）

yafeilinux

本文链接：http://blog.qt.digia.com/cn/2013 ... g-qt-quick-layouts/

原文链接： Jan-Arve Sæther – Introducing Qt Quick Layouts

如果您想创建一个对于窗口重定义大小响应的还不错的QML应用程序的话，Qt Quick提供的工具箱在某种程度上还很有限。对于这一点，Qt 5.1将会提供新的Qt Quick类型： RowLayout、ColumnLayout和GridLayout。

背景

直到Qt 5.1之前，定位器(positioner)和锚接器(anchor)是Qt Quick中仅有的用于在UI中安排项目的工具。

定位器可以很方便地添加很多项目，但是对于创建一个可以改变大小的UI有点无能为力，因为它们(正如它们的名字所意味的——惊奇、惊奇)只是定位这些项目——宽和高总是不变的。

锚接器有更大的灵活性，代价就是有些啰嗦。使用锚接器，您可以让一个项的一个边和父对象的一个边进行绑定，并且您还可以对这个项的另外一边进行类似的绑定。无论如何，您不能让几个项在窗口大小变化时很简单地改变它们自己的大小。

最后一个选项是您自己手工布局。这样做您可以有很大的灵活性，但是会比较啰嗦、麻烦，并且很容易出错。在开发Qt Quick控件的过程中，我们想改进这一过程，所以决定提供一个更好更方便的布局系统。

import QtQuick.Layouts 1.0

通过包含上述的import，您将会在您的工具箱中发现RowLayout、ColumnLayout和GridLayout。这些布局的行为和它们在QtWidgets模块中的姐妹(QHBoxLayout、QVBoxLayout和QGridLayout)非常相似。另外它们还试图与Row、Column和Grid这几个QML元素中有意义的API保持一致。所以，如果您对它们中的一些比较熟悉的话，您会发现Qt Quick布局很好上手。

对齐(alignment) 在一个单元格中对齐项可以通过Layout.alignment属性进行设定。

跨度(span) 行跨度或者列跨度可以通过Layout.rowSpan和Layout.columnSpan属性进行设定。

网格坐标(grid coordinate) 可以通过Layout.row和Layout.column属性进行设定。

可重定义大小的项 可以通过Layout.fillWidth和Layout.fillHeight属性进行设定。这是Qt Quick布局的主要目的。

最小、最佳和最大的大小 可以通过Layout.minimumWidth、Layout.preferredWidth和Layout.maximumWidth属性进行设定(对于高度的设定，只要把其中的“Width”换成”Height”就可以了)。

这一套特性也许看起来不多，但是实际上在很多情况下，您可以把不可延伸项和可延伸项放在同一个布局中，这样事情就会更容易一些，而且更直观一些。

实例

假设您要创建一个ToolBar，其中有两个按钮和一个滑块，其中滑块会占据剩余的空间。当这个ToolBar的大小发生变化时，额外的空间将都会分配给这个滑块。

如果没有Qt Quick布局，实现的代码一般都是混合使用Row和锚接器。

1. ToolBar {
   
2.     Row {
   
3.         id: row
   
4.         spacing: 2
   
5.         anchors.verticalCenter: parent.verticalCenter
   
6.         ToolButton { iconSource: "images/go-previous.png" }
   
7.         ToolButton { iconSource: "images/go-next.png" }
   
8.     }
   
9.     Slider {
   
10.         anchors.left: row.right
    
11.         anchors.leftMargin: 2
    
12.         anchors.verticalCenter: parent.verticalCenter
    
13.         anchors.right: parent.right
    
14.     }
    
15. }

复制代码

使用了Qt Quick布局之后，所有的项都可以被添加到同一个布局中：

1. ToolBar {
   
2.     RowLayout {
   
3.         anchors.fill: parent
   
4.         spacing: 2
   
5.         ToolButton { iconSource: "images/go-previous.png" }
   
6.         ToolButton { iconSource: "images/go-next.png" }
   
7.         Slider { Layout.fillWidth: true }
   
8.     }
   
9. }

复制代码

请注意这里Slider元素的声明短了多少。另外需要注意的是当使用Qt Quick布局时，有关间隔(spacing)只需要设定一次。代码从288个字符减少到172个字符(不包括空格换行等)，大约减少了40%。

总结

在这个实例中，使用Qt Quick布局，我们可以少写40%的代码，增强可读性(不但代码变短了，而且代码的结构和UI的结构更加一致了)。如果您想得到一个可以重定义大小的UI，您也许会发现Qt Quick布局比锚接器、定位器和手工布局都更容易一些。

---