Back to Blog home

Qt Quick布局介绍

Published on Saturday May 18, 2013 by Liang Qi in Qt Quick qt quick Qt Quick 2 Layouts qt-labs-chinese | Comments

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

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

背景

直到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.rowSpanLayout.columnSpan属性进行设定。

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

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

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

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

实例

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

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

ToolBar {
Row {
id: row
spacing: 2
anchors.verticalCenter: parent.verticalCenter
ToolButton { iconSource: "images/go-previous.png" }
ToolButton { iconSource: "images/go-next.png" }
}
Slider {
anchors.left: row.right
anchors.leftMargin: 2
anchors.verticalCenter: parent.verticalCenter
anchors.right: parent.right
}
}

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

ToolBar {
RowLayout {
anchors.fill: parent
spacing: 2
ToolButton { iconSource: "images/go-previous.png" }
ToolButton { iconSource: "images/go-next.png" }
Slider { Layout.fillWidth: true }
}
}

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

总结

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

Subscribe to Our Blog

Stay up to date with the latest marketing, sales and service tips and news.