Roson的Qt之旅 #112 QML布局之GridLayout(表格布局)

1.GridLayout 概述

GridLayout 提供了一种在网格中动态安排项目的方法

导入声明:

import QtQuick.Layouts 1.3

继承自:Item

如果GridLayout被调整大小，布局中的所有项目将被重新排列。这与基于widget的QGridLayout类似。GridLayout元素的所有可见子项将属于该布局。如果你想要一个只有一行或一列的布局，你可以使用RowLayout或ColumnLayout。这些提供了更方便的API，并提高了可读性。

默认情况下，项目将根据flow属性来安排。Flow属性的默认值是GridLayout.LeftToRight。
如果指定了columns属性，它将被视为布局可以有多少列的最大限制，在自动定位包回下一行的开始之前。columns属性只在flow为GridLayout.LeftToRight时使用。
 

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 }
  }

 

rows属性的工作方式类似，但项目是自动垂直定位的。rows属性只在flow为GridLayout.TopToBottom时使用。

你可以通过设置Layout.row和Layout.column属性来指定你想让一个项目占据哪个单元。你还可以通过设置Layout.rowSpan或Layout.columnSpan属性来指定行跨度或列跨度。

GridLayout中的项目支持这些附加属性:

• 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(下边距)

更多信息，参见RowLayout, ColumnLayout, and Grid.

2.属性介绍

columnSpacing : real
此属性持有每一列之间的间距。默认值是5。

columns : int
此属性持有项目定位的列数限制，如果流向是GridLayout.LeftToRight。默认值是没有限制。

flow : enumeration
此属性持有没有明确设置单元格位置的项目的流动方向。它与columns或rows属性一起使用，它们分别指定流向何时被重置到下一行或下一列。
可能的值是:

• GridLayout.LeftToRight (default) - 项目被定位到彼此的旁边，然后包裹到下一行
• GridLayout.TopToBottom - 项目从上到下挨着定位，然后包到下一列。

参见rows and columns.

layoutDirection : enumeration

这个属性持有网格布局的布局方向--它控制项目是从左到右还是从右到左布局的。如果指定了Qt.RightToLeft，左对齐的项目将是右对齐的，右对齐的项目将是左对齐的。
可能的值:

• Qt.LeftToRight (default) -  项目从左到右排列
• Qt.RightToLeft - 项目从右到左排列

rowSpacing : real

这个属性持有每行之间的间距。默认值为5。

rows : int

此属性持有项目定位的行数限制，如果流向是GridLayout.TopToBottom。默认值是没有限制。