锚定4个矩形以在QML中形成加号 - QtQuick

Question

这就是我的尝试：

/* 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    
  }
}

这就是我得到的：

这里看不到蓝色矩形：

Answer 1

这是一个加号的组件。我添加了一个名为Rectangle的新rectCenter，然后将其他Rectangle正确锚定到此{。}}。

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
  }
}

Answer 2

第一个矩形的左上角放置在默认位置（0 | 0），其他矩形通过锚点相对于那个放置。

由于场景矩形的左上角显示（0 | 0），您无法看到蓝色矩形，因为它在场景外。

所以要么把整个东西移到右边，要么告诉场景中间有X = 0（如果QML支持那么 - 不幸的是不能在这里测试）