一、概述

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

默认情况下， Item 将根据 flow 属性进行排列。flow属性的默认值是GridLayout.LeftToRight，就是从左到右排列。

如果指定了columns属性，它将被视为布局可以拥有的列数的最大限制，在自动定位包装回下一行的开始之前。columns属性只在flow为GridLayout.LeftToRight时使用。rows 属性的工作方式类似，但 Item 是自动垂直定位的。只有当flow为GridLayout.TopToBottom时，才会使用rows属性。

您可以通过设置布局来指定您想要 Item 占用的单元格。行和布局。列的属性。您还可以通过设置布局来指定行跨度或列跨度。rowSpan或Layout。columnSpan属性。

其实网格布局就要指定多少行列，由此来计算出网格数，我们还可以设置这个网格之间的距离，网格外部的距离之类的，就是设置东西，布局就是能缩放大小，不布局就可以通过 x, y , anchor 来布局也可以，只是不会随着窗口变化

二、依赖属性

这些的依赖属性是指在这个布局器里面的元素可以写在里面的属性些。就是这些宽高要注意，
这里有一个注意事项：不要在布局中绑定 Item 的x、y、width或height属性，因为这将与布局的目标冲突，也可能导致绑定循环。布局引擎使用 width 和 height 属性来存储根据 minimum/preferred/maximum 计算出的 Item 的当前大小，并且在每次布局 Item 时都会被重写。使用Layout.preferredWidth 和 Layout.preferredHeight, 或者 implicitWidth and implicitHeight 指定元素的首选尺寸。

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

三、例子

1. 不含跨行的

效果

代码

import QtQuick 2.0
import QtQuick.Window 2.3
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.5Window {id: rootvisible: truewidth: 319height: 570title: qsTr("Hello World")GridLayout{rows: 3columns: 3anchors.fill: parentButton{text: "1"Layout.column: 0Layout.row: 0Layout.alignment: Qt.AlignHCenter}Button{text: "2"Layout.column: 1Layout.row: 0Layout.alignment: Qt.AlignHCenter}Button{text: "3"Layout.column: 2Layout.row: 0Layout.alignment: Qt.AlignHCenter}Button{text: "4"Layout.column: 0Layout.row: 1Layout.alignment: Qt.AlignHCenter}Button{text: "5"Layout.column: 1Layout.row: 1Layout.alignment: Qt.AlignHCenter}Button{text: "6"Layout.column: 2Layout.row: 1Layout.alignment: Qt.AlignHCenter}Button{text: "7"Layout.column: 0Layout.row: 2Layout.alignment: Qt.AlignHCenter}Button{text: "8"Layout.column: 1Layout.row: 2Layout.alignment: Qt.AlignHCenter}Button{text: "9"Layout.column: 2Layout.row: 2Layout.alignment: Qt.AlignHCenter}}
}

2. 带跨行列的

效果

代码

import QtQuick 2.0
import QtQuick.Window 2.3
import QtQuick.Layouts 1.3
import QtQuick.Controls 2.5Window {id: rootvisible: truewidth: 319height: 570title: qsTr("Hello World")GridLayout{id: mainlayoutrows: 3columns: 3anchors.fill: parentButton{id:slidertext: "1"Layout.column: 0Layout.row: 0Layout.rowSpan: 3Layout.preferredWidth: 80Layout.preferredHeight: mainlayout.heightLayout.alignment: Qt.AlignHCenter}Button{text: "2"Layout.column: 1Layout.row: 0Layout.columnSpan: 2Layout.preferredWidth: mainlayout.width-slider.widthLayout.preferredHeight: 80Layout.alignment: Qt.AlignTop}Button{text: "5"Layout.column: 1Layout.row: 1Layout.alignment: Qt.AlignHCenter}Button{text: "6"Layout.column: 2Layout.row: 1Layout.alignment: Qt.AlignHCenter}Button{text: "8"Layout.column: 1Layout.row: 2Layout.alignment: Qt.AlignHCenter}Button{text: "9"Layout.column: 2Layout.row: 2Layout.alignment: Qt.AlignHCenter}}
}

3. 从右到左

代码

只需要加一点 layoutDirection: Qt.RightToLeft 就可以啦

...GridLayout{rows: 3columns: 3layoutDirection:  Qt.RightToLeft
....

Qt Quick - GridLayout 网格布局相关推荐

安卓APP_ 布局（5) —— GridLayout网格布局
摘自:安卓APP_ 布局(5) -- GridLayout网格布局作者:丶PURSUING 发布时间: 2021-04-12 00:08:31 网址:https://blog.csdn.net/we ...
Android 应用开发（50）---GridLayout(网格布局)
GridLayout(网格布局) 今天要介绍的布局是Android 4.0以后引入的一个新的布局,和前面所学的TableLayout(表格布局) 有点类似,不过他有很多前者没有的东西,也更加好用, 可 ...
Android 应用开发（39）---GridLayout(网格布局)
GridLayout(网格布局) 可以自己设置布局中组件的排列方式可以自定义网格布局有多少行,多少列可以直接设置组件位于某行某列可以设置组件横跨几行或者几列另外,除了上述内容外,本节还会给大家 ...
Java GUI(图形用户界面)-----GridLayout(网格布局管理器)详解
GridLayout(网格布局管理器) 可以把容器分成n行m列大小相等的网格,每个网格放置一个组件,按照从左往右,从上往下的顺序依次添加,放置在Gird Layout布局管理器的组件将自动占据网格的整 ...
android网格布局间距,Android布局之GridLayout网格布局
网格布局标签是GridLayout.这个布局是android4.0新增的布局.这个布局只有4.0之后的版本才能使用. 不过新增了一些东东 ①跟LinearLayout(线性布局)一样,他可以设置容器中 ...
Android GridLayout网格布局实现复古小米计算器
Android GridLayout网格布局实现复古小米计算器闲暇时间整理一些Android基础知识首先看效果图首先是一些配色: <color name="btnColor&qu ...
【Java AWT 图形界面编程】LayoutManager 布局管理器 ④ ( GridLayout 网格布局 | GridBagLayout 网格包布局 )
文章目录一.GridLayout 网格布局二.GridLayout 构造函数三.GridLayout 网格布局代码示例四.GridBagLayout 网格包布局一.GridLayout 网格 ...
Java学习布局管理器之GridLayout(网格布局)
GridLayout( 网格布局) 具体请看官方JavaApi: java.awt.GridLayout GridLayout 将容器切割为棋盘一样m行n列的网格,每个网格可以放置一个组件,添加到容 ...
Android应用开发之GridLayout(网格布局)
GridLayout 网格布局是Android 4.0以后引入的一个新的布局．它和前面所学的TableLayout(表格布局) 有点类似,不过有很多前者没有的东西,也更加好用．特点: 可以自己设置 ...

Qt Quick - GridLayout 网格布局

GridLayout 理论总结