qt - QMLでプラス記号を形成するために4つの長方形を固定する - 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

最初の四角形の左上隅はデフォルトの位置 (0|0) に配置され、他の四角形はアンカーを介してその位置に対して相対的に配置されます。

シーンの四角形の左上隅が (0|0) を示しているように、青い四角形はシーンの外にあるため見えません。

したがって、全体を少し右側に移動するか、シーンの中央に X = 0 を配置するように指示します (QML でサポートされている場合、残念ながらここではテストできません)。