qml之布局管理器(Qt Quick Layouts)

概述

Qt Quick Layouts 是一组用于在用户界面中排列项目的 QML 类型。
与定位器相比，Qt Quick Layouts 还可以调整其项目的大小。😃
这使得它们非常适合可调整大小的用户界面。 由于布局是 items ，因此它们可以嵌套。

类型介绍

Layout QML Type

附加属性 (Attached Properties)

• alignment : Qt.Alignment

此属性指定Item 在其占据的单元格内的对齐方式。
默认值为 0，这意味着它将是 Qt.AlignVCenter | Qt.AlignLeft。
如果仅指定了水平或垂直标志，这些默认值也适用：
如果仅指定水平标志，则默认垂直标志将为 Qt.AlignVCenter，
如果仅指定垂直标志，则默认水平标志将为 Qt.AlignLeft .
有效对齐是以下标志的组合：

Qt::AlignLeft
Qt::AlignHCenter
Qt::AlignRight
Qt::AlignTop
Qt::AlignVCenter
Qt::AlignBottom
Qt::AlignBaseline

• row : int

此属性用于指定 GridLayout 中item的行位置。
如果未设置列和此属性，则由布局为item 分配一个单元格。

默认值为 0。

• column : int

此属性用于指定 GridLayout 中Item的列位置。
如果未设置行和此属性，则由布局为项目分配单元格。

默认值为 0。

• rowSpan : int

此属性用于指定 GridLayout 中Item的行跨度。

默认值为 1。

• columnSpan : int

此属性用于指定 GridLayout 中Item的列跨度。

默认值为 0。

• topMargin : real
• rightMargin : real
• leftMargin : real
• bottomMargin : real

指定Item的四围边距。 如果未设置该值，它将使用margins中的值。

• margins : real

将 Item之外的边距设置为都具有相同的值。Item本身不评估自己的边距。父项有责任决定是否要评估边距。
具体来说，边距仅由 ColumnLayout、RowLayout、GridLayout 和其他类似布局的容器评估，
例如 SplitView，其中项目的有效单元格大小将随着边距的增加而增加。
因此，如果一个有边距的item 是另一个item 的子项，它的位置、大小和隐式大小将保持不变。将边距与对齐相结合将对齐项目，包括其边距。
例如，上边距为 1，下边距为 9 的垂直居中item 将导致单元格内的item 有效对齐在中心上方 4 个像素处。

默认值为 0。

这个属性是在 QtQuick.Layouts 1.2 中引入的。

• maximumHeight : real
• maximumWidth : real
• minimumHeight : real
• minimumWidth : real

默认值是item的隐式最大/小值。

如果项目是布局，则隐式最大/小值将是布局可以具有的最值，其中的任何item都不会超出最值。
任何其他项目的隐式最大值是 Number.POSITIVE_INFINITY,最小值为 0。

将此值设置为 -1 会将宽度/高度重置为其隐式最值。

• preferredHeight : real
• preferredWidth : real

此属性保存布局中项目的首选高/宽度。
如果首选值为 -1，它将被忽略，布局将使用implicitHeight /implicitWidth代替。 默认值为 -1。

• fillHeight : bool
• fillWidth : bool

如果此属性为 true，则项目将在给定约束的同时尽可能高。
如果该属性为 false，则项目的固定高度将设置为首选高度。
默认为 false，但布局本身除外，默认为 true。

网格布局(GridLayout QML Type)说明

GridLayout 提供一种在网格中动态排列项目的方法.
如果调整 GridLayout 的大小，则布局中的所有item都将重新排列。 它类似于基于小部件的 QGridLayout。
GridLayout 元素的所有可见子元素都将属于该布局。 如果你想要一个只有一行或一列的布局，你可以使用 RowLayout 或 ColumnLayout。
这些提供了更方便的 API，并提高了可读性。

默认情况下，item 将根据流属性进行排列。 流属性的默认值为GridLayout.LeftToRight。
如果指定了 columns属性，它将被视为布局可以有多少列的最大限制，然后自动定位回到下一行的开头。 columns 属性仅在 flow 为GridLayout.LeftToRight时使用。

rows 属性以类似的方式工作，但项目是垂直自动定位的。 rows 属性仅在 flow 为GridLayout.TopToBottom 时使用。
您可以通过设置 Layout.row 和 Layout.column 属性来指定您希望item占据哪个单元格。
您还可以通过设置 Layout.rowSpan 或 Layout.columnSpan 属性来指定行跨度或列跨度。

示例：

GridLayout {
    id: grid
    columns: 3
    Text { text: "Three"; font.bold: true; }
    Text { text: "words"; color: "red" }
    Text { text: "in"; font.underline: true }
    Text { text: "a"; font.pixelSize: 20 }
    Text { text: "row"; font.strikeout: true } 
  }

StackLayout 中的项目支持以下附加属性：

Layout.row Layout.column 
Layout.rowSpan 
Layout.columnSpan
Layout.minimumWidth 
Layout.minimumHeight 
Layout.preferredWidth
Layout.preferredHeight 
Layout.maximumWidth 
Layout.maximumHeight
Layout.fillWidth 
Layout.fillHeight 
Layout.alignment 
Layout.margins
Layout.leftMargin 
Layout.rightMargin 
Layout.topMargin
Layout.bottomMargin

GridLayout 属性说明

• layoutDirection : enumeration
  此属性保存网格布局的布局方向 - 它控制item是从左到右还是从右到左布局。
  如果指定了 Qt.RightToLeft，则左对齐的项目将右对齐，右对齐的item将左对齐。
  这个属性是在 QtQuick.Layouts 1.1 中引入的。
  可能的值：
• Qt.LeftToRight (默认) - item从左到右排列。
• Qt.RightToLeft - item从右到左排列。
• flow : enumeration
  此属性保存未设置显式单元格位置的项目的流向。
  它与 columns 或 rows 属性一起使用，它们分别指定何时将流重置到下一行或下一列。
  可能的值为：
• GridLayout.LeftToRight（默认）- item彼此相邻放置，然后换行到下一行。
• GridLayout.TopToBottom - item从上到下彼此相邻放置，然后包裹到下一列。

堆栈布局(StackLayout QML Type)说明

StackLayout 类提供了一堆items，其中一次只有一个item可见.

当前可见项可以通过设置 currentIndex 属性来修改。 该索引对应于 StackLayout 的子项的顺序。
与大多数其他布局相比，子项的 Layout.fillWidth 和 Layout.fillHeight 属性默认为 true。
因此，子项默认填充以匹配 StackLayout 的大小，只要它们的 Layout.maximumWidth 或 Layout.maximumHeight 不阻止它。
通过将项目重新设置为布局，将项目添加到布局中。 同样，删除是通过从布局中重新设置项目来完成的。 这两个操作都会影响布局的 count 属性。

示例：

StackLayout {
    id: layout
    anchors.fill: parent
    currentIndex: 1
    Rectangle {
        color: 'teal'
        implicitWidth: 200
        implicitHeight: 200
    }
    Rectangle {
        color: 'plum'
        implicitWidth: 300
        implicitHeight: 200
    } }

StackLayout 中的项目支持以下附加属性：

Layout.minimumWidth
Layout.minimumHeight 
Layout.preferredWidth 
Layout.preferredHeight
Layout.maximumWidth 
Layout.maximumHeight 
Layout.fillWidth
Layout.fillHeight

StackLayout 属性说明

• count : int
  此属性保存属于布局的项目数。只有作为 StackLayout 子项的item才会成为布局的候选对象。
• currentIndex : int
  此属性保存当前在 StackLayout 中可见的子项的索引。 默认情况下，空布局为 -1，否则默认为 0（指第一项）。