I don't see a need for any complex imperative code here. I don't know what you have so far so let's try from scratch... BTW. I didn't test the code below, so it can contain minor errors but the general idea should be valid.

NavigationPanel -- contains two rectangles and a grid layout:

javascript Code: 
  1. import QtQuick 2.2
  2. import QtQuick.Layouts 1.0
  3.  
  4. Item {
  5.   id: root
  6.  
  7.   property alias rows: grid.rows
  8.   property alias columns: grid.columns
  9.   property alias cellSpacing: grid.rowSpacing
  10.   property int cellPadding: 0
  11.  
  12.   default property list<NavigationTile> tiles
  13.  
  14.   Rectangle {
  15.     id: outer
  16.  
  17.     Rectangle {
  18.       id: inner
  19.     }
  20.   }
  21.  
  22.   GridLayout {
  23.     id: grid
  24.     columnSpacing: rowSpacing
  25.  
  26.     Repeater {
  27.       model: root.tiles
  28.  
  29.       Item {
  30.         margins: root.cellPadding
  31.         Image {
  32.           anchors.fill: parent
  33.           source: modelData.image
  34.         }
  35.         Rectangle {
  36.           anchors.fill: parent
  37.           color: modelData.color
  38.         }
  39.         Layout { rowSpan: modelData.rowSpan; columnSpan: modelData.columnSpan }
  40.  
  41.       }
  42.     }
  43.   }
  44. }
To copy to clipboard, switch view to plain text mode 

NavigationTile -- definition of a tile

javascript Code: 
  1. import QtQuick 2.2
  2.  
  3. QtObject {
  4.   id: tile
  5.  
  6.   property color color
  7.   property string image
  8.   property int columnSpan: 1
  9.   property int rowSpan: 1
  10.   property string target
  11. }
To copy to clipboard, switch view to plain text mode 

What's next?