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
ExpectedLayout.png

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.

CurrentLayout.png

MY CODE:

Qt Code: 
  1. import QtQuick 2.5
  2.     import QtQuick.Controls 1.4
  3.     import QtQuick.Layouts 1.1
  4.  
  5.     Item {
  6.         width: 1366
  7.         height: 512
  8.  
  9.         GridLayout {
  10.             id: grid
  11.  
  12.             columns: 24
  13.             rows: 9
  14.             anchors.fill: parent
  15.  
  16.             Rectangle {
  17.  
  18.                 property var rowSpan: 7
  19.                 property var columSpan: 3
  20.  
  21.                 Layout.column: 0
  22.                 Layout.row: 1
  23.  
  24.                 Layout.preferredWidth: (parent.width / parent.columns) * columSpan
  25.                 Layout.preferredHeight: (parent.height / parent.rows) * rowSpan
  26.  
  27.                 Layout.columnSpan: columSpan
  28.                 Layout.rowSpan: rowSpan
  29.  
  30.                 color: "red"
  31.  
  32.             }
  33.  
  34.             Rectangle {
  35.                 property var rowSpan: 1
  36.                 property var columSpan: 8
  37.  
  38.                 Layout.column: 3
  39.                 Layout.row: 1
  40.  
  41.                 Layout.preferredWidth: (parent.width / parent.columns) * columSpan
  42.                 Layout.preferredHeight: (parent.height / parent.rows) * rowSpan
  43.  
  44.                 Layout.columnSpan: columSpan
  45.                 Layout.rowSpan: rowSpan
  46.  
  47.                 color: "blue"
  48.             }
  49.             Rectangle {
  50.                 property var rowSpan: 3
  51.                 property var columSpan: 6
  52.  
  53.                 Layout.column: 4
  54.                 Layout.row: 3
  55.  
  56.                 Layout.preferredWidth: (parent.width / parent.columns) * columSpan
  57.                 Layout.preferredHeight: (parent.height / parent.rows) * rowSpan
  58.  
  59.                 Layout.columnSpan: columSpan
  60.                 Layout.rowSpan: rowSpan
  61.  
  62.                 color: "purple"
  63.             }
  64.         }
  65.     }
To copy to clipboard, switch view to plain text mode 

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