Qt Forum

    • Login
    • Search
    • Categories
    • Recent
    • Tags
    • Popular
    • Users
    • Groups
    • Search
    • Unsolved

    Unsolved QML - GridLayout - ROW and COLUMN Span - Understanding

    QML and Qt Quick
    2
    2
    1713
    Loading More Posts
    • Oldest to Newest
    • Newest to Oldest
    • Most Votes
    Reply
    • Reply as topic
    Log in to reply
    This topic has been deleted. Only users with topic management privileges can see it.
    • V
      Vildnex last edited by

      I'm trying to learn QML and at this moment I'm having some problems with understanding of rowSpan and columnSpan, so sorry if this question may sound stupid for some of you.


      WHAT I LEARNED:

      Correct me if I'm wrong but in a GridLayout should be like this:

      • Layout.row - indicates the line where the object is located;
      • Layout.column - indicates the column in which the object is located;
      • Layout.rowSpan - indicates how many lines should be stretched object;
      • Layout.columnSpan - indicates how many columns should be stretched
        object;

      WHAT I'M TRYING TO DO:

      Well, in this case, I'm trying to recreate this layout over here
      enter image description here

      This layout, in theory, should have the followings:

      • The actual GridLayout should be composed out of 24 columns and 9 rows
      • RED shape should be at -> col 0, row 1 -> colSpan 3, rowSpan 7
      • BLUE shape should be at -> col 3, row 1 -> colSpan 8, rowSpan 1
      • PURPLE shape should be at -> col 3, row 4 -> colSpan 6, rowSpan 3

      Or at least that's what I've understood so far.


      THE PROBLEM:

      After I've coded the QML with the col, row accordantly, and also colSpan and rowSpan I've obtained this instead.

      enter image description here


      MY CODE:

      import QtQuick 2.5
      import QtQuick.Controls 1.4
      import QtQuick.Layouts 1.1
      
      Item {
          width: 1366
          height: 512
      
          GridLayout {
              id: grid
      
              columns: 24
              rows: 9
              anchors.fill: parent
      
              Rectangle {
      
                  property var rowSpan: 7
                  property var columSpan: 3
      
                  Layout.column: 0
                  Layout.row: 1
      
                  Layout.preferredWidth: (parent.width / parent.columns) * columSpan
                  Layout.preferredHeight: (parent.height / parent.rows) * rowSpan
      
                  Layout.columnSpan: columSpan
                  Layout.rowSpan: rowSpan
      
                  color: "red"
      
              }
      
              Rectangle {
                  property var rowSpan: 1
                  property var columSpan: 8
      
                  Layout.column: 3
                  Layout.row: 1
      
                  Layout.preferredWidth: (parent.width / parent.columns) * columSpan
                  Layout.preferredHeight: (parent.height / parent.rows) * rowSpan
      
                  Layout.columnSpan: columSpan
                  Layout.rowSpan: rowSpan
      
                  color: "blue"
              }
              Rectangle {
                  property var rowSpan: 3
                  property var columSpan: 6
      
                  Layout.column: 4
                  Layout.row: 3
      
                  Layout.preferredWidth: (parent.width / parent.columns) * columSpan
                  Layout.preferredHeight: (parent.height / parent.rows) * rowSpan
      
                  Layout.columnSpan: columSpan
                  Layout.rowSpan: rowSpan
      
                  color: "purple"
              }
          }
      }
      

      Could anyone explain to me what I'm doing wrong or which part of GridLayout I didn't get it right?

      1 Reply Last reply Reply Quote 0
      • fcarney
        fcarney last edited by fcarney

        I think its doing some autolayout on top of the row and column specifier. I don't quite understand why they even offer the ability to specify row and column as it does not work as I would expect.

        import QtQuick 2.12
        import QtQuick.Window 2.12
        
        import QtQuick.Controls 1.5
        import QtQuick.Layouts 1.12
        
        Window {
            visible: true
            width: 1366
            height: 512
            title: qsTr("Grid Spans")
        
            Item {
                width: 1366
                height: 512
        
                GridLayout {
                    id: grid
        
                    columns: 24
                    rows: 9
                    anchors.fill: parent
                    columnSpacing: 0
                    rowSpacing: 0
        
                    onWidthChanged: {
                        console.log(grid.width, grid.height)
                    }
        
                    Rectangle {
        
                        property var rowSpan: 1 //7
                        property var columSpan: 1 //3
        
                        //Layout.column: 0
                        //Layout.row: 1
        
                        Layout.preferredWidth: (parent.width / parent.columns) * columSpan
                        Layout.preferredHeight: (parent.height / parent.rows) * rowSpan
        
                        Layout.columnSpan: columSpan
                        Layout.rowSpan: rowSpan
        
                        color: "red"
        
                    }
        
                    Rectangle {
                        property var rowSpan: 1 //1
                        property var columSpan: 1 //8
        
                        //Layout.column: 3
                        //Layout.row: 1
        
                        Layout.preferredWidth: (parent.width / parent.columns) * columSpan
                        Layout.preferredHeight: (parent.height / parent.rows) * rowSpan
        
                        Layout.columnSpan: columSpan
                        Layout.rowSpan: rowSpan
        
                        color: "blue"
                    }
                    Rectangle {
                        property var rowSpan: 1 //3
                        property var columSpan: 1 //6
        
                        //Layout.column: 4
                        //Layout.row: 3
        
                        Layout.preferredWidth: (parent.width / parent.columns) * columSpan
                        Layout.preferredHeight: (parent.height / parent.rows) * rowSpan
        
                        Layout.columnSpan: columSpan
                        Layout.rowSpan: rowSpan
        
                        color: "purple"
                    }
                }
        
                GridLayout {
                    id: gridlines
        
                    columns: 24
                    rows: 9
                    anchors.fill: parent
                    columnSpacing: 0
                    rowSpacing: 0
        
                    Repeater {
                        model: gridlines.columns*gridlines.rows
                        delegate: transrects
                    }
                    Component {
                        id: transrects
        
                        Rectangle {
                            width: gridlines.width/gridlines.columns
                            height: gridlines.height/gridlines.rows
        
                            color: "transparent"
                            border.width: 1
                            border.color: "grey"
                            opacity: 0.5
                        }
                    }
                }
            }
        
        }
        

        Edit:

        import QtQuick 2.12
        import QtQuick.Window 2.12
        
        import QtQuick.Controls 1.5
        import QtQuick.Layouts 1.12
        
        Window {
            visible: true
            width: 1366
            height: 512
            title: qsTr("Grid Spans")
        
            Item {
                width: 1366
                height: 512
        
                GridLayout {
                    id: grid
        
                    columns: 24
                    rows: 9
                    anchors.fill: parent
                    columnSpacing: 0
                    rowSpacing: 0
        
                    onWidthChanged: {
                        console.log(grid.width, grid.height)
                    }
        
                    Rectangle {
        
                        property var rowSpan: 1 //7
                        property var columSpan: 1 //3
        
                        Layout.column: 0
                        Layout.row: 1
        
                        Layout.preferredWidth: (parent.width / parent.columns) * columSpan
                        Layout.preferredHeight: (parent.height / parent.rows) * rowSpan
        
                        Layout.columnSpan: columSpan
                        Layout.rowSpan: rowSpan
        
                        color: "red"
        
                    }
        
                    Rectangle {
                        property var rowSpan: 1 //1
                        property var columSpan: 1 //8
        
                        Layout.column: 3
                        Layout.row: 1
        
                        Layout.preferredWidth: (parent.width / parent.columns) * columSpan
                        Layout.preferredHeight: (parent.height / parent.rows) * rowSpan
        
                        Layout.columnSpan: columSpan
                        Layout.rowSpan: rowSpan
        
                        color: "blue"
                    }
                    Rectangle {
                        property var rowSpan: 1 //3
                        property var columSpan: 1 //6
        
                        Layout.column: 4
                        Layout.row: 3
        
                        Layout.preferredWidth: (parent.width / parent.columns) * columSpan
                        Layout.preferredHeight: (parent.height / parent.rows) * rowSpan
        
                        Layout.columnSpan: columSpan
                        Layout.rowSpan: rowSpan
        
                        color: "purple"
                    }
                }
        
                GridLayout {
                    id: gridlines
        
                    columns: 24
                    rows: 9
                    anchors.fill: parent
                    columnSpacing: 0
                    rowSpacing: 0
        
                    Repeater {
                        model: gridlines.columns*gridlines.rows
                        delegate: transrects
                    }
                    Component {
                        id: transrects
        
                        Rectangle {
                            width: gridlines.width/gridlines.columns
                            height: gridlines.height/gridlines.rows
        
                            color: "transparent"
                            border.width: 1
                            border.color: "grey"
                            opacity: 0.5
                        }
                    }
                }
            }
        
        }
        
        

        C++ is a perfectly valid school of magic.

        1 Reply Last reply Reply Quote 0
        • First post
          Last post