Anchoring 4 rectangles to form a plus sign in QML - QtQuick

Question

This is what I tried:

/* The way I want it:
 *          red
 * blue             green
 *         yellow 
 */

import QtQuick 2.0

Item
{
  Rectangle 
  {
    id : one
    height : 100
    width  : 100
    color : "red"
    anchors.leftMargin   : 20
    anchors.topMargin    : 20
    anchors.rightMargin  : 20
    anchors.bottomMargin : 20
  }

  Rectangle 
  {
    id : two
    height : 100
    width  : 100
    color : "blue"
    anchors.leftMargin   : 20
    anchors.topMargin    : 20
    anchors.rightMargin  : 20
    anchors.bottomMargin : 20

    // On the top of blue rectangle there should be the red rectangle.
    anchors.top : one.bottom
    // And the blue rectangle should be on the bottom left of the red rectangle
    anchors.right : one.left
  }

  Rectangle 
  {
    id : three
    height : 100
    width  : 100
    color : "green"
    anchors.leftMargin   : 20
    anchors.topMargin    : 20
    anchors.rightMargin  : 20
    anchors.bottomMargin : 20

    // On the top of green rectangle there should be the red rectangle.
    anchors.top  : one.bottom
    // And the green rectangle should be on the bottom right of the red rectangle
    anchors.left : one.right
  }

  Rectangle 
  {
    id : four
    height : 100
    width  : 100
    color : "yellow"
    anchors.leftMargin   : 20
    anchors.topMargin    : 20
    anchors.rightMargin  : 20
    anchors.bottomMargin : 20

    // On the top of yellow rectangle there should be the blue rectangle and green rectangle.
    anchors.top   : two.bottom
    // And the yellow rectangle should be on the bottom right of the blue rectangle 
    anchors.left  : two.right
    // And the yellow rectangle should be on the bottom left of the green rectangle.
    anchors.right : three.left    
  }
}

This is what I got:

Can't see the blue rectangle here:

Answer 1

The top left corner of your first rectangle is placed in the default location (0|0) and the other rectangles are placed relative to that one through the anchors.

As the top left corner of the scene rectangle shows (0|0), you can't see the blue rectangle as it's outside the scene.

So either move the whole thing a bit to the right-hand side, or tell the scene to have X = 0 in its middle (if that is supported by QML - can't test it here unfortunately)

Answer 2

Here is a component making a plus sign. I added a new Rectangle called rectCenter and then anchored properly every other Rectangle to this one.

import QtQuick 2.0

Item
{
  width: 150
  height: width
  property int rectsDimension: 20


  Rectangle {
    id: rectCenter
    height: parent.rectsDimension
    width: height

    anchors.centerIn: parent
  }

  Rectangle
  {
    id : rectTop
    height: parent.rectsDimension
    width: height
    color : "red"
    anchors.bottom: rectCenter.top
    anchors.left: rectCenter.left
  }

  Rectangle
  {
    id : rectLeft
    height: parent.rectsDimension
    width: height
    color : "blue"
    anchors.right: rectCenter.left
    anchors.top: rectCenter.top
  }

  Rectangle
  {
    id : rectRight
    height: parent.rectsDimension
    width: height
    color : "green"
    anchors.left: rectCenter.right
    anchors.top: rectCenter.top
  }

  Rectangle
  {
    id : rectBottom
    height: parent.rectsDimension
    width: height
    color : "yellow"
    anchors.top: rectCenter.bottom
    anchors.left: rectCenter.left
  }
}