本文共 2444 字，大约阅读时间需要 8 分钟。

目录

基本概念

如果QGridLaout大小被调整，所有item的布局都将会重新排列。和widget的QGridLayout一样。如果想要一行或一列的布局可以使用RowLayout和ColumnLayout。

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

运行截图如下：

代码与实例

程序运行截图如下：

qml代码如下：

import QtQuick 2.9import QtQuick.Window 2.2import QtQuick.Layouts 1.1Window {    visible: true    width: mGridLayoutId.implicitWidth    height: mGridLayoutId.implicitHeight    title: qsTr("Hello World")    property int intValue: 100    GridLayout {        id: mGridLayoutId        anchors.fill: parent        columns: 3        layoutDirection: Qt.RightToLeft        Rectangle{            id: topLeftRectId            width: intValue            height: intValue            Layout.fillWidth: true            Layout.fillHeight: true            color: "green"        }        Rectangle{            width: intValue            height: intValue            Layout.fillWidth: true            Layout.fillHeight: true            color: "red"        }        Rectangle{            width: intValue            height: intValue            Layout.fillWidth: true            Layout.fillHeight: true            color: "blue"        }        Rectangle{            width: intValue            height: intValue            Layout.fillHeight: true            Layout.fillWidth: true            color: "yellow"        }        Rectangle{            width: intValue            height: intValue            Layout.fillHeight: true            Layout.fillWidth: true            color: "pink"        }        Rectangle{            width: intValue            height: intValue            Layout.fillHeight: true            Layout.fillWidth: true            color: "magenta"        }        Rectangle{            width: intValue            height: intValue            Layout.fillHeight: true            Layout.fillWidth: true            color: "yellowgreen"        }        Rectangle{            width: intValue            height: intValue            Layout.fillHeight: true            Layout.fillWidth: true            color: "dodgerblue"        }        Rectangle{            width: intValue            height: intValue            Layout.fillHeight: true            Layout.fillWidth: true            color: "black"        }    }}

转载地址：https://it1995.blog.csdn.net/article/details/93378641 如侵犯您的版权，请留言回复原文章的地址，我们会给您删除此文章，给您带来不便请您谅解！