Skip to main content

Qt Quick布局介绍

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布局比锚接器、定位器和手工布局都更容易一些。

Comments

Subscribe to our blog

Try Qt 6.11 Now!

Download the latest release here: www.qt.io/download

Qt 6.11 is now available, with new features and improvements for application developers and device creators.

We're Hiring

Check out all our open positions here and follow us on Instagram to see what it's like to be #QtPeople.