Qt应用开发(Quick篇)——布局类与布局模块

一、前言

实际应用中，布局是常用的功能，布局最直观的就是提供空间使用率，改善空间的流动和模块之间的重叠，让界面更加的美观。

二、布局类Layout

2.1 介绍

将Layout类型的对象附加到布局的子元素上，提供有关该项的特定于布局的信息，附加对象的属性也会影响布局安排项目的方式。

提供最小宽度minimumWidth、最大宽度maximumWidth、首选宽度preferredWidth等影响元素的宽度，填充宽度fillWidth和填充高度fillHeight属性如果它们为false，则项目的大小将固定为首选大小，否则，当布局调整大小时，它将在最小和最大之间增长或缩小。

 ColumnLayout{spacing: 2Rectangle {Layout.alignment: Qt.AlignCentercolor: "red"Layout.preferredWidth: 40Layout.preferredHeight: 40}Rectangle {Layout.alignment: Qt.AlignRightcolor: "green"Layout.preferredWidth: 40Layout.preferredHeight: 70}Rectangle {Layout.alignment: Qt.AlignBottomLayout.fillHeight: truecolor: "blue"Layout.preferredWidth: 70Layout.preferredHeight: 40}}

注意:不要绑定到布局中项目的x、y、width或heigh属性，因为这将与布局的目标相冲突，并且还可能导致绑定循环。布局引擎使用宽度和高度属性来存储从最小/首选/最大附加属性计算出来的项目的当前大小，并且可以在每次布局项目时重写。

2.2 依附属性

Layout.alignment : Qt.Alignment

此属性表示元素在其占用的单元格内的对齐方式，默认为左对齐+纵向居中，也就是Qt.AlignVCenter | Qt.AlignLeft，如果只指定了水平标志，默认的垂直标志将是Qt.AlignVCenter，如果只指定了垂直标志，默认的水平标志将是Qt.AlignLeft。

有效的对齐方式有：

Qt::AlignLeft                水平左对齐
Qt::AlignHCenter         水平居中
Qt::AlignRight              水平右对齐
Qt::AlignTop                 垂直顶部对齐
Qt::AlignVCenter        垂直居中
Qt::AlignBottom            垂直底部对齐
Qt::AlignBaseline          垂直基线对齐

Layout.margins : real

Layout.bottomMargin : real

Layout.topMargin : real

Layout.rightMargin : real

Layout.leftMargin : real

设置布局内元素的外边距，默认为0。如果设置了边距，那么元素的有效单元格大小将随着边距的增加而增加。

Layout.maximumHeight : real

Layout.maximumWidth : real

Layout.minimumHeight : real

Layout.minimumWidth : real

Layout.preferredHeight : real

Layout.preferredWidth : real

Layout.fillHeight : bool

Layout.fillWidth : bool

设置布局内元素的宽高和是否填充策略。

Layout.column : int

Layout.row : int

指定元素在网格布局GridLayout中的位置。

Layout.columnSpan : int

Layout.rowSpan : int

指定元素在网格布局GridLayout中的行和列跨度，默认值为1，也就是占据一行一列。

在下面的例子中，第一个元素的行跨度为2，所以它占据了两行，在实际的应用场景中，该属性在网格布局中是非常好用的。

import QtQuick 2.15
import QtQuick.Window 2.15
import QtQuick.VirtualKeyboard 2.15
import QtQuick.Layouts 1.15Window {id: windowwidth:800height: 600visible: truetitle: qsTr("Hello World")GridLayout{anchors.centerIn: parentcolumns: 3Rectangle {Layout.alignment: Qt.AlignBottomLayout.fillHeight: trueLayout.rowSpan: 2color: "blue"Layout.preferredWidth: 70Layout.preferredHeight: 40}Rectangle {Layout.alignment: Qt.AlignBottomLayout.fillHeight: truecolor: "blue"Layout.preferredWidth: 70Layout.preferredHeight: 40}Rectangle {Layout.alignment: Qt.AlignBottomLayout.fillHeight: truecolor: "blue"Layout.preferredWidth: 70Layout.preferredHeight: 40}Rectangle {Layout.alignment: Qt.AlignBottomLayout.fillHeight: truecolor: "blue"Layout.preferredWidth: 70Layout.preferredHeight: 40}Rectangle {Layout.alignment: Qt.AlignBottomLayout.fillHeight: truecolor: "blue"Layout.preferredWidth: 70Layout.preferredHeight: 40}}}

三、行布局模块RowLayout、列布局模块ColumnLayout

这两种模块的作用比较单一，只支持一行/一列的元素的布局，通过Layout类的依附属性完成界面的设计。

3.1 属性

layoutDirection : enumeration

此属性保留列布局的布局方向是从左到右还是从右到左进行布局，默认为从左到右，在开头实例布局方向，左侧为从右到左效果，右侧为从左到右效果。

spacing : real

该属性每个单元格之间的间距，默认为5。

四、网格布局模块GridLayout

网格布局是单向布局的高级版本，代码参考第二个实例。

4.1属性

layoutDirection属性与单向布局相同，其他属性还有:

columnSpacing : real

rowSpacing : real

每个单元格之间的行列间距，默认为5。

flow : enumeration

该属性表示没有显式单元格位置集的项的流向。它与columns或rows属性一起使用，它们分别指定何时将流重置为下一行或下一列，默认为从左到右。

下面的实例中，通过五个不同颜色的

GridLayout{                             anchors.centerIn: parent            columns:2                           // rows: 3                           // flow:GridLayout.TopToBottom       Rectangle {                         Layout.alignment: Qt.AlignBottomLayout.fillHeight: true         Layout.rowSpan: 2               color: "blue"                   Layout.preferredWidth: 70       Layout.preferredHeight: 40      }                                   Rectangle {                         Layout.alignment: Qt.AlignBottomLayout.fillHeight: true         color: "red"                    Layout.preferredWidth: 70       Layout.preferredHeight: 40      }                                   Rectangle {                         Layout.alignment: Qt.AlignBottomLayout.fillHeight: true         color: "green"                  Layout.preferredWidth: 70       Layout.preferredHeight: 40      }                                   Rectangle {                         Layout.alignment: Qt.AlignBottomLayout.fillHeight: true         color: "grey"                   Layout.preferredWidth: 70       Layout.preferredHeight: 40      }                                   Rectangle {                         Layout.alignment: Qt.AlignBottomLayout.fillHeight: true         color: "black"                  Layout.preferredWidth: 70       Layout.preferredHeight: 40      }                                   
}

GridLayout{                             anchors.centerIn: parent            // columns:2                         rows: 3                             flow:GridLayout.TopToBottom         Rectangle {                         Layout.alignment: Qt.AlignBottomLayout.fillHeight: true         Layout.rowSpan: 2               color: "blue"                   Layout.preferredWidth: 70       Layout.preferredHeight: 40      }                                   Rectangle {                         Layout.alignment: Qt.AlignBottomLayout.fillHeight: true         color: "red"                    Layout.preferredWidth: 70       Layout.preferredHeight: 40      }                                   Rectangle {                         Layout.alignment: Qt.AlignBottomLayout.fillHeight: true         color: "green"                  Layout.preferredWidth: 70       Layout.preferredHeight: 40      }                                   Rectangle {                         Layout.alignment: Qt.AlignBottomLayout.fillHeight: true         color: "grey"                   Layout.preferredWidth: 70       Layout.preferredHeight: 40      }                                   Rectangle {                         Layout.alignment: Qt.AlignBottomLayout.fillHeight: true         color: "black"                  Layout.preferredWidth: 70       Layout.preferredHeight: 40      }                                   
}