Skip to content
  • Categories
  • Recent
  • Tags
  • Popular
  • Users
  • Groups
  • Search
  • Get Qt Extensions
  • Unsolved
Collapse
Brand Logo
  1. Home
  2. Qt Development
  3. QML and Qt Quick
  4. QML - GridLayout - ROW and COLUMN Span - Understanding
Forum Updated to NodeBB v4.3 + New Features

QML - GridLayout - ROW and COLUMN Span - Understanding

Scheduled Pinned Locked Moved Unsolved QML and Qt Quick
2 Posts 2 Posters 4.0k Views 1 Watching
  • 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 Offline
    V Offline
    Vildnex
    wrote on 14 May 2020, 17:32 last edited by
    #1

    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
    0
    • F Offline
      F Offline
      fcarney
      wrote on 14 May 2020, 19:27 last edited by fcarney
      #2

      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
      0

      1/2

      14 May 2020, 17:32

      • Login

      • Login or register to search.
      1 out of 2
      • First post
        1/2
        Last post
      0
      • Categories
      • Recent
      • Tags
      • Popular
      • Users
      • Groups
      • Search
      • Get Qt Extensions
      • Unsolved