Qt文档阅读笔记-GridLayout QML Type解析与实例

目录

 

 

基本概念

代码与实例

---

 

基本概念

如果QGridLaout大小被调整，所有item的布局都将会重新排列。和widget的QGridLayout一样。如果想要一行或一列的布局可以使用RowLayout和ColumnLayout。
如果指定了columns这个属性，他会限制列的大小。

  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为垂直限制

 

代码与实例

程序运行截图如下：

qml代码如下：

import QtQuick 2.9
import QtQuick.Window 2.2
import QtQuick.Layouts 1.1

Window {
    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"
        }

    }
}